CN104050184A - 显示页面内容的方法及装置 - Google Patents
显示页面内容的方法及装置 Download PDFInfo
- Publication number
- CN104050184A CN104050184A CN201310080066.1A CN201310080066A CN104050184A CN 104050184 A CN104050184 A CN 104050184A CN 201310080066 A CN201310080066 A CN 201310080066A CN 104050184 A CN104050184 A CN 104050184A
- Authority
- CN
- China
- Prior art keywords
- page
- content
- navigation bar
- paragraph
- height
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/954—Navigation, e.g. using categorised browsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Radar, Positioning & Navigation (AREA)
- Remote Sensing (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了显示页面内容的方法及装置,所述方法包括:获取待显示内容的描述数据,所述描述数据包括待显示内容中包含的内容元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落包含的内容元素的数量,以及页面显示样式信息;确定待显示内容所占的总页面高度;确定各个内容段落的高度;在浏览器窗口中展现待显示内容,并在浏览器窗口的可视区域内显示导航条;按照各个内容段落之间的高度比例对导航条进行分段,并显示分段标识;当操作焦点移动到导航条上的某位置时,根据页面高度与导航条的长度之间的比例,映射到页面中的目标位置,将页面滚动到所述目标位置处进行展现。通过本申请,能够提高页面内容的定位精度。
Description
技术领域
本申请涉及网页显示技术领域,特别是涉及显示页面内容的方法及装置。
背景技术
在Web网页显示的过程中,在需要对查询到的大量数据进行显示时,现有技术中经常以列表的形式进行分页显示。例如,用户在某电商网站中查询某商品时,会将数据库中所有符合查询条件的商品记录信息读入到内存中,然后通过分页机制进行分页处理,然后根据用户的指示,每次分别从符合条件的记录中将规定数目的记录读取出来,并按照一定的顺序对商品记录信息进行显示。
下面以返回可滚动的记录集来描述分页算法:
(1)先假定每页显示的记录数pageSize=10;
(2)再获取满足条件的记录总数total=rs.getRows();
(3)计算出总页数pageNumber=total/pageSize;
(4)当页面加载时,设定当前页为currentPage=1,取记录的开始索引startIndex=0,循环向后取pageSize个记录进行显示;
(5)当使用导航条上的“首页”、“上一页”、“下一页”、“末页”、“转到第[n]页”时,按照以下规则进行定位:
●首页:startIndex=0,循环向后取pageSize个记录进行显示;
●上一页:startIndex=(currentPage-1)×pageSize,循环向后取pageSize个记录进行显示;
●下一页:startIndex=(currentPage+1)×pageSize,循环向后取pageSize个记录进行显示;
●末页:startIndex=(pageNumber-1)×pageSize,循环向后取total-startIndex个记录进行显示;
●转到第[n]页:n的取值范围在1到pageNumber之间,startIndex=(n-1)×pageSize,循环向后取pageSize个记录进行显示。
这种分页显示的方式能够方便用户对浏览对象进行定位,但是在定位的精度上只能做到“页”的级别,因此,还有待进一步提高。
发明内容
本申请提供了显示页面内容的方法及装置,能够提高页面内容的定位精度。
本申请提供了如下方案:
一种显示页面内容的方法,包括:
获取待显示内容的描述数据,所述描述数据包括待显示内容中包含的内容元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落包含的内容元素的数量,以及页面显示样式信息;
根据所述内容元素的总数以及页面显示样式信息确定待显示内容所占的总页面高度;
根据各个内容段落中具有的内容元素的数量以及页面显示样式信息确定各个内容段落的高度;
在浏览器窗口中展现待显示内容,并在浏览器窗口的可视区域内显示导航条;
按照各个内容段落之间的高度比例对导航条进行分段,并显示分段标识;其中,每个分段分别对应一个内容段落,各个分段之间的长度比例与对应的内容段落之间的高度比例相同;
当操作焦点移动到导航条上的某位置时,根据页面高度与导航条的长度之间的比例,映射到页面中的目标位置,将页面滚动到所述目标位置处进行展现。
一种显示页面内容的装置,包括:
描述数据获取单元,用于获取待显示内容的描述数据,所述描述数据包括待显示内容中包含的内容元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落包含的内容元素的数量,以及页面显示样式信息;
页面总高度确定单元,用于根据所述内容元素的总数以及页面显示样式信息确定待显示内容所占的总页面高度;
内容段落高度确定单元,用于根据各个内容段落中具有的内容元素的数量以及页面显示样式信息确定各个内容段落的高度;
导航条显示单元,用于在浏览器窗口中展现待显示内容,并在浏览器窗口的可视区域内显示导航条;
导航条分段单元,用于按照各个内容段落之间的高度比例对导航条进行分段,并显示分段标识;其中,每个分段分别对应一个内容段落,各个分段之间的长度比例与对应的内容段落之间的高度比例相同;
页面滚动单元,用于当操作焦点移动到导航条上的某位置时,根据页面高度与导航条的长度之间的比例,映射到页面中的目标位置,将页面滚动到所述目标位置处进行展现。
根据本申请提供的具体实施例,本申请公开了以下技术效果:
通过本申请,能够将所有的待显示内容显示在同一个页面内,并显示出导航条,在导航条中可以按照待显示内容所具有的内容段落数量以及各个内容段落在页面中所占的实际高度,对导航条进行分段,使得导航条上的每个分段分别对应一个内容段落,各个分段之间的长度比例与对应的内容段落之间的高度比例相同。这样,当操作焦点移动到导航条上的某位置时,可以根据页面高度与导航条的长度之间的比例,映射到页面中的目标位置,并将页面滚动到所述目标位置处进行展现。通过这种方式相当于实现了一种连续锚点的导航,对于浏览网页的用户而言,可以根据导航条上的段落标识,精确定位到页面的某位置处;对于页面的设计者而言,不必再对待显示内容进行分页,导航设计的过程也变得容易。
进一步地,在导航条上显示段落标识时,还可以将各个内容段落的名称作为各自的段落标识,这种段落标识可以是预先人为设定的,或者可以是根据各个内容段落中的标题等信息进行自然语义分析后得到的,总之,可以起到对段落内容进行提示的作用,进一步方便了用户的浏览。
另外,同样的待显示内容,可能能够从多个维度进行内容段落的划分,因此,也可以分别获取待显示内容在各个维度上的描述数据,在显示导航条时,分别显示各个维度对应的导航条,用户可以根据自己的需求选择任一导航条进行导航。
当然,实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的方法的流程图;
图2是本申请实施例提供的导航条显示方式示意图;
图3是本申请实施例提供的另一导航条显示方式示意图;
图4是本申请实施例提供的装置的示意图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员所获得的所有其他实施例,都属于本申请保护的范围。
参见图1,本申请实施例提供的显示页面内容的方法可运行于各类包括浏览器的终端上,如PC、平板电脑、手机等,具体包括以下步骤:
S101:获取待显示内容的描述数据,所述描述数据包括待显示内容中包含的内容元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落包含的内容元素的数量,以及页面显示样式信息;
在本申请实施例中,待显示内容可以是指符合查询条件的商品记录信息、连载的小说等。例如,某电商类网站向用户提供商品查询入口,用户可以在入口中输入关键词等查询关键词,相应地,可以从数据库中取出符合条件的商品记录信息,以列表等形式展现在网页中,这种商品记录信息往往是一些链接,用户点击对应的链接时,可以进入对应的商品详细信息页面。在该例子中,这种商品记录信息就是本申请实施例所述的待显示内容中的一种。在实际应用中,这种类似商品记录信息的待显示内容在页面中显示时往往具有一定的序列性,例如,按照价格从高到低的顺序排列等等,因此一般可以称为“序列内容”。这种序列内容在显示时可以以内容元素为显示单元,内容元素的最小单位可以是文字,对于商品记录信息而言,一个内容元素一般可以是由图片、标题等组成,每个内容元素具有指定的单元宽度及单元高度。
在本申请实施例中,针对一批待显示内容,可以首先获取描述数据,这种描述数据具体可以包括显示内容中包含的内容元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落包含的内容元素的数量,以及页面显示样式信息等。例如,当用户输入关键词查询符合条件的商品时,待显示内容为符合用户查询条件的商品记录信息,“包含的内容元素的总数”,也就是符合用户查询条件的商品总数,该信息可以由程序统计出来;各个内容元素往往可以按照某维度划分为多个段落,例如,在商品类目维度上,可以划分为“女装”、“男装”、“数码”等多个内容段落,在价格维度上,可以划分为“10元至30元”、“30元至50元”、“50元至100元”等多个内容段落,等等。每个内容段落中包含若干个内容元素。待显示内容在预置维度上具有的内容段落的数量指在某维度上一共划分为多少个内容段落,例如,在类目维度上划分为10个内容段落,在价格维度上划分为9个内容段落等等。关于内容段落的划分可以是预先定义好的,例如,预先定义好某维度上包含几个内容段落,以及各个内容段落的名称,这样,当获得待显示内容之后,就可以根据各个内容元素的描述信息进行语义分析,将各个内容元素划分到对应的内容段落中,这样就可以统计出各个内容段落中包含的内容元素的数量。或者,还可以预先定义好各个内容段落中包含的内容元素的数量,以及各个内容段落中具体包含哪些内容元素等等。
关于页面显示样式信息,一般可以包括每个内容元素的单元高度、单元宽度、每行显示多少个内容元素等等,这些信息一般会在页面的CSS(CascadingStyle Sheet,级联样式表)中定义,因此可以从CSS中获取到页面显示样式信息。
总之,可以针对待显示内容的显示特征得到一份描述数据,描述数据中包含了该份待显示内容的显示元素的尺寸、内容段落数量,各内容段落的元素数量,等等。示例如下:
<内容描述>
<段落数>n<段落数/>
<单元宽度>width<单元宽度/>
<单元高度>height<单元高度/>
<段落1><命名>name(1)<命名/><数量>M(1)<数量/><元素>array[1]<元素/><段落1/>……
<段落j><命名>name(j)<命名/><数量>M(j)<数量/><元素>array[j]<元素/><段落j/>……
<段落n><命名>name(n)<命名/><数量>M(n)<数量/><元素>array[n]<元素/><段落n/>
<单位><单位/>
<内容描述/>
S102:根据所述内容元素的总数以及页面显示样式信息,确定待显示内容所占的总页面高度;
在本申请实施例中,所有的待显示内容都在同一页面中显示,不再进行分页,因此,只要获取到一共有多少个内容元素,每个内容元素的单元高度、每行显示多少个内容元素,就可以计算出待显示内容所需的总页面高度。例如,内容元素的总数为100个,每行显示五个内容元素,则总共需要显示20行,如果每个内容元素的高度为20个像素,则待显示内容所占的总页面高度为400个像素。当然,如果预先还定义了每行的高度,则计算出显示的总行之后,有可以计算得到待显示内容所占的总页面高度。
S103:根据各个内容段落中具有的内容元素的数量以及页面显示样式信息,确定各个内容段落的高度;
由于同时还获知了各个内容段落中包含有多少个内容元素,因此,按照同样的方法,也可以分别计算出各个内容段落在页面中所占的高度。例如,按照商品类目维度,分为女装、男装、数码等内容段落,其中,女装段落中含有40个内容元素,每行显示5个内容元素,则女装段落共显示8行,假设每行高度为20个像素,则女装段落在页面中所占的高度为160个像素。
S104:在浏览器窗口中展现待显示内容,并在浏览器窗口的可视区域内显示导航条;
如前文所述,当从数据库中检索到符合查询条件的待显示内容之后,即使待显示内容数量很大,本申请实施例也不会进行分页显示,而是显示在同一个页面中。当然,在同一页面中显示这些待显示内容时,可以以内容段落为单位进行显示,每个内容段落所在区域显示对应内容段落内的内容元素。
同时,还可以在浏览器窗口的可视区域内显示一导航条。浏览器窗口也即用于显示待显示内容的窗口,在窗口最大化的情况下,其可视区域的大小与显示器的尺寸有关。浏览器窗口可视区域的尺寸是可以通过一些系统函数获取到的。在显示导航条时,可以显示横向和/或纵向的导航条。导航条可以被设计为可触发,当用户鼠标在导航条某位置处点击时,可以确定相应的位置信息,并进行页面的滚动。或者,导航条上也可以同时设置一拖拽浮标,用户可以将鼠标移动到拖拽浮标上,按下鼠标左键不放,并沿着导航条的方向拖拽,或者在触摸屏的情况下,可以用手指或者触摸笔等拖动该拖拽浮标,即可移动拖拽浮标在导航条上的位置,并相应的进行页面的滚动。关于具体的页面滚动情况,下文中会有详细地介绍。
S105:按照各个内容段落之间的高度比例,对导航条进行分段,并显示分段标识;其中,每个分段分别对应一个内容段落,各个分段之间的长度比例与对应的内容段落之间的高度比例相同;
本申请实施例中,所述导航条相当于在页面中起导航作用的目录。而本申请实施例中,导航条上显示有各个内容分段的标识信息,例如,各个内容分段的名称(如小说的章节名称、通讯录的首字母、商品的类目名称)等。用户可以根据导航条上的提示,了解网页中大概都包含有哪些内容,然后,用户可以根据自己的需要,在导航条上进行操作,从而将页面移动到相应的位置处。例如,导航条上显示有男装、女装、数码等段落标识,如果用户想要查看网页中的女装内容,则可以点击导航条上的“女装”标识所在的区域,或者将导航条上的拖拽浮标拖动到“女装”标识所在的区域,相应的,就可以将页面滚动到女装内容段落处。
其中,导航条是按照内容段落进行分段的,并且,每个分段之间的长度比例可以与各个内容段落在页面中的高度比例相同,相当于是将各个内容段落的高度进行等比例缩小,各个分段的长度之和等于导航条的长度。例如,假设页面整体高度为H,每个内容段落之内的内容元素计算出各自内容段落的高度为H(j)(j为自然数),浏览器窗口可视区域的高度记为h,按照内容段落高度映射的导航锚点段的高度记为h(j)(j为自然数),h(j)可以根据对应内容段落高度同比例获取,例如,h(j)=h*H(j)/H,也就是说,可以在导航的同时,显示出不同内容段落的高度对比,在导航条纵向显示,并且导航条的高度恰好等于浏览器窗口可视区域的高度的情况下,导航条上各个分段的长度与对应的内容分段在页面中的高度之间的比例为h/H,也即,浏览器窗口可视区域高度与页面整体高度之间的比值。
如图2所示,如果待显示内容是小说,按照章节可以分为8个内容段落,则在纵向显示导航条的情况下,导航条可以被分为8段,每个分段之间的高度比例与各个内容段落在页面中的高度比例相同。例如,从图2中可以看出,第1段的高度小于第2段,这也就意味着在页面中,第2个内容段落的内容相对于第1个内容段落而言比较长。
当然,如果导航条是横向的,h可以代表浏览器窗口可视区域的宽度。也就是说,在纵向显示导航条的情况下,导航条的高度可以等于浏览器窗口可视区域的高度,在横向显示导航条的情况下,导航条的长度可以等于浏览器窗口可视区域的宽度,这样可以充分利用浏览器窗口的可视区域。否则,如果导航条过短,而内容段落太多时,会导致导航条上的节点过于密集,导航的过程中可能会出现误差;如果导航条过长,又会超出浏览器窗口的可视区域,使得导航的效果受到影响。当然,在实际应用中,导航条的长度也可以小于或者略大于浏览器窗口的高度或宽度,具体的取值可以根据实际的需要进行设定。
S106:当操作焦点移动到导航条上的某位置时,根据页面高度与导航条的长度之间的比例,映射到页面中的目标位置,将页面滚动到所述目标位置处进行展现。
在显示出导航条之后,用户就可以根据导航条中的提示,选择自己需要的段落进行查看。例如,在导航条中显示有男装、女装、数码等段落标识,用户想要查看数码相关的内容,就可以点击导航条上“数码”标识所在的区域,或者将导航条上的拖拽浮标移动到“数码”标识所在的区域。相应的,就可以根据导航条的长度与页面整体高度之间的比例,将用户在导航条上的操作位置映射到页面中。例如,假设用户点击的是导航条上的“数码”所在分段内的某个点,该点是导航条上的第109个像素,如果导航条的长度与页面整体高度之间的比例是1∶10,则可以计算出,需要将页面滚动到109×10=1090像素处。或者,在另一种方式中,由于在生产导航条的过程中就可以获知各个分段的长度,也可以获知各个内容分段在也页面中的实际高度,因此,当用户在导航条上操作时,就可以计算出用户操作的点属于哪个分段,相应的,将页面滚动到对应的内容段落中对应的位置处。例如,假设导航条中第一个分段的长度是50个像素,第二个分段的长度是100个像素,页面中第一个内容段落的高度是500个像素,第二个内容段落的长度是1000个像素,也即导航条与页面整体高度之间的比值是1∶10,则如果用户点击的是导航条上的第109个像素,就可以计算出用户点击的是第二个分段的第59个像素,并且可以映射出该点在页面中的位置:(109-50)×10+500=1090,也即需要将页面滚动到第1090像素处。
关于前述第二种方法,用公式可以表示为:
H(q)=H(j)×{h(k)-[h(1)+h(2)+…+h(j)]}/h(j)+[H(1)+H(2)+…+H(j)]
其中,h(k)为用户点击的导航条上的位置,H(q)为对应的页面中的位置,h(j)为与用户点击的位置相邻的上一分段的长度,H(j)为与h(j)对应的内容段落在页面中的实际高度。也就是说,利用h(k)与邻近分段之前的各个分段的高度之和的差值获得页面显示内容的精确位置。
对于导航条上存在拖拽浮标的情况,当用户拖拽浮标时,可以持续监听浮标的位置h(k),并同步计算出对应的内容元素在页面中的位置H(q),同时进行页面的滚动,达到连续浏览的效果。另外,如果用户通过滚动鼠标滚轮,或者拖拽浏览器窗口的滚动条滚动页面时,还可以持续监听页面滚动后的页面位置H(q),反向求得拖拽浮标的对应位置h(k),在导航条的对应位置上显示出拖拽浮标。
可见,在本申请实施例中,可实现了一种连续锚点的导航,用户不仅可以选择将页面滚动到某个内容段落,还可以精确到内容段落中的具体位置。尤其是在导航条上具有拖拽浮标(无论是用鼠标拖拽还是在触摸屏的情况下用手指或者触摸笔等拖拽)的情况下,连续导航的效果尤为明显,例如,在前述例子中,可以滚动到第二个内容段落的第590个像素处,等等。这种连续锚点导航,对于有些情况下显得格外有意义。例如,按照价格维度划分内容段落时,一般只能划分出一些价格区间,如果不进行连续锚点导航,当用户选择某价格区间(50至100元)时,只能从该价格区间的起始位置(也即50元处)开始显示,如果用户想要浏览70元左右的内容元素,只能再从前向后查找。而在本申请实施例中,如果用户想要浏览70元左右的内容元素,就可以点击导航条中“50至100”标识区域的中间位置,这样就可以直接将页面滚动到70元左右的内容元素所在的位置。
需要说明的是,在实际应用中,同一份待显示内容可能可以从不同维度上划分出内容段落,比如对于商品记录信息而言,可以从类目、折扣、价格等多个维度上划分出各自的内容段落。因此,在具体实现时,根据页面内容数据建立的描述数据可以包括多个维度的描述信息,并且在显示导航条时,可以用分别显示各个维度对应的导航条,用户根据自己的要求选择不同的导航方式。如图3所示,可以显示三个导航条,分别从类目、折扣、价位维度进行分段。需要说明的是,图3中的各个分段之间的长度比例看上去都是相同的,但这只是一个示意图,实际应用中还是会根据各自的内容段落在页面中所占的实际高度来确定。
与本申请实施例提供的显示页面内容的方法相对应,本申请实施例还提供了一种显示页面内容的装置,参见图4,该装置可以包括以下单元:
描述数据获取单元401,用于获取待显示内容的描述数据,所述描述数据包括待显示内容中包含的内容元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落包含的内容元素的数量,以及页面显示样式信息;
页面总高度确定单元402,用于根据所述内容元素的总数以及页面显示样式信息确定待显示内容所占的总页面高度;
内容段落高度确定单元403,用于根据各个内容段落中具有的内容元素的数量以及页面显示样式信息确定各个内容段落的高度;
导航条显示单元404,用于在浏览器窗口中展现待显示内容,并在浏览器窗口的可视区域内显示导航条;
导航条分段单元405,用于按照各个内容段落之间的高度比例对导航条进行分段,并显示分段标识;其中,每个分段分别对应一个内容段落,各个分段之间的长度比例与对应的内容段落之间的高度比例相同;
页面滚动单元406,用于当操作焦点移动到导航条上的某位置时,根据页面高度与导航条的长度之间的比例,映射到页面中的目标位置,将页面滚动到所述目标位置处进行展现。
具体实现时,所述描述数据还可以包括:各个内容段落的名称;
所述导航条分段单元405可以包括:
段落名称显示子单元,用于将各个分段对应的内容段落的名称作为各个分段的标识显示在所述导航条上。
其中,所述描述数据获取单元401可以包括:
自然语义分析单元,用于对各个内容元素的标签进行自然语义分析,根据分析结果与各个内容段落名称的匹配程度,将各个内容元素划分到所属的内容段落中;
统计单元,用于统计出各个内容段落包含的内容元素的数量。
在实际应用中,导航条上可以带有拖拽浮标,这样,页面滚动单元406具体可以用于当所述拖拽浮标被拖拽到导航条上的某位置时,根据页面高度与导航条的长度之间的比例,映射到页面中的目标位置。
此外,该装置还可以包括一个反向计算单元,用于当用户滚动页面时,持续监听页面滚动后的页面位置,并反向计算出拖拽浮标的相应位置,在导航条中显示拖拽浮标位置的变化。
在实际应用中,同样的待显示内容,可能能够从多个维度进行内容段落的划分,因此,也可以分别获取待显示内容在各个维度上的描述数据,在显示导航条时,分别显示各个维度对应的导航条,用户可以根据自己的需求选择任一导航条进行导航。此时,导航条显示单元404可以包括:
分别显示子单元,用于在浏览器窗口中展现待显示内容,并在浏览器窗口的可视区域内分别显示对应各个维度的导航条。
总之,通过本申请实施例,能够将所有的待显示内容显示在同一个页面内,并显示出导航条,在导航条中可以按照待显示内容所具有的内容段落数量以及各个内容段落在页面中所占的实际高度,对导航条进行分段,使得导航条上的每个分段分别对应一个内容段落,各个分段之间的长度比例与对应的内容段落之间的高度比例相同。这样,当操作焦点移动到导航条上的某位置时,可以根据页面高度与导航条的长度之间的比例,映射到页面中的目标位置,并将页面滚动到所述目标位置处进行展现。通过这种方式相当于实现了一种连续锚点的导航,对于浏览网页的用户而言,可以根据导航条上的段落标识,精确定位到页面的某位置处;对于页面的设计者而言,不必再对待显示内容进行分页,导航设计的过程也变得容易。
通过以上的实施方式的描述可知,本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在存储介质中,如ROM/RAM、磁碟、光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于系统或系统实施例而言,由于其基本相似于方法实施例,所以描述得比较简单,相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。
以上对本申请所提供的显示页面内容的方法及装置,进行了详细介绍,本文中应用了具体个例对本申请的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本申请的方法及其核心思想;同时,对于本领域的一般技术人员,依据本申请的思想,在具体实施方式及应用范围上均会有改变之处。综上所述,本说明书内容不应理解为对本申请的限制。
Claims (10)
1.一种显示页面内容的方法,其特征在于,包括:
获取待显示内容的描述数据,所述描述数据包括待显示内容中包含的内容元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落包含的内容元素的数量,以及页面显示样式信息;
根据所述内容元素的总数以及页面显示样式信息确定待显示内容所占的总页面高度;
根据各个内容段落中具有的内容元素的数量以及页面显示样式信息确定各个内容段落的高度;
在浏览器窗口中展现待显示内容,并在浏览器窗口的可视区域内显示导航条;
按照各个内容段落之间的高度比例对导航条进行分段,并显示分段标识;其中,每个分段分别对应一个内容段落,各个分段之间的长度比例与对应的内容段落之间的高度比例相同;
当操作焦点移动到导航条上的某位置时,根据页面高度与导航条的长度之间的比例,映射到页面中的目标位置,将页面滚动到所述目标位置处进行展现。
2.根据权利要求1所述的方法,其特征在于,所述描述数据还包括:各个内容段落的名称;
所述显示分段标识包括:
将各个分段对应的内容段落的名称作为各个分段的标识显示在所述导航条上。
3.根据权利要求2所述的方法,其特征在于,通过以下方式获取各个内容段落包含的内容元素的数量:
对各个内容元素的标签进行自然语义分析,根据分析结果与各个内容段落名称的匹配程度,将各个内容元素划分到所属的内容段落中;
统计出各个内容段落包含的内容元素的数量。
4.根据权利要求1所述的方法,其特征在于,所述导航条上带有拖拽浮标,所述当操作焦点移动到导航条上的某位置时,根据页面高度与导航条的长度之间的比例,映射到页面中的目标位置包括:
当所述拖拽浮标被拖拽到导航条上的某位置时,根据页面高度与导航条的长度之间的比例,映射到页面中的目标位置。
5.根据权利要求4所述的方法,其特征在于,还包括:
当用户滚动页面时,持续监听页面滚动后的页面位置,并反向计算出拖拽浮标的相应位置,在导航条中显示拖拽浮标位置的变化。
6.根据权利要求1所述的方法,其特征在于,所述预置维度为多个,所述在浏览器窗口中展现待显示内容,并在浏览器窗口的可视区域内显示导航条包括:
在浏览器窗口中展现待显示内容,并在浏览器窗口的可视区域内分别显示对应各个维度的导航条。
7.一种显示页面内容的装置,其特征在于,包括:
描述数据获取单元,用于获取待显示内容的描述数据,所述描述数据包括待显示内容中包含的内容元素的总数、待显示内容在预置维度上具有的内容段落的数量、各个内容段落包含的内容元素的数量,以及页面显示样式信息;
页面总高度确定单元,用于根据所述内容元素的总数以及页面显示样式信息确定待显示内容所占的总页面高度;
内容段落高度确定单元,用于根据各个内容段落中具有的内容元素的数量以及页面显示样式信息确定各个内容段落的高度;
导航条显示单元,用于在浏览器窗口中展现待显示内容,并在浏览器窗口的可视区域内显示导航条;
导航条分段单元,用于按照各个内容段落之间的高度比例对导航条进行分段,并显示分段标识;其中,每个分段分别对应一个内容段落,各个分段之间的长度比例与对应的内容段落之间的高度比例相同;
页面滚动单元,用于当操作焦点移动到导航条上的某位置时,根据页面高度与导航条的长度之间的比例,映射到页面中的目标位置,将页面滚动到所述目标位置处进行展现。
8.根据权利要求7所述的装置,其特征在于,所述描述数据还包括:各个内容段落的名称;
所述导航条分段单元包括:
段落名称显示子单元,用于将各个分段对应的内容段落的名称作为各个分段的标识显示在所述导航条上。
9.根据权利要求8所述的装置,其特征在于,所述描述数据获取单元包括:
自然语义分析单元,用于对各个内容元素的标签进行自然语义分析,根据分析结果与各个内容段落名称的匹配程度,将各个内容元素划分到所属的内容段落中;
统计单元,用于统计出各个内容段落包含的内容元素的数量。
10.根据权利要求7所述的装置,其特征在于,所述预置维度为多个,所述导航条显示单元包括:
分别显示子单元,用于在浏览器窗口中展现待显示内容,并在浏览器窗口的可视区域内分别显示对应各个维度的导航条。
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201310080066.1A CN104050184B (zh) | 2013-03-13 | 2013-03-13 | 显示页面内容的方法及装置 |
HK15101972.3A HK1201607A1 (zh) | 2013-03-13 | 2015-02-27 | 顯示頁面內容的方法及裝置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201310080066.1A CN104050184B (zh) | 2013-03-13 | 2013-03-13 | 显示页面内容的方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN104050184A true CN104050184A (zh) | 2014-09-17 |
CN104050184B CN104050184B (zh) | 2017-08-22 |
Family
ID=51503035
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201310080066.1A Active CN104050184B (zh) | 2013-03-13 | 2013-03-13 | 显示页面内容的方法及装置 |
Country Status (2)
Country | Link |
---|---|
CN (1) | CN104050184B (zh) |
HK (1) | HK1201607A1 (zh) |
Cited By (15)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105404647A (zh) * | 2015-10-28 | 2016-03-16 | 百度在线网络技术(北京)有限公司 | 一种页面内容的定位方法及装置 |
CN105955597A (zh) * | 2016-04-22 | 2016-09-21 | 广州酷狗计算机科技有限公司 | 信息显示方法及装置 |
CN105988667A (zh) * | 2015-01-30 | 2016-10-05 | 广州市百果园网络科技有限公司 | 列表显示的方法及装置 |
CN106611066A (zh) * | 2017-01-04 | 2017-05-03 | 广东欧珀移动通信有限公司 | 网页信息展示方法、装置及计算机设备 |
CN108153565A (zh) * | 2016-12-02 | 2018-06-12 | 阿里巴巴集团控股有限公司 | 提供页面信息的方法及装置 |
CN108268577A (zh) * | 2017-01-13 | 2018-07-10 | 优视科技有限公司 | 图集内容承载页生成方法和装置 |
CN109901902A (zh) * | 2019-02-19 | 2019-06-18 | 广州视源电子科技股份有限公司 | 界面显示方法、装置、计算机设备和存储介质 |
CN110221758A (zh) * | 2019-04-29 | 2019-09-10 | 平安科技(深圳)有限公司 | 滚动条控制方法、装置、计算机设备和存储介质 |
CN105205157B (zh) * | 2015-09-28 | 2019-12-13 | 北京奇艺世纪科技有限公司 | 一种页面加载的方法、装置及系统 |
CN111989668A (zh) * | 2019-02-26 | 2020-11-24 | 西安诺瓦星云科技股份有限公司 | 数据项显示方法、装置及系统和计算机可读存储介质 |
CN112947811A (zh) * | 2021-02-24 | 2021-06-11 | 北京金山云网络技术有限公司 | 页面导航的显示方法和装置、电子设备和存储介质 |
CN113626555A (zh) * | 2021-10-12 | 2021-11-09 | 中孚安全技术有限公司 | 一种超大表单分段式加载显示方法及系统 |
CN114661200A (zh) * | 2022-03-28 | 2022-06-24 | 金蝶软件(中国)有限公司 | 一种页面内容的显示方法、装置、设备及可读存储介质 |
CN114816178A (zh) * | 2022-04-29 | 2022-07-29 | 咪咕数字传媒有限公司 | 一种电子书籍的选择方法及电子设备 |
CN115633114A (zh) * | 2021-10-28 | 2023-01-20 | 荣耀终端有限公司 | 通信录字母的显示方法、装置和终端设备 |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20060092155A1 (en) * | 2000-12-13 | 2006-05-04 | Nec Corporation | Position related information presentation system, position related information presentation method and recording medium recording control program thereof |
CN101963888A (zh) * | 2010-09-30 | 2011-02-02 | 宇龙计算机通信科技(深圳)有限公司 | 一种电子终端及其控制页面滚动条的方法 |
CN102222086A (zh) * | 2011-05-18 | 2011-10-19 | 广州市动景计算机科技有限公司 | 基于移动终端的网页阅读方法、网页阅读装置及移动终端 |
CN102385613A (zh) * | 2011-09-30 | 2012-03-21 | 广州市动景计算机科技有限公司 | 一种网页页面定位方法及其系统 |
CN102841900A (zh) * | 2011-06-23 | 2012-12-26 | 腾讯科技(深圳)有限公司 | 页面处理方法和装置 |
US20130036379A1 (en) * | 2011-08-02 | 2013-02-07 | Hon Hai Precision Industry Co., Ltd. | Computing device, storage medium and method for managing software menus using the computing device |
-
2013
- 2013-03-13 CN CN201310080066.1A patent/CN104050184B/zh active Active
-
2015
- 2015-02-27 HK HK15101972.3A patent/HK1201607A1/zh unknown
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20060092155A1 (en) * | 2000-12-13 | 2006-05-04 | Nec Corporation | Position related information presentation system, position related information presentation method and recording medium recording control program thereof |
CN101963888A (zh) * | 2010-09-30 | 2011-02-02 | 宇龙计算机通信科技(深圳)有限公司 | 一种电子终端及其控制页面滚动条的方法 |
CN102222086A (zh) * | 2011-05-18 | 2011-10-19 | 广州市动景计算机科技有限公司 | 基于移动终端的网页阅读方法、网页阅读装置及移动终端 |
CN102841900A (zh) * | 2011-06-23 | 2012-12-26 | 腾讯科技(深圳)有限公司 | 页面处理方法和装置 |
US20130036379A1 (en) * | 2011-08-02 | 2013-02-07 | Hon Hai Precision Industry Co., Ltd. | Computing device, storage medium and method for managing software menus using the computing device |
CN102385613A (zh) * | 2011-09-30 | 2012-03-21 | 广州市动景计算机科技有限公司 | 一种网页页面定位方法及其系统 |
Cited By (18)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105988667B (zh) * | 2015-01-30 | 2019-07-02 | 广州市百果园信息技术有限公司 | 列表显示的方法及装置 |
CN105988667A (zh) * | 2015-01-30 | 2016-10-05 | 广州市百果园网络科技有限公司 | 列表显示的方法及装置 |
CN105205157B (zh) * | 2015-09-28 | 2019-12-13 | 北京奇艺世纪科技有限公司 | 一种页面加载的方法、装置及系统 |
CN105404647A (zh) * | 2015-10-28 | 2016-03-16 | 百度在线网络技术(北京)有限公司 | 一种页面内容的定位方法及装置 |
CN105955597A (zh) * | 2016-04-22 | 2016-09-21 | 广州酷狗计算机科技有限公司 | 信息显示方法及装置 |
CN105955597B (zh) * | 2016-04-22 | 2019-08-23 | 广州酷狗计算机科技有限公司 | 信息显示方法及装置 |
CN108153565A (zh) * | 2016-12-02 | 2018-06-12 | 阿里巴巴集团控股有限公司 | 提供页面信息的方法及装置 |
CN106611066A (zh) * | 2017-01-04 | 2017-05-03 | 广东欧珀移动通信有限公司 | 网页信息展示方法、装置及计算机设备 |
CN108268577A (zh) * | 2017-01-13 | 2018-07-10 | 优视科技有限公司 | 图集内容承载页生成方法和装置 |
CN109901902A (zh) * | 2019-02-19 | 2019-06-18 | 广州视源电子科技股份有限公司 | 界面显示方法、装置、计算机设备和存储介质 |
CN111989668A (zh) * | 2019-02-26 | 2020-11-24 | 西安诺瓦星云科技股份有限公司 | 数据项显示方法、装置及系统和计算机可读存储介质 |
CN111989668B (zh) * | 2019-02-26 | 2024-05-14 | 西安诺瓦星云科技股份有限公司 | 数据项显示方法、装置及系统和计算机可读存储介质 |
CN110221758A (zh) * | 2019-04-29 | 2019-09-10 | 平安科技(深圳)有限公司 | 滚动条控制方法、装置、计算机设备和存储介质 |
CN112947811A (zh) * | 2021-02-24 | 2021-06-11 | 北京金山云网络技术有限公司 | 页面导航的显示方法和装置、电子设备和存储介质 |
CN113626555A (zh) * | 2021-10-12 | 2021-11-09 | 中孚安全技术有限公司 | 一种超大表单分段式加载显示方法及系统 |
CN115633114A (zh) * | 2021-10-28 | 2023-01-20 | 荣耀终端有限公司 | 通信录字母的显示方法、装置和终端设备 |
CN114661200A (zh) * | 2022-03-28 | 2022-06-24 | 金蝶软件(中国)有限公司 | 一种页面内容的显示方法、装置、设备及可读存储介质 |
CN114816178A (zh) * | 2022-04-29 | 2022-07-29 | 咪咕数字传媒有限公司 | 一种电子书籍的选择方法及电子设备 |
Also Published As
Publication number | Publication date |
---|---|
CN104050184B (zh) | 2017-08-22 |
HK1201607A1 (zh) | 2015-09-04 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN104050184A (zh) | 显示页面内容的方法及装置 | |
US10108693B2 (en) | System and method for interacting with virtual maps | |
TWI567673B (zh) | Sorting methods and devices for search results | |
AU2008286112B2 (en) | Method for loading advertisement in electronic map | |
US9489400B1 (en) | Interactive item filtering using images | |
US10104024B2 (en) | Apparatus, method, and computer program for providing user reviews | |
US9613155B2 (en) | System and framework for multi-dimensionally visualizing and interacting with large data sets | |
US10007711B2 (en) | Data rendering optimization | |
EP2159716A1 (en) | System and method for interfacing a web browser widget with social indexing | |
CN105718184A (zh) | 一种数据处理方法和装置 | |
CN105426514A (zh) | 个性化的移动应用app推荐方法 | |
US8515953B2 (en) | Temporal visualization of query results | |
CN113536136B (zh) | 一种实现搜索的方法、装置及设备 | |
CN101542465A (zh) | 使用指示器以显示和管理网页信息的系统 | |
CN103098002A (zh) | 用于移动设备的信息的基于鱼眼表示 | |
CN104508497A (zh) | 交互式信息对比显示 | |
US20180121523A1 (en) | Selecting supplemental content for inclusion in a search results page | |
CN103577524A (zh) | 业务对象表达和细节框显示 | |
CN103678325A (zh) | 一种用于提供与初始页面相对应的浏览页面的方法和设备 | |
JP6401726B2 (ja) | 情報処理装置、情報処理方法、及びプログラム | |
WO2015101945A1 (en) | Generating a news timeline and recommended news editions | |
JP2023085427A (ja) | コンテンツ配置プログラム、コンテンツ配置装置およびコンテンツ配置方法、Webサイト構築支援プログラム、Webサイト構築支援装置およびWebサイト構築支援方法、ならびに、経済規模出力プログラム、経済規模出力装置および経済規模出力方法 | |
Yang et al. | Note on inventory models with Weibull distribution deterioration | |
WO2014071505A1 (en) | A real estate property content system, method and computer readable medium | |
CN108268522B (zh) | 网站栏目内容的展现方法及装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 1201607 Country of ref document: HK |
|
GR01 | Patent grant | ||
GR01 | Patent grant | ||
REG | Reference to a national code |
Ref country code: HK Ref legal event code: GR Ref document number: 1201607 Country of ref document: HK |