CN101236558A - 一种基于web页的模拟IM客户端界面的方法和装置 - Google Patents

Abstract

本发明公开了一种基于网络(web)页的模拟即时通讯(IM)客户端界面的方法，用超文本标记语言(HTML)的布局元素(div)模拟IM客户端软件的主界面的标签和活动窗口，称用于模拟标签的div为标签div，称用于模拟活动窗口的div为活动窗口div各个标签div模拟的主界面标签从上至下或从左至右依次排列，各个活动窗口div模拟的活动窗口层叠排列，每个活动窗口div对应一个标签div，并包括：对鼠标动作进行检测，根据所检测到的鼠标动作，对所模拟的IM客户端的主界面标签和/或活动窗口进行相应操作。本发明还公开了一种基于web页模拟IM客户端界面的装置。本发明方案使得基于web模拟IM客户端软件的界面，与客户端的体验近乎一致，给予了用户更好的体验。

Description

一种基于web页的模拟IM客户端界面的方法和装置

技术领域

本发明涉及计算机技术领域，特别涉及一种基于网络(web)页模拟即时通讯(IM)客户端界面的方法和装置。

背景技术

网络即时通讯工具发展到今天，已经被大多数的用户所接受，成为用户必不可少的软件工具，不但在平时的休闲娱乐中，而且在用户的工作中得到广泛的使用。因此用户对IM软件的易用性，稳定性，安全性等方面提出了较高的要求。

但是在某些场合下，用户需要IM的便利性，但是却不能或者不方便安装IM软件，此时，通过web页面访问进行IM聊天，提供了一种有效的解决方案，使得用户不用安装IM软件就可以享受IM的便利性。

在使用web页面进行聊天的时候，用户必然需要先熟悉如何使用web页面聊天工具。客户端IM软件经过不断的发展，虽然也在不断的更新换代，但基本的使用习惯和操作风格一直保持着相对固定的模式。如果基于web的聊天工具与用户平日使用的客户端IM软件在使用习惯和操作风格上相差比较大的话，用户熟悉和掌握该web聊天工具就需要较长的时间，给用户带来了不便。

发明内容

有鉴于此，本发明实施例提出一种基于web页的模拟IM客户端界面的方法和装置，可以提供在使用习惯和操作风格上于客户端IM软件类似的web页面聊天工具。

本发明实施例提出的基于web页的模拟IM客户端界面的方法，用超文本标记语言HTML的布局元素div模拟IM客户端软件的主界面的标签和活动窗口，称用于模拟标签的div为标签div，称用于模拟活动窗口的div为活动窗口div，各个标签div模拟的主界面标签从上至下或从左至右依次排列，各个活动窗口div模拟的活动窗口层叠排列，每个活动窗口div对应一个标签div，并包括：

对鼠标动作进行检测，根据所检测到的鼠标动作，对所模拟的IM客户端的主界面标签和/或活动窗口进行相应操作。

本发明实施例提出的基于web页的模拟IM客户端界面的装置，包括：

鼠标动作检测模块，用于检测鼠标的点击动作；

主界面模拟模块，采用标签div模拟IM客户端软件的主界面标签，各个标签div模拟的主界面标签从上至下或从左至右依次排列；并根据鼠标动作检测模块检测到的鼠标点击动作，对所模拟的主界面标签进行相应操作；

活动窗口模拟模块，采用活动窗口div模拟IM客户端软件的活动窗口，各个活动窗口div模拟的活动窗口层叠排列，每个活动窗口div对应主界面模拟模块的一个标签div，并根据鼠标动作检测模块检测到的鼠标点击动作，对所模拟的活动窗口进行相应操作。

从以上技术方案可以看出，本发明技术方案使得基于web模拟IM客户端软件的界面，与客户端的体验近乎一致，给予了用户更好的体验。

附图说明

图1为现有技术的IM客户端软件界面的示意图；

图2为本发明实施例实现的基于web的界面示意图；

图3为本发明第一实施例实现活动窗口切换的流程图；

图4为本发明第二实施例实现新增标签的流程图；

图5为本发明第三实施例实现标签翻页的示意图；

图6为本发明第四实施例的基于web页的模拟IM客户端界面的装置框图。

具体实施方式

在对本发明实施例方案进行介绍之前，首先对常见的IM客户端软件的界面进行介绍。如图1所示为常用IM客户端软件的界面，主要包括主界面和活动窗口两部分。其中主界面是IM客户端软件的主要的显示界面，由一个或多个标签(tab)组成，用户操作鼠标点击某个标签，则该标签对应的内容显示出来，而其它标签的内容隐藏，仅显示标签的标题。如图1所示的状态就是显示tab3对应的内容，而隐藏了其它tab的内容。每个tab对应聊天对象一个分类，例如，标签“好友”、“家人”、“群组”、“黑名单”分别对应内容就是相应分类的联系人的名单。用户点击当前显示的tab对应的内容中的某个联系人(该联系人通常用图标和文字的形式表示)，则弹出用于与该联系人聊天的活动窗口，用户在该活动窗口可以输入聊天信息并将该聊天信息发送给该联系人，并且也可以通过该活动窗口看到来自该联系人的聊天信息。用户还可以自定义新的标签，以便对联系人进行更细致的分类。图1所示的主界面和活动窗口的位置仅是一个示例，它们都可以显示在客户端显示界面的任何位置上。

目前的IM客户端软件除了提供基本的聊天功能之外，还包括传输文件、进行音乐广播、推送广告等等其它功能，这些功能也是基于图1所示的界面上实现的。

本发明实施例为了能够基于web实现与图1所示类似的界面，主要采用超文本标记语言(Hypertext Marker Language，HTML)和浏览器脚本(javascript)技术，使用HTML的布局(div)元素来模拟主界面的标签和活动窗口。

Div元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。Div的起始标志<div>和结束标志</div>之间的所有内容用来构成对应的主界面标签，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。为便于描述，以下将用于模拟标签的div称为标签div，将模拟活动窗口的div称为活动窗口div。活动窗口div要提供相应的界面，用于用户输入聊天内容，或显示来自其它客户端的聊天内容。

本发明第一实施例实现活动窗口的切换。如图2所示，左方为多个由标签div模拟的tab组成的主界面，每个tab对应一个div层。各个tab按照类似图1所示的主界面标签的排列方式，从上至下依次排列。根据用户不同的使用习惯，也可以采取其它的排列方式，例如从左至右依次排列。Tab分为两类，一类是当前正在显示的标签，该标签的标题和内容都显示在主界面上；除第一类之外的其它tab都属于第二类，即当前不显示的标签，这些标签仅显示出标题，而内容隐藏。图2的右方为活动窗口，由多个活动窗口div重叠构成。每个活动窗口div可以具有相同的大小，形状和位置，并且每个活动窗口div对应一个标签div。用户用鼠标点中主界面的标签div，则将该标签div所对应的活动窗口div的显示属性设置为显示，而其它活动窗口div的显示属性设置为隐藏。这样，虽然活动窗口是由多个活动窗口div重叠构成的，但只能看见其中显示属性为显示的活动窗口div从而实现了tab页的切换。本实施例实现活动窗口切换的流程如图3所示，包括如下步骤：

步骤301：对鼠标动作进行检测，若检测到鼠标左键点击了主界面中的某个tab，则执行步骤302，否则仍然执行步骤301；

步骤302：确定被鼠标左键点击的tab对应的标签div，将所述标签div对应的活动窗口div的属性设置为显示，将其它活动窗口div的属性设置为隐藏。

本发明第二实施例实现tab页的增加。由于每个tab对应一个标签div，在图2中左方的主界面中要增加一个tab，只需要使用javascript操作文档对象模型(DOM)元素，在原来的tab页div容器中动态的增加一个div层即可，同时再增加一个相应的作为活动窗口的div层。本实施例实现tab页的增加的流程如图4所示，包括如下步骤：

步骤401：对鼠标动作进行检测，若检测到鼠标右键点击主界面的某个tab，则执行步骤402，否则仍然执行步骤401。

步骤402：显示右键菜单，该右键菜单至少包括用于增加标签的选项，若鼠标动作选择了该增加标签的选项，则执行步骤403，否则退出本流程。

步骤403：使用javascript操作DOM元素，增加一个标签div，并增加一个相应的作为活动窗口div。

步骤404：根据用户的输入，对新增的标签div进行命名。

本发明第三实施例实现tab的显示和上下翻页。使用模型视图控制器(Model View Controller，MVC)技术，建立模型(model)，每次tab增加减少时，都是先增加模型中的tab，然后再通过显示控制模块将其画出来。MVC是为了获得更好的系统结构而推出的一种宏观的设计模式，model代表系统的模型层，视图(view)是模型的展现层，控制器(controller)负责业务的流转，使用MVC可以使得系统的层次清晰，降低各个部分的耦合。

本实施例中模型是一个队列，可以在其中增加和减少tab，为防止用户误操作或滥用占用过多资源，可以限定tab的最大数目。当然也可以对tab的数目不做任何限制。

如图5所示，使用两个指针：视图开始指针(View_start)和视图结束指针(View_end)来标志模型中需要显示的视图(view)，即视图中的元素。这样在翻页的时候，只需要使得View_start和View_end指向所要显示的标签对应的显示内容的开始和结束部分，即该主界面标签对应的标签div的显示内容部分，则视图中就可以将该主界面标签的内容部分显示在该主界面标签标题的下方，而其它tab仅显示出标题，从而实现了tab的翻页效果。

本发明第四实施例提出一种基于web页的模拟IM客户端界面的装置，其结构框图如图6所示，包括：

鼠标动作检测模块610，用于检测鼠标的点击动作；

主界面模拟模块620，采用标签div模拟IM客户端软件的主界面标签，各个标签div模拟的主界面标签从上至下依次排列；所述主界面标签也可以根据用户的使用习惯按照其它方式排列，例如从左至右排列；并根据鼠标动作检测模块检测到的鼠标点击动作，对所模拟的主界面标签进行相应操作，所述操作包括增加或删除主界面标签，对主界面标签进行翻页。

活动窗口模拟模块630，采用活动窗口div模拟IM客户端软件的活动窗口，各个活动窗口div模拟的活动窗口层叠排列，多个活动窗口div层叠排列，每个活动窗口div对应主界面模拟模块的一个标签div；并根据鼠标动作检测模块检测到的鼠标点击动作，对所模拟的活动窗口进行相应操作，所述操作包括显示或隐藏所述活动窗口。

主界面模拟模块620进一步包括：

切换单元621，用于当所述鼠标动作检测模块检测到鼠标左键点击到所模拟的某个主界面标签，则发出显示与所述主界面标签对应的活动窗口的指示；

标签增减单元622，用于当所述鼠标动作检测模块检测到鼠标右键点击所模拟的某个主界面标签，并选择增加或删除标签的选项时，则增加或删除标签div；

翻页单元623，用于当所述鼠标动作检测模块检测到鼠标左键点击到所模拟的某个主界面标签，则将该主界面标签的全部内容显示出来，而仅显示其它主界面标签的标题。

翻页单元623包括视图开始指针和视图结束指针，若要显示某个主界面标签的内容，则将视图开始指针和视图结束指针分别指向所述被左键点中的标签所对应的标签div的内容的开始和结束，则该标签div的内容作为需要显示的部分，显示在该主界面标签的标题的下方。

活动窗口模拟模块630进一步包括：

活动窗口增减单元631，用于当所述标签增减单元增加或删除标签div时，新建或删除相应的活动窗口div；

显示单元632，当接收到来自主界面模拟模块的显示活动窗口的指示，将该指示对应的活动窗口div的属性设置为显示，将其它活动窗口div的属性设置为隐藏。

本发明使用HTML和javascript技术，运用MVC的模式，使得基于web模拟IM客户端软件的界面，与客户端的体验近乎一致，给予了用户更好的体验。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本发明可借助软件加必需的硬件平台的方式来实现。基于这样的理解，本发明的技术方案对背景技术做出贡献的全部或者部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (9)

1、一种基于web页的模拟IM客户端界面的方法，其特征在于，用超文本标记语言HTML的布局元素div模拟IM客户端软件的主界面的标签和活动窗口，称用于模拟标签的div为标签div，称用于模拟活动窗口的div为活动窗口div，各个标签div模拟的主界面标签从上至下或从左至右依次排列，各个活动窗口div模拟的活动窗口层叠排列，每个活动窗口div对应一个标签div，并包括：

对鼠标动作进行检测，根据所检测到的鼠标动作，对所模拟的IM客户端的主界面标签和/或活动窗口进行相应操作。

2、根据权利要求1所述的基于web页的模拟IM客户端界面的方法，其特征在于，所述对鼠标动作进行检测为：检测到鼠标左键点击了主界面中的标签；则所述所检测到的鼠标动作，对所模拟的IM客户端的主界面标签和/或活动窗口进行相应操作包括：

确定被鼠标左键点击的标签对应的标签div，将所述标签div对应的活动窗口div的属性设置为显示，将其它活动窗口div的属性设置为隐藏。

3、根据权利要求2所述的基于web页的模拟IM客户端界面的方法，其特征在于，

所述所检测到的鼠标动作，对所模拟的IM客户端的主界面标签和/或活动窗口进行相应操作进一步包括：将视图开始指针和视图结束指针分别指向所述被左键点中的标签所对应的标签div的显示内容的开始和结束。

4、根据权利要求1所述的基于web页的模拟IM客户端界面的方法，其特征在于，

所述对鼠标动作进行检测为：检测到鼠标右键点击主界面的标签；

则所述所检测到的鼠标动作，对所模拟的IM客户端的主界面标签和/或活动窗口进行相应操作包括：

显示右键菜单，该右键菜单至少包括用于增加或删除标签的选项，若鼠标动作选择了该增加或删除标签的选项，则增加或删除一个标签div，并增加或删除一个相应的活动窗口div。

5、一种基于web页的模拟IM客户端界面的装置，其特征在于，包括：

鼠标动作检测模块，用于检测鼠标的点击动作；

主界面模拟模块，采用标签div模拟IM客户端软件的主界面标签，各个标签div模拟的主界面标签从上至下或从左至右依次排列；并根据鼠标动作检测模块检测到的鼠标点击动作，对所模拟的主界面标签进行相应操作；

活动窗口模拟模块，采用活动窗口div模拟IM客户端软件的活动窗口，各个活动窗口div模拟的活动窗口层叠排列，每个活动窗口div对应主界面模拟模块的一个标签div，并根据鼠标动作检测模块检测到的鼠标点击动作，对所模拟的活动窗口进行相应操作。

6、根据权利要求5所述的基于web页的模拟IM客户端界面的装置，其特征在于，所述主界面模拟模块进一步包括：

切换单元，用于当所述鼠标动作检测模块检测到鼠标左键点击到所模拟的某个主界面标签，则发出显示与所述主界面标签对应的活动窗口的指示；

所述活动窗口模拟模块进一步包括：

显示单元，当接收到来自主界面模拟模块的显示活动窗口的指示，将该指示对应的活动窗口div的属性设置为显示，将其它活动窗口div的属性设置为隐藏。

7、根据权利要求6所述的基于web页的模拟IM客户端界面的装置，其特征在于，所述主界面模拟模块进一步包括：

翻页单元，用于当所述鼠标动作检测模块检测到鼠标左键点击到所模拟的某个主界面标签，则将该主界面标签的全部内容显示出来，而仅显示其它主界面标签的标题。

8、根据权利要求7所述的基于web页的模拟IM客户端界面的装置，其特征在于，所述翻页单元包括视图开始指针和视图结束指针，若要显示某个主界面标签的内容，则将视图开始指针和视图结束指针分别指向所述被左键点中的标签所对应的标签div的内容的开始和结束，则该标签div的内容作为需要显示的部分，显示在该主界面标签的标题的下方。

9、根据权利要求5所述的基于web页的模拟IM客户端界面的装置，其特征在于，所述主界面模拟模块进一步包括：

标签增减单元，用于当所述鼠标动作检测模块检测到鼠标右键点击所模拟的某个主界面标签，并选择增加或删除标签的选项时，则增加或删除标签div；

所述活动窗口模拟模块进一步包括：

活动窗口增减单元，用于当所述标签增减单元增加或删除标签div时，新建或删除相应的活动窗口div。

Images