CN101196925A

CN101196925A - 一种在web载体上展示页签的方法

Info

Publication number: CN101196925A
Application number: CNA2007103063784A
Authority: CN
Inventors: 岳上; 彭晓虹
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2007-12-28
Filing date: 2007-12-28
Publication date: 2008-06-11
Anticipated expiration: 2027-12-28
Also published as: CN100565531C

Abstract

本发明公开了一种在web载体上展示页签的方法，该方法包括：检测到web载体的大小被调整，获取调整后web载体的大小；根据web载体的大小以及预先设置的页签大小的最小值和最大值，确定页签在web载体上的排列方式和大小，并按照所确定的排列方式和大小展示页签。根据本发明公开的方法，用户可以按照自己的喜好，通过调整web载体的大小来调整页签在web载体上的展示方式，同时也可以添加自己喜欢的页签，删除自己不感兴趣的页签，使得在有限的web载体范围内展示更多的页签，从而，提高用户的交互体验，给用户更好的使用感受，满足了用户个性化的需求。

Description

一种在web载体上展示页签的方法

技术领域

本发明涉及互联网网站(web)应用技术，特别是指一种在web载体上展示页签的方法。

背景技术

互联网业务发展到今天，web已经成为人们日常生活中不可缺少的一部分。人们通过各种各样、形形色色的web站点，浏览新闻、收发邮件、结交朋友等。

目前的web网站在web页面中采用固定的排版方式、固定的布局来展示固定的内容，用户需要通过拖动上下、左右滚动条来查找自己关心的内容。也就是说，目前的web网站对所有的用户都是以相同排版、相同布局来展示相同内容。

根据目前的web页面展示方式，用户不能按照自己的喜好来排布页面布局和内容，这已明显不能满足用户日益增高的个性化需求。

发明内容

有鉴于此，本发明的主要目的在于提供一种在web载体上展示页签的方法，能够通过调整web载体的大小来有效地调整页签的展示方式。

为了达到上述目的，本发明提供一种在web载体上展示页签的方法，该方法包括：

检测到web载体的大小被调整，获取调整后web载体的大小；

根据web载体的大小以及预先设置的页签大小的最小值和最大值，确定页签在web载体上的排列方式和大小，并按照所确定的排列方式和大小展示页签。

所述检测到web载体的大小被调整为：检测到web载体的宽度被调整；

所述获取调整后web载体的大小为：获取调整后web载体的宽度；

所述根据web载体的大小以及预先设置的页签的大小的最小值和最大值，确定页签在web载体上的排列方式和大小为：根据web载体的宽度以及预先设置的页签宽度的最小值和最大值，确定在web载体中展示页签的行数以及在各行中展示页签的个数和各行页签的宽度；

所述按照所确定的排列方式和大小展示页签为：根据展示页签的行数、在各行中展示页签的个数以及各行页签的宽度，调整各页签在web载体上的位置和大小，并按照调整后的位置和大小在web载体上展示页签。

所述确定在web载体中展示页签的行数以及在各行中展示页签的个数和各行页签的宽度的步骤包括：

步骤a，设置一行最多能展示的页签个数的初始值为N；

步骤b，计算在一行中展示N个页签宽度为所述预先设置的页签宽度的最小值的页签所需的web载体的宽度的最小值，计算在一行中展示N个页签宽度为所述预先设置的页签宽度的最大值的页签所需的web载体的宽度的最大值；

步骤c，判断调整后web载体宽度是否大于所述web载体宽度的最小值且小于所述web载体宽度的最大值，如果是，则执行步骤d；否则，调整N值，返回步骤b；

步骤d，将当前得到的N值确定为一行最多能展示的页签个数；

步骤e，根据web载体上的页签总数目和所确定的一行最多能展示的页签个数确定在web载体中展示页签的行数和在各行中展示页签的个数，根据所述调整后web载体的宽度和在各行中展示页签的个数确定各行页签的宽度。

所述根据web载体上的页签总数目和所确定的一行最多能展示的页签个数确定在web载体中展示页签的行数和在各行中展示页签的个数为：判断用所确定的一行最多能展示的页签个数能否整除在web载体上的页签总数目，如果能，则在web载体中展示页签的行数为页签总数目除以所确定的一行最多能展示的页签个数得到的商值，在各行中展示页签的个数为所确定的一行最多能展示的页签个数；如果不能，则在web载体中展示页签的行数为页签总数目除以所确定的一行最多能展示的页签个数得到的商再加一得到的值，除了在其中一行展示页签的个数为页签总数目除以所确定的一行最多能展示的页签个数得到的余数值之外，在其它行中展示页签的个数为所确定的一行最多能展示的页签个数。

所述根据所述调整后web载体的宽度和在各行中展示页签的个数确定各行页签的宽度为：从web载体的宽度中减去不用于展示页签的空白宽度所得到的值再除以在各行中展示页签的个数所得到的值为各行页签的宽度。

所述检测到web载体的大小被调整为：通过基本事件处理以及文档对象模型DOM的高级事件处理检测到web载体的大小被调整的事件；

所述获取调整后web载体的大小为：通过层叠样式表CSS和浏览器对象属性来获取web载体的大小。

所述调整各页签在web载体上的位置和大小为：通过程序内部建立的页签map表，以Javascript语句改变页签的层叠样式表CSS元素以及浏览器对象属性的方式，调整页签在web载体上的位置和大小。

当通过帐号登录该web载体时，该方法进一步包括：与该帐号对应地保存页签在web载体上的排列方式和大小。

当通过帐号登录该web载体时，该方法进一步包括：判断是否保存有与该帐号对应的页签在web载体上的排列方式和大小，如果有，则按照与该帐号对应的页签在web载体上的排列方式和大小展示页签。

所述web载体为即时通讯IM客户端面板或者用于展示web网站的浏览器。

根据本发明提供的在web载体上展示页签的方法，当检测到web载体的大小被调整时，根据调整后web载体的大小和预先设置的页签大小的最小值和最大值调整页签在web载体上的展示方式，并按照调整后的排列方式和大小展示页签。因此，用户可以按照自己的喜好，通过调整web载体的大小来调整页签在web载体上的展示方式，同时也可以添加自己喜欢的页签，删除自己不感兴趣的页签，使得在有限的web载体范围内展示更多的页签，从而，提高用户的交互体验，给用户更好的使用感受，满足了用户个性化的需求。而且，用户调整后的页签展示方式还可以与该用户的帐号对应起来保存，这样当用户通过自己的帐号登录web载体时，web载体按照与该帐号对应的页签展示信息展示页签，方便地记录了用户使用习惯，以及为用户提供更加个性化的服务。

附图说明

图1所示为本发明中通过调整web载体宽度来调整页签的宽度和排列方式的流程图；

图2所示为本发明中确定页签在web载体上的排列方式和宽度的实现框图；

图3所示为本发明中为通过帐号登录IM客户端的用户展示页签的方法示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下面举具体实施例，对本发明作进一步详细的说明。

本发明提供通过调整web载体的大小来调整页签展示方式的方法，具体为，当检测到web载体的宽度被调整时，获取调整后web载体的大小，根据web载体的大小以及预先设置的页签大小的最小值和最大值确定页签在web载体上的排列方式和大小，并按照所确定的排列方式和大小展示页签。其中，web载体是用于展示页签的面板，可以是IM客户端面板，也可以是用于展示web网站的浏览器等。页签是web载体中一块块的展示区域。

调整web载体大小的形式包括调整web载体宽度或调整web载体高度等多种形式。

下面介绍通过调整web载体的宽度来调整页签的展示方式的方法。在该方法中，需要预先设置页签宽度的最大值和最小值。这样，当调整web载体的宽度时，保证页签宽度在该最小值和最大值之间，从而提高用户的使用感受度。

图1所示为通过调整web载体宽度来调整页签的宽度和排列方式的流程图。假设预先设置的页签宽度的最大值为Vmax，最小值为Vmin。如图1所示，该流程包括以下步骤：

步骤101：检测到web载体的宽度被调整。

在此，通过基本事件处理以及DOM(文档对象模型)的高级事件处理检测web载体的宽度被调整的事件。

步骤102：获取调整后web载体的宽度，记为W。

在此，通过CSS(层叠样式表)和浏览器对象属性来获取web载体的宽度。

步骤103：根据web载体的宽度以及预先设置的页签宽度的最小值Vmin和最大值Vmax，确定页签在web载体上的排列方式和宽度。

在此，页签在web载体上的排列方式可以用在web载体中展示页签的行数和各行中展示页签的个数表示。展示页签的行数、各行展示页签的个数以及各页签宽度的确定方法如图2所示，后续详细描述。

步骤104：按照所确定的排列方式和大小展示页签。具体为，根据展示页签的行数、各行展示页签的个数以及各页签宽度来调整各页签在web载体上的位置和大小，并按照调整后的位置关系和大小在web载体上展示页签。

在本步骤中，通过程序内部建立的页签map表，以Javascript语句改变页签的CSS(层叠样式表)元素以及浏览器对象属性的方式，调整页签在web载体中的位置和大小。

在此，可以对本步骤得到的调整后的各页签在web载体上的位置关系和大小进行保存，这样当用户下一次进入该web载体时，可以按照所保存的页签位置关系和大小在web载体上展示页签，从而能够记录用户使用习惯，满足用户的使用需求。

图2所示为步骤103中确定页签在web载体上的排列方式和宽度的实现框图，通过以下步骤实现：

步骤201：设置一行最多能展示的页签个数的初始值，用N表示。在此，设N＝1。

在本步骤中，N的初始值也可以设置为其它值。

步骤202：计算在一行中展示N个页签宽度为Vmin的页签所需的web载体的宽度的最小值，用Wmin表示，同时计算在一行中展示N个页签宽度为Vmax的页签所需的web载体的宽度的最大值，用Wmax表示。

在此，可以通过以下式(1)和(2)计算Wmin和Wmax：

Wmin＝Vmin×N+(N-1)×Δ+σ (1)

Wmax＝Vmin×N+(N-1)×Δ+σ (2)

其中，Δ为页签和页签之间的空白宽度，σ为页签和web载体的边框之间的空白宽度之和。Δ和σ可以为零。

步骤203：判断图1所示步骤102中所获取的调整后web载体的宽度W是否大于Wmin且是否小于Wmax，如果是，则执行步骤205；否则，执行步骤204。

步骤204：调整N的值，返回步骤202。在此，将N的值加1。

在本步骤中，可以采用其它方式调整N的值。

步骤205：将一行最多能展示的页签个数确定为当前得到的N。

例如，通过上述202～204步骤的循环过程，当N＝3时调整后web载体的宽度W满足Wmin＜W＜Wmax的条件，则可以将一行最多能展示的页签个数确定为3个。

步骤206：获取web载体上的页签总数目为Ptotal，判断用一行最多能展示的页签个数N能否整除页签总数目Ptotal，如果能整除，则执行步骤207，如果不能整除，则执行步骤208。

步骤207：将在web载体中展示页签的行数LINE确定为Ptotal除以N所得到的商值M，如式(3)所示，各行展示页签的个数为N，各页签宽度均为V，如下式(4)所示。

M＝Ptotal/N (3)

V＝(W-(N-1)×Δ-σ)/N (4)

步骤208：将在web载体中展示页签的函数LINE确定为Ptotal除以N所得到的商值M加1，LINE行中的M行展示页签的个数为N，各页签宽度均为V，如式(4)所示，而LINE行中的一行展示页签的个数为Ptotal除以N所得到的余数ODD，各页签宽度为V’，如下式(5)所示。

V’＝(W-(ODD-1)×Δ-σ)/N (5)

其中，M和ODD满足如下式(6)。

M×N+ODD＝Ptotal (6)

本步骤中，较佳地将一行展示个数为ODD的行排在该web载体中的最后一行，并居中展示该行中的页签。

以上图1和图2所示流程给出的是通过调整web载体的宽度来调整页签宽度及其调整行方向上的排列方式的情况，相应地，也可以通过调整web载体的高度来调整页签高度及其调整列方向上的排列方式。但是，在调整web载体的高度时，也可以不对页签高度和列方向上的排列方式进行调整，而是例如对web载体的高度进行缩小时，可以在web载体中产生高度方向上的滚动条，通过滚动条来查看页签。

下面以即时通讯(IM)客户端为web载体展示页签的方法为例，给出为通过帐号登录IM客户端的用户展示页签的方法，如图3所示，包括以下步骤：

步骤301：用户通过帐号和密码登录到IM客户端。

本步骤中，用户在IM客户端中输入帐号和密码，这时，IM客户端向IM服务器发送验证帐号与密码有效性的请求，如果IM服务器验证有效，则该用户成功登录IM客户端。

步骤302：用户切换到用于展示页签的面板。

IM客户端中包括多个面板，在各面板中展示不同的内容。

步骤303：IM客户端判断是否保存有与该帐号对应的页签展示信息，如果有，则按照与该帐号对应的页签展示信息，在该面板上展示页签，如果没有，则按照缺省方式展示页签。

其中，页签展示信息为页签在面板上的排列方式和大小。

页签展示信息可以保存在IM客户端本地设备。例如，用户使用个人计算机登录该IM客户端时，将登录该IM客户端的帐号对应的页签展示信息保存到该个人计算机中，这样当用户登录IM客户端时，IM客户端从该个人计算机中调用所保存的该帐号对应的页签展示信息，并按照该页签展示信息在面板上展示页签。或者，页签展示信息可以保存在IM服务器端。这时，用户不管使用哪一台计算机登录IM客户端，IM客户端都能从IM服务器侧提取与该帐号对应的页签展示信息，并按照该页签展示信息在面板上展示页签。

IM客户端判断是否保存有与该帐号对应的页签展示信息为：判断IM客户端本地设备中是否保存有与该帐号对应的页签展示信息，或者判断IM服务器中是否保存有与该帐号对应的页签展示信息。

步骤304：面板上所展示的页签根据帐号和IM客户端提供的密钥进行认证，认证成功后，显示与该帐号相关的信息。

在本步骤中，面板上所展示的所有页签都可以进行所述的页签认证，或者，只有部分页签进行所述页签认证。但是，所有页签都不进行所述页签认证也可以显示相关信息。

步骤305：通过调整面板大小来调整页签的排列方式和大小。

本步骤通过图1和图2所示的方法实现，在此省略其描述。

步骤306：IM客户端将调整之后的页签排列方式和大小作为页签展示信息与帐号对应起来保存。

在此，IM客户端可以在用户退出IM客户端时，自动保存该用户退出IM客户端时面板上的页签展示信息，或者，也可以每当用户改变页签排列方式和大小时实时保存。

通过以上流程，IM客户端保存了页签展示信息，当用户再次登录IM客户端时，如步骤303所述按照所保存的页签展示信息来展示页签，这样IM客户端可以按照用户的使用习惯来给用户展示页签。

通过本发明提供的在web载体上展示页签的方法，用户可以在web载体上对自己所关注的页签进行个性化管理，即用户可以按照自己的兴趣爱好对页签进行例如添加或删除页签、改变页签大小或排列方式等操作，用户通过这种操作能够在一定大小的web载体上看到更多的页签和相应的内容，因此拥有更好的交互体验，也给用户更好的使用感受，满足了用户个性化需求。而且，通过保存所述对页签的操作，当用户再次登录web载体时，为用户展示用户个性化管理之后的页签，从而满足了用户的使用需求。

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

Claims

1.一种在web载体上展示页签的方法，其特征在于，该方法包括：

检测到web载体的大小被调整，获取调整后web载体的大小；

2.根据权利要求1所述的方法，其特征在于，

3.根据权利要求2所述的方法，其特征在于，所述确定在web载体中展示页签的行数以及在各行中展示页签的个数和各行页签的宽度包括：

步骤a，设置一行最多能展示的页签个数的初始值为N；

4.根据权利要求3所述的方法，其特征在于，所述根据web载体上的页签总数目和所确定的一行最多能展示的页签个数确定在web载体中展示页签的行数和在各行中展示页签的个数为：判断用所确定的一行最多能展示的页签个数能否整除在web载体上的页签总数目，如果能，则在web载体中展示页签的行数为页签总数目除以所确定的一行最多能展示的页签个数得到的商值，在各行中展示页签的个数为所确定的一行最多能展示的页签个数；如果不能，则在web载体中展示页签的行数为页签总数目除以所确定的一行最多能展示的页签个数得到的商再加一得到的值，除了在其中一行展示页签的个数为页签总数目除以所确定的一行最多能展示的页签个数得到的余数值之外，在其它行中展示页签的个数为所确定的一行最多能展示的页签个数。

5.根据权利要求3所述的方法，其特征在于，所述根据所述调整后web载体的宽度和在各行中展示页签的个数确定各行页签的宽度为：从web载体的宽度中减去不用于展示页签的空白宽度所得到的值再除以在各行中展示页签的个数所得到的值为各行页签的宽度。

6.根据权利要求1所述的方法，其特征在于，

7.根据权利要求2所述的方法，其特征在于，所述调整各页签在web载体上的位置和大小为：通过程序内部建立的页签map表，以Javascript语句改变页签的层叠样式表CSS元素以及浏览器对象属性的方式，调整页签在web载体上的位置和大小。

8.根据权利要求1所述的方法，其特征在于，当通过帐号登录该web载体时，该方法进一步包括：与该帐号对应地保存页签在web载体上的排列方式和大小。

9.根据权利要求8所述的方法，其特征在于，当通过帐号登录该web载体时，该方法进一步包括：判断是否保存有与该帐号对应的页签在web载体上的排列方式和大小，如果有，则按照与该帐号对应的页签在web载体上的排列方式和大小展示页签。

10.根据权利要求1所述的方法，其特征在于，所述web载体为即时通讯IM客户端面板或者用于展示web网站的浏览器。