一种导航栏的自适应显示方法及装置与流程

本发明涉及互联网技术领域，更具体的，涉及一种导航栏的自适应显示方法及装置。

背景技术：

导航栏是指位于网页页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平选项，它起着链接站点或者链接软件内的各个页面的作用。网站使用导航栏是为了让访问者更清晰明朗的找到所需要的资源区域，寻找资源。

随着移动互联网的快速发展，使用智能手机和平板电脑上网已经越来越普遍。智能手机、平板电脑、笔记本电脑和台式电脑等设备具有不同的分辨率，因此，同一网页往往需要在不同分辨率的设备上进行显示，以便用户进行访问。当网页导航栏中选项的数量过多时，在分辨率较低的设备中进行显示时会导致页面布局错乱，用户体验不佳。

为了使导航栏能够适应不同分辨率的设备进行合理显示，现有技术往往需要在html文件中写好导航栏的dom(英文全称：documentobjectmodel，中文全称：文档对象模型)结构，给导航栏设置特定的class属性，然后给这个class属性设置各个分辨率区间的css(英文全称：cascadingstylesheets，中文全称：层叠样式表)样式，以便使导航栏在不同分辨率的设备上自适应显示不同的样式。然而，这种方法需要预先设置不同的分辨率区间，很容易出现误差，且导航栏中dom结构和多套css样式的编写也为开发者带来了巨大的工作量。

技术实现要素：

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的一种导航栏的自适应显示方法及装置。

为了实现上述发明目的，本发明提供的具体技术方案如下：

一种导航栏的自适应显示方法，所述方法包括：

当目标设备加载预设网页时，获取所述目标设备的分辨率，所述预设网页包括导航栏，所述导航栏包括多个选项；

根据所述目标设备的分辨率确定所述导航栏在所述目标设备上的目标导航栏显示模式；

获取所述目标导航栏显示模式中的每个待显示选项的格式属性，所述待显示选项的格式属性表示所述待显示选项的显示内容；

根据所述目标导航栏显示模式中的每个待显示选项的格式属性，控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示。

优选的，所述根据所述目标设备的分辨率确定所述导航栏在所述目标设备上的目标导航栏显示模式，包括：

获取所述导航栏的每个导航栏显示模式，以及每个导航栏显示模式对应的分辨率区间；

根据所述目标设备的分辨率对应的分辨率区间，确定所述目标设备的分辨率对应的导航栏显示模式；

将所述目标设备的分辨率对应的导航栏显示模式确定为所述导航栏在所述目标设备上的目标导航栏显示模式。

优选的，当所述目标导航栏显示模式为第一层级显示模式时，每个所述待显示选项为所述导航栏中的每个选项，每个待显示选项的格式属性包括：选项名称、选项名称字体、选项名称字体大小和选项图标；

所述根据所述目标导航栏显示模式中的每个待显示选项的格式属性，控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示，包括：

根据每个所述待显示选项的选项名称字体和选项名称字体大小，显示每个所述待显示选项的选项名称，并显示每个所述待显示选项的选项图标。

优选的，当所述目标导航栏显示模式为第二层级显示模式时，每个所述待显示选项为所述导航栏中每个选项组中的上级选项，所述选项组包括：所述上级选项、以及所述上级选项对应的多个次级选项，每个上级选项的格式属性包括：上级选项名称、上级选项名称字体、上级选项名称字体大小、上级选项图标和上级选项对应的多个次级选项；

所述根据所述目标导航栏显示模式中的每个待显示选项的格式属性，控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示，包括：

根据每个所述上级选项的上级选项字体和上级选项字体大小，显示每个所述上级选项名称，并显示每个所述上级选项图标，每个所述上级选项对应的多个次级选项以下拉列表的形式隐藏显示。

优选的，当所述目标导航栏显示模式为图标显示模式时，每个所述待显示选项为所述导航栏中每个选项组中的上级选项，所述选项组包括：所述上级选项、以及所述上级选项对应的多个次级选项，每个上级选项的格式属性包括：上级选项图标和上级选项对应的多个次级选项；

所述根据所述目标导航栏显示模式中的每个待显示选项的格式属性，控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示，包括：

显示每个所述上级选项图标，每个所述上级选项对应的多个次级选项以下拉列表的形式隐藏显示。

优选的，所述方法还包括：

当接收到用户对任一所述上级选项的点击指令时，以下拉列表的形式显示被点击的所述上级选项对应的多个次级选项的选项名称和/选项图标。

一种导航栏的自适应显示装置，所述方法包括：

第一获取单元，用于当目标设备加载预设网页时，获取所述目标设备的分辨率，所述预设网页包括导航栏，所述导航栏包括多个选项；

确定单元，用于根据所述目标设备的分辨率确定所述导航栏在所述目标设备上的目标导航栏显示模式；

第二获取单元，用于获取所述目标导航栏显示模式中的每个待显示选项的格式属性，所述待显示选项的格式属性表示所述待显示选项的显示内容；

显示单元，用于根据所述目标导航栏显示模式中的每个待显示选项的格式属性，控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示。

优选的，所述确定单元包括：

获取子单元，用于获取所述导航栏的每个导航栏显示模式，以及每个导航栏显示模式对应的分辨率区间；

第一确定子单元，用于根据所述目标设备的分辨率对应的分辨率区间，确定所述目标设备的分辨率对应的导航栏显示模式；

第二确定子单元，用于将所述目标设备的分辨率对应的导航栏显示模式确定为所述导航栏在所述目标设备上的目标导航栏显示模式。

一种存储介质，所述存储介质包括存储的程序，

其中，在所述程序运行时控制所述存储介质所在的设备执行上述任一项所述的导航栏的自适应显示方法。

一种处理器，所述处理器用于运行程序，

其中，所述程序运行时执行上述任一项所述的导航栏的自适应显示方法。

借由上述技术方案，本发明提供的导航栏的自适应显示方法，不需要设计导航栏的dom结构和编写多套css样式，只需在目标设备加载包括导航栏的预设网页时，根据目标设备的分辨率自适应选择导航栏的目标导航栏显示模式，并控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示，实现导航栏在目标设备中的自适应显示，对导航栏进行精确显示，并提高了导航栏的开发效率。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了本发明实施例中公开的一种导航栏的自适应显示方法流程图；

图2示出了本发明实施例中公开的另一种导航栏的自适应显示方法流程图；

图3示出了本发明实施例中公开的一种导航栏的自适应显示装置结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

请参阅图1，图1为本实施例公开的一种导航栏的自适应显示方法流程图，具体包括以下步骤：

s101：当目标设备加载预设网页时，获取所述目标设备的分辨率，所述预设网页包括导航栏，所述导航栏包括多个选项；

目标设备可以为智能手机、平板电脑、笔记本电脑和台式电脑等可以上网的设备，在此不做具体设定。

不同类型的设备可能对应不同的分辨率。

网站使用导航栏是为了让用户更清晰明朗的找到所需要的资源区域，寻找资源。以某个综合性网站的首页为例，导航栏包括新闻、财经、科技等选项。

s102：根据所述目标设备的分辨率确定所述导航栏在所述目标设备上的目标导航栏显示模式；

本实施例预先设定了导航栏的多种导航栏显示模式，如，导航栏中的全部选项平铺显示的第一层级显示模式，只显示导航栏中每个选项组中的上级选项的第二层级显示模式，只显示导航栏中每个选项组中的上级选项的图标的图标显示模式等等。

以导航栏有abcdefg七个选项为例，其中，abc，de，fg分别为同一选项组，这三个选项组中的上级选项分别为a、b和c。第一层级显示模式显示abcdefg七个选项的选项名称和选项图标，第二层级显示模式显示a，b和c的选项名称和选项图标，图标显示模式只显示a，b和c的选项图标。

还需要说明的是，当导航栏中选项过多，或基于特定需要，关于选项的分层并不局限于2层，还可以为多层，相应的，导航栏显示模式还可以设定第三层级显示模式等等。

每种导航栏显示模式对应一个所需分辨率。

判定所述目标设备的分辨率符合哪种导航栏显示模式所需分辨率区间，就将该导航栏显示模式作为所述导航栏在所述目标设备上的目标导航栏显示模式。

s103：获取所述目标导航栏显示模式中的每个待显示选项的格式属性，所述待显示选项的格式属性表示所述待显示选项的显示内容；

需要说明的是，所述格式属性至少包括选项名称、选项名称字体、选项名称字体大小、跳转链接、所属选项组和选项图标中的任意一项。

优选的，配置导航栏的索引属性，索引属性的值为数组，导航栏中每一个选项为数组中的元素。

每个选项的格式属性的值为对象，其中，选项名称、选项名称字体、选项名称字体大小、跳转链接、所属选项组和选项图标为对象的变量。

s104：根据所述目标导航栏显示模式中的每个待显示选项的格式属性，控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示。

当所述目标导航栏显示模式为第一层级显示模式时，每个所述待显示选项为所述导航栏中的每个选项，每个待显示选项的格式属性包括：选项名称、选项名称字体、选项名称字体大小和选项图标；

所述根据所述目标导航栏显示模式中的每个待显示选项的格式属性，控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示，包括：

根据每个所述待显示选项的选项名称字体和选项名称字体大小，显示每个所述待显示选项的选项名称，并显示每个所述待显示选项的选项图标。

当所述目标导航栏显示模式为第二层级显示模式时，每个所述待显示选项为所述导航栏中每个选项组中的上级选项，所述选项组包括：所述上级选项、以及所述上级选项对应的多个次级选项，每个上级选项的格式属性包括：上级选项名称、上级选项名称字体、上级选项名称字体大小、上级选项图标和上级选项对应的多个次级选项；其中，在每个选项组中次级选项还可以对应更次级选项。如选项组中上级选项新闻可以对应次级选项娱乐新闻和经济新闻，而次级选项经济新闻又可以对应更次级选项国内经济新闻和国外经济新闻。

所述根据所述目标导航栏显示模式中的每个待显示选项的格式属性，控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示，包括：

根据每个所述上级选项的上级选项字体和上级选项字体大小，显示每个所述上级选项名称，并显示每个所述上级选项图标，每个所述上级选项对应的多个次级选项以下拉列表的形式隐藏显示。

当所述目标导航栏显示模式为图标显示模式时，每个所述待显示选项为所述导航栏中每个选项组中的上级选项，所述选项组包括：所述上级选项、以及所述上级选项对应的多个次级选项，每个上级选项的格式属性包括：上级选项图标和上级选项对应的多个次级选项；

所述根据所述目标导航栏显示模式中的每个待显示选项的格式属性，控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示，包括：

显示每个所述上级选项图标，每个所述上级选项对应的多个次级选项以下拉列表的形式隐藏显示。

在上述第二层级显示模式和图标显示模式中，当接收到用户对任一所述上级选项的点击指令时，以下拉列表的形式显示被点击的所述上级选项对应的多个次级选项的选项名称和/选项图标。

可以理解的是，当目标设备的分辨率允许次级选项名称和选项图标同时显示时则显示次级选项名称和选项图标；当目标设备的分辨率只允许次级选项名称或选项图标只显示其一时，则显示次级选项名称或选项图标。

本实施例公开的导航栏的自适应显示方法，不需要设计导航栏的dom结构和编写多套css样式，只需在目标设备加载包括导航栏的预设网页时，根据目标设备的分辨率自适应选择导航栏的目标导航栏显示模式，并控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示，实现导航栏在目标设备中的自适应显示，对导航栏进行精确显示，并提高了导航栏的开发效率。

请参阅图2，图2为本实施例公开的另一种导航栏的自适应显示方法，其中，根据所述目标设备的分辨率确定所述导航栏在所述目标设备上的目标导航栏显示模式，包括：

s201：获取所述导航栏的每个导航栏显示模式，以及每个导航栏显示模式对应的分辨率区间；

当导航栏显示模式包括：第一层级显示模式、第二层级显示模式和图标显示模式时，每种导航栏显示模式都对应一个分辨率区间。在对应的分辨率区间中相应的导航栏显示模式都可以准确显示。

预先根据所述导航栏中每个选项的选项名称、选项名称字体大小和选项图标，计算第一层级显示模式下所需分辨率；具体的，根据所述导航栏中每个选项的选项名称和选项名称字体大小，计算每个选项名称的所需空间；计算每个选项名称的所需空间和相应选项图标的所需空间的和值，并根据所述和值得到第一层级显示模式下所需分辨率。

根据所述导航栏中每个上级选项名称、上级选项名称字体大小和选项图标，计算第二层级显示模式下所需分辨率；具体的，根据所述导航栏中每个上级选项名称和上级选项名称字体大小，计算每个上级选项名称的所需空间；计算每个上级选项名称的所需空间和相应选项图标的所需空间的和值，并根据所述和值得到第二层级显示模式下所需分辨率。

根据所述导航栏中每个上级选项图标，计算图标显示模式下所需分辨率。具体的，计算每个上级选项图标占用空间的和值，并根据所述和值得到图标显示模式下所需分辨率。

根据上述不同显示模式所需分辨率，可以得到不同显示模式对应的分辨率区间，具体为：第一层级显示模式对应区间[第一层级显示模式所需分辨率，+∞)，第二层级显示模式对应区间[第二层级显示模式所需分辨率，第一层级显示模式所需分辨率)，图标显示模式对应区间[图标显示模式所需分辨率，第二层级显示模式所需分辨率)。

s202：根据所述目标设备的分辨率对应的分辨率区间，确定所述目标设备的分辨率对应的导航栏显示模式；

确定目标设备的分辨率在上述哪个分辨率区间，就可以判断导航栏以哪种显示模式进行显示。

s203：将所述目标设备的分辨率对应的导航栏显示模式确定为所述导航栏在所述目标设备上的目标导航栏显示模式。

本实施例公开的导航栏的自适应显示方法，预先计算每种导航栏显示模式对应的分辨率区间，根据所述目标设备的分辨率对应的分辨率区间，确定所述目标设备的分辨率对应的导航栏显示模式，使导航栏显示模式的选择更加准确，实现了导航栏的自适应精确显示。

基于上述实施例公开的导航栏的自适应显示方法，请参阅图3，本实施例对应公开了一种导航栏的自适应显示装置，具体包括：

第一获取单元301，用于当目标设备加载预设网页时，获取所述目标设备的分辨率，所述预设网页包括导航栏，所述导航栏包括多个选项；

确定单元302，用于根据所述目标设备的分辨率确定所述导航栏在所述目标设备上的目标导航栏显示模式；

第二获取单元303，用于获取所述目标导航栏显示模式中的每个待显示选项的格式属性，所述待显示选项的格式属性表示所述待显示选项的显示内容；

显示单元104，用于根据所述目标导航栏显示模式中的每个待显示选项的格式属性，控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示。

优选的，所述确定单元102包括：

获取子单元，用于获取所述导航栏的每个导航栏显示模式，以及每个导航栏显示模式对应的分辨率区间；

第一确定子单元，用于根据所述目标设备的分辨率对应的分辨率区间，确定所述目标设备的分辨率对应的导航栏显示模式；

第二确定子单元，用于将所述目标设备的分辨率对应的导航栏显示模式确定为所述导航栏在所述目标设备上的目标导航栏显示模式。

优选的，本实施例公开的导航栏的自适应显示装置具体通过jquery插件进行实现。jquery是一个优秀的开源的javascript库，具有多种优秀特性并兼容各种浏览器。

本实施例公开的导航栏的自适应显示装置，不需要设计导航栏的dom结构和编写多套css样式，只需在目标设备加载包括导航栏的预设网页时，根据目标设备的分辨率自适应选择导航栏的目标导航栏显示模式，并控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示，实现导航栏在目标设备中的自适应显示，对导航栏进行精确显示，并提高了导航栏的开发效率。

所述导航栏的自适应显示装置包括处理器和存储器，上述第一获取单元、确定单元、第二获取单元和显示单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来提高导航栏的开发效率。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)，存储器包括至少一个存储芯片。

本发明实施例提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现所述导航栏的自适应显示方法。

本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述导航栏的自适应显示方法。

本发明实施例提供了一种设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：

当目标设备加载预设网页时，获取所述目标设备的分辨率，所述预设网页包括导航栏，所述导航栏包括多个选项；

根据所述目标设备的分辨率确定所述导航栏在所述目标设备上的目标导航栏显示模式；

获取所述目标导航栏显示模式中的每个待显示选项的格式属性，所述待显示选项的格式属性表示所述待显示选项的显示内容；

根据所述目标导航栏显示模式中的每个待显示选项的格式属性，控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示。

本文中的设备可以是服务器、pc、pad、手机等。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：

当目标设备加载预设网页时，获取所述目标设备的分辨率，所述预设网页包括导航栏，所述导航栏包括多个选项；

根据所述目标设备的分辨率确定所述导航栏在所述目标设备上的目标导航栏显示模式；

获取所述目标导航栏显示模式中的每个待显示选项的格式属性，所述待显示选项的格式属性表示所述待显示选项的显示内容；

根据所述目标导航栏显示模式中的每个待显示选项的格式属性，控制所述导航栏以所述目标导航栏显示模式在所述目标设备上进行显示。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。