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

文档序号:6615912阅读:172来源:国知局
专利名称:一种在web载体上展示页签的方法
技术领域
本发明涉及互if关网网站(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=VminxN+ ( N-l ) xA+cj ( 1 )
Wmax=VminxN+ ( N-l ) xA+cj ( 2 )
其中,A为页签和页签之间的空白宽度,ci为页签和web载体的边框之
间的空白宽度之和。A和ct可以为零。
步骤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)所示。
<formula>complex formula see original document page 11</formula> ( 3 )
<formula>complex formula see original document page 11</formula>( 4 )
步骤208:将在web载体中展示页签的函数LINE确定为Ptotal除以N 所得到的商值M加1, LINE行中的M行展示页签的个数为N,各页签宽度 均为V,如式(4)所示,而LINE行中的一行展示页签的个数为Ptotal除以 N所得到的余数ODD,各页签宽度为V,,如下式(5)所示。
<formula>complex formula see original document page 11</formula> /N ( 5 )
其中,M和ODD满足如下式(6 )。
<formula>complex formula see original document page 11</formula>( 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客户端提供的密钥进行
认i正,认i正成功后,显示与该帐号相关的信息。
在本步骤中,面板上所展示的所有页签都可以进行所述的页签认证,或
者,只有部分页签进行所述页签认证。但是,所有页签都不进行所述页签认
i正也可以显示相关信息。
步骤305:通过调整面板大小来调整页签的排列方式和大小。
本步骤通过图l和图2所示的方法实现,在此省略其描述。
步骤306: IM客户端将调整之后的页签排列方式和大小作为页签展示
信息与帐号对应起来保存。
在此,IM客户端可以在用户退出IM客户端时,自动保存该用户退出
IM客户端时面板上的页签展示信息,或者,也可以每当用户改变页签排列 方式和大小时实时保存。
通过以上流程,IM客户端保存了页签展示信息,当用户再次登录IM客 户端时,如步骤303所述按照所保存的页签展示信息来展示页签,这样IM 客户端可以按照用户的使用习惯来给用户展示页签。
通过本发明提供的在web载体上展示页签的方法,用户可以在web载 体上对自己所关注的页签进行个性化管理,即用户可以按照自己的兴趣爱好 对页签进行例如添加或删除页签、改变页签大小或排列方式等操作,用户通 过这种操作能够在一定大小的web载体上看到更多的页签和相应的内容,因 此拥有更好的交互体验,也给用户更好的使用感受,满足了用户个性化需求。 而且,通过保存所述对页签的操作,当用户再次登录web载体时,为用户展 示用户个性化管理之后的页签,从而满足了用户的使用需求。
以上所述仅为本发明的较佳实施例而已,并不用以限制本发明,凡在本 发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在 本发明的保护范围之内。
权利要求
1、一种在web载体上展示页签的方法,其特征在于,该方法包括检测到web载体的大小被调整,获取调整后web载体的大小;根据web载体的大小以及预先设置的页签大小的最小值和最大值,确定页签在web载体上的排列方式和大小,并按照所确定的排列方式和大小展示页签。
2、 根据权利要求1所述的方法,其特征在于,所述检测到web载体的大小被调整为检测到web载体的宽度被调整; 所述获取调整后web载体的大小为获取调整后web载体的宽度; 所述根据web载体的大小以及预先设置的页签的大小的最小值和最大值, 确定页签在web载体上的排列方式和大小为根据web载体的宽度以及预先设 置的页签宽度的最小值和最大值,确定在web载体中展示页签的行数以及在各 行中展示页签的个数和各行页签的宽度;所述按照所确定的排列方式和大小展示页签为根据展示页签的行数、在 各行中展示页签的个数以及各行页签的宽度,调整各页签在web载体上的位置 和大小,并按照调整后的位置和大小在web载体上展示页签。
3、 根据权利要求2所述的方法,其特征在于,所述确定在web载体中展示 页签的行数以及在各行中展示页签的个数和各行页签的宽度包括步骤a,设置一行最多能展示的页签个数的初始值为N;步骤b,计算在一行中展示N个页签宽度为所述预先设置的页签宽度的最 小值的页签所需的web载体的宽度的最小值,计算在一行中展示N个页签宽度 为所述预先设置的页签宽度的最大值的页签所需的web载体的宽度的最大值;步骤c,判断调整后web载体宽度是否大于所述web载体宽度的最小值且 小于所述web载体宽度的最大值,如果是,则执行步骤d;否则,调整N值, 返回步骤b;步骤d,将当前得到的N值确定为一行最多能展示的页签个数;步骤e,根据web载体上的页签总数目和所确定的一行最多能展示的页签个数确定在web载体中展示页签的行数和在各行中展示页签的个数,根据所述 调整后web载体的宽度和在各行中展示页签的个数确定各行页签的宽度。
4、 根据权利要求3所述的方法,其特征在于,所述根据web载体上的页签 总数目和所确定的一行最多能展示的页签个数确定在web载体中展示页签的行 数和在各行中展示页签的个数为判断用所确定的 一行最多能展示的页签个数 能否整除在web载体上的页签总数目,如果能,则在web载体中展示页签的行 数为页签总数目除以所确定的一行最多能展示的页签个数得到的商值,在各行 中展示页签的个数为所确定的一行最多能展示的页签个数;如果不能,则在web 载体中展示页签的行数为页签总数目除以所确定的一行最多能展示的页签个数 得到的商再加一得到的值,除了在其中一行展示页签的个数为页签总数目除以 所确定的一行最多能展示的页签个数得到的余数值之外,在其它行中展示页签 的个数为所确定的一行最多能展示的页签个数。
5、 根据权利要求3所述的方法,其特征在于,所述根据所述调整后web 载体的宽度和在各行中展示页签的个数确定各行页签的宽度为从web载体的 宽度中减去不用于展示页签的空白宽度所得到的值再除以在各行中展示页签的 个数所得到的值为各行页签的宽度。
6、 根据权利要求1所述的方法,其特征在于,所述检测到web载体的大小被调整为通过基本事件处理以及文档对象模 型DOM的高级事件处理检测到web载体的大小被调整的事件;所述获取调整后web载体的大小为通过层叠样式表CSS和浏览器对象属 性来获取web载体的大小。
7、 根据权利要求2所述的方法,其特征在于,所述调整各页签在web载体 上的位置和大小为通过程序内部建立的页签map表,以Javascript语句改变 页签的层叠样式表CSS元素以及浏览器对象属性的方式,调整页签在web载体 上的位置和大小。
8、 根据权利要求1所述的方法,其特征在于,当通过帐号登录该web载体 时,该方法进一步包括与该帐号对应地保存页签在web载体上的排列方式和 大小。
9、 根据权利要求8所述的方法,其特征在于,当通过帐号登录该web载体 时,该方法进一步包括判断是否保存有与该帐号对应的页签在web载体上的 排列方式和大小,如果有,则按照与该帐号对应的页签在web载体上的排列方 式和大小展示页签。
10、 根据权利要求1所述的方法,其特征在于,所述web载体为即时通讯 IM客户端面板或者用于展示web网站的浏览器。
全文摘要
本发明公开了一种在web载体上展示页签的方法,该方法包括检测到web载体的大小被调整,获取调整后web载体的大小;根据web载体的大小以及预先设置的页签大小的最小值和最大值,确定页签在web载体上的排列方式和大小,并按照所确定的排列方式和大小展示页签。根据本发明公开的方法,用户可以按照自己的喜好,通过调整web载体的大小来调整页签在web载体上的展示方式,同时也可以添加自己喜欢的页签,删除自己不感兴趣的页签,使得在有限的web载体范围内展示更多的页签,从而,提高用户的交互体验,给用户更好的使用感受,满足了用户个性化的需求。
文档编号G06F17/30GK101196925SQ200710306378
公开日2008年6月11日 申请日期2007年12月28日 优先权日2007年12月28日
发明者上 岳, 彭晓虹 申请人:腾讯科技(深圳)有限公司
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1