專利名稱：一種基于web頁的模擬IM客戶端界面的方法和裝置的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及計算機技術(shù)領(lǐng)域，特別涉及一種基于網(wǎng)絡(luò)(web)頁模擬即 時通訊(IM)客戶端界面的方法和裝置。
背景技術(shù)：
網(wǎng)絡(luò)即時通訊工具發(fā)展到今天，已經(jīng)被大多數(shù)的用戶所接受，成為用戶 必不可少的軟件工具，不但在平時的休閑娛樂中，而且在用戶的工作中得到 廣泛的使用。因此用戶對IM軟件的易用性，穩(wěn)定性，安全性等方面提出了 較高的要求。但是在某些場合下，用戶需要IM的便利性，但是卻不能或者不方便安 裝IM軟件，此時，通過web頁面訪問進行IM聊天，提供了一種有效的解 決方案，使得用戶不用安裝IM軟件就可以享受IM的便利性。在使用web頁面進行聊天的時候，用戶必然需要先熟悉如何使用web 頁面聊天工具?？蛻舳薎M軟件經(jīng)過不斷的發(fā)展，雖然也在不斷的更新?lián)Q代， 但基本的使用習(xí)慣和操作風(fēng)格一直保持著相對固定的模式。如果基于web 的聊天工具與用戶平日使用的客戶端IM軟件在使用習(xí)慣和操作風(fēng)格上相差 比較大的話，用戶熟悉和掌握該web聊天工具就需要較長的時間，給用戶帶 來了不便。發(fā)明內(nèi)容有鑒于此，本發(fā)明實施例提出一種基于web頁的模擬IM客戶端界面的 方法和裝置，可以提供在使用習(xí)慣和操作風(fēng)格上于客戶端IM軟件類似的 web頁面取卩天工具。本發(fā)明實施例提出的基于web頁的模擬IM客戶端界面的方法，用超文本 標(biāo)記語言HTML的布局元素div模擬IM客戶端軟件的主界面的標(biāo)簽和活動窗 口，稱用于模擬標(biāo)簽的div為標(biāo)簽div,稱用于模擬活動窗口的div為活動窗口 div，各個標(biāo)簽div模擬的主界面標(biāo)簽從上至下或從左至右依次排列，各個活動 窗口 div模擬的活動窗口層疊排列，每個活動窗口 div對應(yīng)一個標(biāo)簽div,并包 括對鼠標(biāo)動作進行檢測，根據(jù)所檢測到的鼠標(biāo)動作，對所模擬的IM客戶 端的主界面標(biāo)簽和/或活動窗口進行相應(yīng)操作。本發(fā)明實施例提出的基于web頁的模擬IM客戶端界面的裝置，包括 鼠標(biāo)動作檢測模塊，用于檢測鼠標(biāo)的點擊動作；主界面模擬模塊，采用標(biāo)簽div模擬IM客戶端軟件的主界面標(biāo)簽，各作檢測模塊檢測到的鼠標(biāo)點擊動作，對所模擬的主界面標(biāo)簽進行相應(yīng)操作； 活動窗口模擬模塊，采用活動窗口 div模擬IM客戶端軟件的活動窗口 ，各個活動窗口 div模擬的活動窗口層疊排列，每個活動窗口 div對應(yīng)主界面模擬模塊的一個標(biāo)簽div，并根據(jù)鼠標(biāo)動作檢測模塊檢測到的鼠標(biāo)點擊動作，對所模擬的活動窗口進行相應(yīng)操作。從以上技術(shù)方案可以看出，本發(fā)明技術(shù)方案使得基于web模擬IM客戶端軟件的界面，與客戶端的體驗近乎一致，給予了用戶更好的體驗。


圖1為現(xiàn)有技術(shù)的IM客戶端軟件界面的示意圖；圖2為本發(fā)明實施例實現(xiàn)的基于web的界面示意圖；圖3為本發(fā)明第一實施例實現(xiàn)活動窗口切換的流程圖；圖4為本發(fā)明第二實施例實現(xiàn)新增標(biāo)簽的流程圖；圖5為本發(fā)明第三實施例實現(xiàn)標(biāo)簽翻頁的示意圖；圖6為本發(fā)明第四實施例的基于web頁的模擬IM客戶端界面的裝置框圖。
具體實施方式
在對本發(fā)明實施例方案進行介紹之前，首先對常見的IM客戶端軟件的界面進行介紹。如圖1所示為常用IM客戶端軟件的界面，主要包括主界面 和活動窗口兩部分。其中主界面是IM客戶端軟件的主要的顯示界面，由一 個或多個標(biāo)簽(tab)組成，用戶操作鼠標(biāo)點擊某個標(biāo)簽，則該標(biāo)簽對應(yīng)的 內(nèi)容顯示出來，而其它標(biāo)簽的內(nèi)容隱藏，僅顯示標(biāo)簽的標(biāo)題。如圖l所示的 狀態(tài)就是顯示tab3對應(yīng)的內(nèi)容，而隱藏了其它tab的內(nèi)容。每個tab對應(yīng)聊 天對象一個分類，例如，標(biāo)簽"好友，，、"家人，，、"群組"、"黑名單" 分別對應(yīng)內(nèi)容就是相應(yīng)分類的聯(lián)系人的名單。用戶點擊當(dāng)前顯示的tab對應(yīng) 的內(nèi)容中的某個聯(lián)系人(該聯(lián)系人通常用圖標(biāo)和文字的形式表示)，則彈出 用于與該聯(lián)系人聊天的活動窗口 ，用戶在該活動窗口可以輸入聊天信息并將 該聊天信息發(fā)送給該聯(lián)系人，并且也可以通過該活動窗口看到來自該聯(lián)系人 的聊天信息。用戶還可以自定義新的標(biāo)簽，以便對聯(lián)系人進行更細致的分類。 圖1所示的主界面和活動窗口的位置僅是一個示例，它們都可以顯示在客戶 端顯示界面的任何位置上。目前的IM客戶端軟件除了提供基本的聊天功能之外，還包括傳輸文件、 進行音樂廣播、推送廣告等等其它功能，這些功能也是基于圖l所示的界面 上實現(xiàn)的。本發(fā)明實施例為了能夠基于web實現(xiàn)與圖l所示類似的界面，主要采 用超文本標(biāo)記語言(Hypertext Marker Language, HTML )和瀏覽器腳本 (javascript)技術(shù)，使用HTML的布局(div )元素來模擬主界面的標(biāo)簽和 活動窗口 。Div元素是用來為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和 背景的元素。Div的起始標(biāo)志〈div〉和結(jié)束標(biāo)志々div〉之間的所有內(nèi)容用來構(gòu) 成對應(yīng)的主界面標(biāo)簽，其中所包含元素的特性由div標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。為便于描述，以下將用于模擬標(biāo)簽的div稱為標(biāo)簽div,將才莫擬活動窗口的div稱為活動窗口 div?；顒?窗口 div要提供相應(yīng)的界面，用于用戶輸入聊天內(nèi)容，或顯示來自其它客戶 端的聊天內(nèi)容。本發(fā)明第一實施例實現(xiàn)活動窗口的切換。如圖2所示，左方為多個由標(biāo) 簽div模擬的tab組成的主界面，每個tab對應(yīng)一個div層。各個tab按照類 似圖1所示的主界面標(biāo)簽的排列方式，從上至下依次排列。根據(jù)用戶不同的 使用習(xí)慣，也可以采取其它的排列方式，例如從左至右依次排列。Tab分為 兩類， 一類是當(dāng)前正在顯示的標(biāo)簽，該標(biāo)簽的標(biāo)題和內(nèi)容都顯示在主界面上； 除第一類之外的其它tab都屬于第二類，即當(dāng)前不顯示的標(biāo)簽，這些標(biāo)簽僅 顯示出標(biāo)題，而內(nèi)容隱藏。圖2的右方為活動窗口，由多個活動窗口div重 疊構(gòu)成。每個活動窗口 div可以具有相同的大小，形狀和位置，并且每個活 動窗口 div對應(yīng)一個標(biāo)簽div。用戶用鼠標(biāo)點中主界面的標(biāo)簽div,則將該標(biāo) 簽div所對應(yīng)的活動窗口 div的顯示屬性設(shè)置為顯示，而其它活動窗口 div 的顯示屬性設(shè)置為隱藏。這樣，雖然活動窗口是由多個活動窗口 div重疊構(gòu) 成的，但只能看見其中顯示屬性為顯示的活動窗口 div從而實現(xiàn)了 tab頁的 切換。本實施例實現(xiàn)活動窗口切換的流程如圖3所示，包括如下步驟步驟301:對鼠標(biāo)動作進行檢測，若檢測到鼠標(biāo)左鍵點擊了主界面中的 某個tab,則執(zhí)行步驟302,否則仍然執(zhí)行步驟301;步驟302:確定被鼠標(biāo)左鍵點擊的tab對應(yīng)的標(biāo)簽div，將所述標(biāo)簽div 對應(yīng)的活動窗口 div的屬性設(shè)置為顯示，將其它活動窗口 div的屬性設(shè)置為 隱藏。本發(fā)明第二實施例實現(xiàn)tab頁的增加。由于每個tab對應(yīng) 一 個標(biāo)簽div ， 在圖2中左方的主界面中要增加一個tab,只需要使用javascript操作文檔對 象模型(DOM)元素，在原來的tab頁div容器中動態(tài)的增加一個div層即 可，同時再增加一個相應(yīng)的作為活動窗口的div層。本實施例實現(xiàn)tab頁的 增加的流程如圖4所示，包括如下步驟步驟401:對鼠標(biāo)動作進行檢測，若檢測到鼠標(biāo)右鍵點擊主界面的某個 tab,則執(zhí)行步驟402,否則仍然執(zhí)行步驟401。步驟402:顯示右鍵菜單，該右鍵菜單至少包括用于增加標(biāo)簽的選項， 若鼠標(biāo)動作選擇了該增加標(biāo)簽的選項，則執(zhí)行步驟403,否則退出本流程。步驟403:使用javascript操作DOM元素，增加一個標(biāo)簽div，并增加 一個相應(yīng)的作為活動窗口 div。步驟404:根據(jù)用戶的輸入，對新增的標(biāo)簽div進行命名。本發(fā)明第三實施例實現(xiàn)tab的顯示和上下翻頁。使用模型視圖控制器 (Model View Controller, MVC)技術(shù)，建立模型(model),每次tab增加 減少時，都是先增加模型中的tab，然后再通過顯示控制模塊將其畫出來。 MVC是為了獲得更好的系統(tǒng)結(jié)構(gòu)而推出的一種宏觀的設(shè)計模式,model代表 系統(tǒng)的模型層,視圖(view)是模型的展現(xiàn)層，控制器(controller)負(fù)責(zé)業(yè)務(wù) 的流轉(zhuǎn),使用MVC可以使得系統(tǒng)的層次清晰，降低各個部分的耦合。本實施例中模型是一個隊列，可以在其中增加和減少tab,為防止用戶 誤操作或濫用占用過多資源，可以限定tab的最大數(shù)目。當(dāng)然也可以對tab 的數(shù)目不做任何限制。如圖5所示，使用兩個指針視圖開始指針(View—start)和視圖結(jié)束 指針(View—end)來標(biāo)志模型中需要顯示的視圖(view)，即視圖中的元素。 這樣在翻頁的時候，只需要使得View—start和View—end指向所要顯示的標(biāo) 簽對應(yīng)的顯示內(nèi)容的開始和結(jié)束部分，即該主界面標(biāo)簽對應(yīng)的標(biāo)簽div的顯 示內(nèi)容部分，則視圖中就可以將該主界面標(biāo)簽的內(nèi)容部分顯示在該主界面標(biāo) 簽標(biāo)題的下方，而其它tab僅顯示出標(biāo)題，從而實現(xiàn)了 tab的翻頁效果。本發(fā)明第四實施例提出一種基于web頁的模擬IM客戶端界面的裝置， 其結(jié)構(gòu)框圖如圖6所示，包括鼠標(biāo)動作檢測模塊610，用于檢測鼠標(biāo)的點擊動作；主界面模擬模塊620，采用標(biāo)簽div模擬IM客戶端軟件的主界面標(biāo)簽， 各個標(biāo)簽div模擬的主界面標(biāo)簽從上至下依次排列；所述主界面標(biāo)簽也可以根據(jù)用戶的使用習(xí)慣按照其它方式排列，例如從左至右排列；并根據(jù)鼠標(biāo)動 作檢測模塊檢測到的鼠標(biāo)點擊動作，對所模擬的主界面標(biāo)簽進行相應(yīng)操作， 所述操作包括增加或刪除主界面標(biāo)簽，對主界面標(biāo)簽進行翻頁?；顒哟翱谀M模塊630,采用活動窗口 div模擬IM客戶端軟件的活動 窗口，各個活動窗口 div模擬的活動窗口層疊排列，多個活動窗口div層疊 排列，每個活動窗口 div對應(yīng)主界面模擬模塊的一個標(biāo)簽div;并根據(jù)鼠標(biāo) 動作檢測模塊檢測到的鼠標(biāo)點擊動作，對所模擬的活動窗口進行相應(yīng)操作， 所述操作包括顯示或隱藏所述活動窗口 。主界面模擬模塊620進一步包括切換單元621，用于當(dāng)所述鼠標(biāo)動作檢測模塊檢測到鼠標(biāo)左鍵點擊到所 模擬的某個主界面標(biāo)簽，則發(fā)出顯示與所述主界面標(biāo)簽對應(yīng)的活動窗口的指示；標(biāo)簽增減單元622，用于當(dāng)所述鼠標(biāo)動作檢測模塊檢測到鼠標(biāo)右鍵點擊 所模擬的某個主界面標(biāo)簽，并選擇增加或刪除標(biāo)簽的選項時，則增加或刪除 標(biāo)簽div;翻頁單元623，用于當(dāng)所述鼠標(biāo)動作檢測模塊檢測到鼠標(biāo)左鍵點擊到所 模擬的某個主界面標(biāo)簽，則將該主界面標(biāo)簽的全部內(nèi)容顯示出來，而僅顯示 其它主界面標(biāo)簽的標(biāo)題。翻頁單元623包括視圖開始指針和視圖結(jié)束指針，若要顯示某個主界面 標(biāo)簽的內(nèi)容，則將視圖開始指針和視圖結(jié)束指針分別指向所述被左鍵點中的 標(biāo)簽所對應(yīng)的標(biāo)簽div的內(nèi)容的開始和結(jié)束，則該標(biāo)簽div的內(nèi)容作為需要 顯示的部分，顯示在該主界面標(biāo)簽的標(biāo)題的下方?；顒哟翱谀M模塊630進一步包括活動窗口增減單元631，用于當(dāng)所述標(biāo)簽增減單元增加或刪除標(biāo)簽div 時，新建或刪除相應(yīng)的活動窗口 div;顯示單元632，當(dāng)接收到來自主界面模擬模塊的顯示活動窗口的指示， 將該指示對應(yīng)的活動窗口 div的屬性設(shè)置為顯示，將其它活動窗口 div的屬性設(shè)置為隱藏。本發(fā)明使用HTML和javascript技術(shù)，運用MVC的模式，使得基于web 模擬IM客戶端軟件的界面，與客戶端的體驗近乎一致，給予了用戶更好的 體驗。通過以上的實施方式的描述，本領(lǐng)域的技術(shù)人員可以清楚地了解到本發(fā) 明可借助軟件加必需的硬件平臺的方式來實現(xiàn)。基于這樣的理解，本發(fā)明的 技術(shù)方案對背景技術(shù)做出貢獻的全部或者部分可以以軟件產(chǎn)品的形式體現(xiàn) 出來，該計算機軟件產(chǎn)品可以存儲在存儲介質(zhì)中，如ROM/RAM、磁碟、光 盤等，包括若干指令用以使得一臺計算機設(shè)備(可以是個人計算機，服務(wù)器， 或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個實施例或者實施例的某些部分所述的方 法。以上所述僅為本發(fā)明的較佳實施例而已，并不用以限制本發(fā)明，凡在本 發(fā)明的精神和原則之內(nèi)所作的任何修改、等同替換和改進等，均應(yīng)包含在本 發(fā)明的保護范圍之內(nèi)。
權(quán)利要求
1、一種基于web頁的模擬IM客戶端界面的方法，其特征在于，用超文本標(biāo)記語言HTML的布局元素div模擬IM客戶端軟件的主界面的標(biāo)簽和活動窗口，稱用于模擬標(biāo)簽的div為標(biāo)簽div，稱用于模擬活動窗口的div為活動窗口div，各個標(biāo)簽div模擬的主界面標(biāo)簽從上至下或從左至右依次排列，各個活動窗口div模擬的活動窗口層疊排列，每個活動窗口div對應(yīng)一個標(biāo)簽div，并包括對鼠標(biāo)動作進行檢測，根據(jù)所檢測到的鼠標(biāo)動作，對所模擬的IM客戶端的主界面標(biāo)簽和/或活動窗口進行相應(yīng)操作。
2、 根據(jù)權(quán)利要求1所述的基于web頁的模擬IM客戶端界面的方法， 其特征在于，所述對鼠標(biāo)動作進行檢測為檢測到鼠標(biāo)左鍵點擊了主界面中 的標(biāo)簽；則所述所檢測到的鼠標(biāo)動作，對所模擬的IM客戶端的主界面標(biāo)簽 和/或活動窗口進行相應(yīng)#:作包括確定被鼠標(biāo)左鍵點擊的標(biāo)簽對應(yīng)的標(biāo)簽div,將所述標(biāo)簽div對應(yīng)的活 動窗口 div的屬性設(shè)置為顯示，將其它活動窗口 div的屬性設(shè)置為隱藏。
3、 根據(jù)權(quán)利要求2所述的基于web頁的模擬IM客戶端界面的方法， 其特征在于，所述所檢測到的鼠標(biāo)動作，對所模擬的IM客戶端的主界面標(biāo)簽和/或活 動窗口進行相應(yīng)操作進一步包括將視圖開始指針和視圖結(jié)束指針分別指向 所述被左鍵點中的標(biāo)簽所對應(yīng)的標(biāo)簽div的顯示內(nèi)容的開始和結(jié)束。
4、 根據(jù)權(quán)利要求1所述的基于web頁的模擬IM客戶端界面的方法， 其特征在于，所述對鼠標(biāo)動作進行檢測為檢測到鼠標(biāo)右鍵點擊主界面的標(biāo)簽； 則所述所檢測到的鼠標(biāo)動作，對所模擬的IM客戶端的主界面標(biāo)簽和/ 或活動窗口進行相應(yīng)操作包括顯示右鍵菜單，該右鍵菜單至少包括用于增加或刪除標(biāo)簽的選項，若鼠標(biāo)動作選擇了該增加或刪除標(biāo)簽的選項，則增加或刪除一個標(biāo)簽div，并增加或刪除一個相應(yīng)的活動窗口 div。
5、 一種基于web頁的模擬IM客戶端界面的裝置，其特征在于，包括 鼠標(biāo)動作檢測模塊，用于檢測鼠標(biāo)的點擊動作；主界面模擬模塊，采用標(biāo)簽div模擬IM客戶端軟件的主界面標(biāo)簽，各 個標(biāo)簽div模擬的主界面標(biāo)簽從上至下或從左至右依次排列；并根據(jù)鼠標(biāo)動 作檢測模塊檢測到的鼠標(biāo)點擊動作，對所模擬的主界面標(biāo)簽進行相應(yīng)操作；活動窗口模擬模塊，采用活動窗口 div模擬IM客戶端軟件的活動窗口 ， 各個活動窗口 div;f莫擬的活動窗口層疊排列，每個活動窗口 div對應(yīng)主界面 模擬模塊的一個標(biāo)簽div，并根據(jù)鼠標(biāo)動作檢測模塊檢測到的鼠標(biāo)點擊動作， 對所模擬的活動窗口進行相應(yīng)操作。
6、 根據(jù)權(quán)利要求5所述的基于web頁的模擬IM客戶端界面的裝置， 其特征在于，所述主界面模擬模塊進一步包括切換單元，用于當(dāng)所述鼠標(biāo)動作檢測模塊檢測到鼠標(biāo)左鍵點擊到所模擬 的某個主界面標(biāo)簽，則發(fā)出顯示與所述主界面標(biāo)簽對應(yīng)的活動窗口的指示； 所述活動窗口模擬模塊進一步包括顯示單元，當(dāng)接收到來自主界面模擬模塊的顯示活動窗口的指示，將該 指示對應(yīng)的活動窗口 div的屬性設(shè)置為顯示，將其它活動窗口 div的屬性設(shè) 置為隱藏。
7、 根據(jù)權(quán)利要求6所述的基于web頁的模擬IM客戶端界面的裝置， 其特征在于，所述主界面模擬模塊進一步包括翻頁單元，用于當(dāng)所述鼠標(biāo)動作檢測模塊檢測到鼠標(biāo)左鍵點擊到所模擬 的某個主界面標(biāo)簽，則將該主界面標(biāo)簽的全部內(nèi)容顯示出來，而僅顯示其它 主界面標(biāo)簽的標(biāo)題。
8、 根據(jù)權(quán)利要求7所述的基于web頁的模擬IM客戶端界面的裝置， 其特征在于，所述翻頁單元包括視圖開始指針和視圖結(jié)束指針，若要顯示某個主界面標(biāo)簽的內(nèi)容，則將視圖開始指針和視圖結(jié)束指針分別指向所述被左鍵點中的標(biāo)簽所對應(yīng)的標(biāo)簽div的內(nèi)容的開始和結(jié)束，則該標(biāo)簽div的內(nèi)容 作為需要顯示的部分，顯示在該主界面標(biāo)簽的標(biāo)題的下方。
9、根據(jù)權(quán)利要求5所述的基于web頁的模擬IM客戶端界面的裝置， 其特征在于，所述主界面模擬模塊進一步包括標(biāo)簽增減單元，用于當(dāng)所述鼠標(biāo)動作檢測模塊檢測到鼠標(biāo)右鍵點擊所模 擬的某個主界面標(biāo)簽，并選擇增加或刪除標(biāo)簽的選項時，則增加或刪除標(biāo)簽 div;所述活動窗口模擬模塊進一步包括活動窗口增減單元，用于當(dāng)所述標(biāo)簽增減單元增加或刪除標(biāo)簽div時， 新建或刪除相應(yīng)的活動窗口 div。
全文摘要
本發(fā)明公開了一種基于網(wǎng)絡(luò)(web)頁的模擬即時通訊(IM)客戶端界面的方法，用超文本標(biāo)記語言(HTML)的布局元素(div)模擬IM客戶端軟件的主界面的標(biāo)簽和活動窗口，稱用于模擬標(biāo)簽的div為標(biāo)簽div，稱用于模擬活動窗口的div為活動窗口div各個標(biāo)簽div模擬的主界面標(biāo)簽從上至下或從左至右依次排列，各個活動窗口div模擬的活動窗口層疊排列，每個活動窗口div對應(yīng)一個標(biāo)簽div，并包括對鼠標(biāo)動作進行檢測，根據(jù)所檢測到的鼠標(biāo)動作，對所模擬的IM客戶端的主界面標(biāo)簽和/或活動窗口進行相應(yīng)操作。本發(fā)明還公開了一種基于web頁模擬IM客戶端界面的裝置。本發(fā)明方案使得基于web模擬IM客戶端軟件的界面，與客戶端的體驗近乎一致，給予了用戶更好的體驗。
文檔編號G06F17/30GK101236558SQ20081000639
公開日2008年8月6日 申請日期2008年2月29日 優(yōu)先權(quán)日2008年2月29日
發(fā)明者林 周, 杜嘉輝 申請人:騰訊科技(深圳)有限公司