一种移动端页面高度固定方法及系统与流程

本发明涉及互联网技术领域，特别涉及一种移动端页面高度固定方法及系统。

背景技术：

随着互联网的发展，页面也越来越重要。更多的信息是以页面或者网页的形式展现的。而随着互动要求的增加，页面中很多数据是要求实时更新的。因而，通常会将页面分为动态数据和静态数据。动态数据用来设置那些需要更多更新的数据，静态数据则不需要频繁的更新。

网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式(标准通用标记语言的一个应用，文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

网页设计是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化)，进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。

网页设计一般分为三种大类：功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同，应选择不同的网页策划与设计方案。

网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的试听感受。

网页设计常用的工具包括AI、PS、FL、FW、DW CDR等。

这些网页通常都是如ASP，ColdFusion，Perl，PHP，WebDNA，或者其他的服务器端语言。这些服务器端语言经常使用的通用网关接口(CGI)产生动态网页。有两个明显的例外是asp.net和JSP，在它们的API(程序编程接口)里头会重复使用CGI的概念，但实际上所有的web(网络)请求分派到壹个共享的虚拟机。动态网页有很少或没有预期变化时，往往会高速缓存和页面预计会接收大量的网络流量，会营造缓慢的加载时间至服务器。

选项卡Tabs是一种多个标签页区分不同选项功能的窗口，就像Internet选项那样的。如果打开了多个选项卡，则还可以使用“快速选项卡”轻松地切换到其他选项卡。同时打开多个网页时，每个网页都会在一个单独的选项卡上显示。这些选项卡方便您在打开的网站间切换。快速选项卡提供所有打开的选项卡的缩微视图(称为“缩略图”)。这方便查找希望查看的网页。单击“快速选项卡”按钮旁边的箭头时，会显示打开过的所有网站的列表。若要切换到不同的网站，请单击该站点名称。

现有技术中，由于互动的要求，网页设计越来越重要。尤其是移动端的网页设计，出现了大量的Tabs的选项，用户可以在同一页面自由切换不同的Tabs。但是，由于各个Tabs下的内容不同，会造成移动端浏览器页面适配时高度不同，也就是用户切换不同的Tabs后，页面出现跳跃。因而，亟需要一种移动端页面高度固定的方案，避免页面跳动带来的不便。

技术实现要素：

本发明提供一种移动端页面高度固定方法及系统，用以解决现有技术中移动端页面切换Tabs选项卡时页面跳跃的问题。

本发明提供一种移动端页面高度固定方法，包括：

为页面中所有并列排列的选项卡设定父选项卡；

设定所述父选项卡的高度为所述并列排列的选项卡中高度最大的选项卡 的高度；

将所述父选项卡的高度设定为页面显示选项卡的高度。

所述方法还包括：

所述页面中包括至少两个选项卡，且所述选项卡并列排列；

用户能够在所述选项卡之间自由选择切换。

所述方法还包括：

所述选项卡高度根据自身的显示内容或加载内容的不同而不同。

所述方法还包括：

获取所述选项卡中高度最大的选项卡的高度的值；

将所述高度的值设定为父选项卡的高度的值。

所述方法还包括：

所述父选项卡的高度随着所述选项卡中高度最大的选项卡的高度变化而变化设定。

所述方法还包括：

所有并列排列的选项卡的高度统一采用所述父选项卡的高度进行显示。

一种移动端页面高度固定系统，包括：

父选项卡设定单元，用于为页面中所有并列排列的选项卡设定父选项卡；

高度同步单元，用于设定所述父选项卡的高度为所述并列排列的选项卡中高度最大的选项卡的高度；

高度设定单元，用于将所述父选项卡的高度设定为页面显示选项卡的高度。

所述高度同步单元还用于获取所述选项卡中高度最大的选项卡的高度的值；

将所述高度的值设定为父选项卡的高度的值。

所述高度同步单元还用于随着所述选项卡中高度最大的选项卡的高度变化而变化设定所述父选项卡的高度。

所述系统还包括选项卡高度获取单元，用于根据自身的显示内容或加载内容获取所述选项卡的高度；

所述高度同步单元从所述选项卡高度获取单元获取所述选项卡中高度最大的选项卡的高度的值。

本发明实施例中，通过为页面中所有并列排列的选项卡设定父选项卡；设定所述父选项卡的高度为所述并列排列的选项卡中高度最大的选项卡的高度；将所述父选项卡的高度设定为页面显示选项卡的高度。本发明实施例的方案，能够通过设定父选项卡的操作，将所有并列排列的选项卡的高度统一固定为父选项卡的高度，从而减少了选项卡切换时由于选项卡高度不同而引起页面的跳跃，极大的提高了用户体验度。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明实施例1提供的一种移动端页面高度固定方法原理流程图；

图2为本发明实施例2提供的一种移动端页面高度固定系统结构示意图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

如图1所示，为本发明实施例1提供的一种移动端页面高度固定方法原理流程图，其中，

步骤11，为页面中所有并列排列的选项卡设定父选项卡。

页面通常指我们常说的网页。现有的网页编辑通常是采用HTML超文本标记语言进行。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

本实施例中的网页采用javascript(JS)脚本进行编辑。目的在于可以区分动态数据和静态数据分别进行网页内容的编辑。JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

是一种解释性脚本语言(代码不进行预编译)。

主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

JavaScript脚本语言具有以下特点:

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。

而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能(如AJAX)必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来 编写服务器端程序。

脚本script是使用一种特定的描述性语言，依据一定的格式编写的可执行文件，又称作宏或批处理文件。脚本通常可以由应用程序临时调用并执行。各类脚本目前被广泛地应用于网页设计中，因为脚本不仅可以减小网页的规模和提高网页浏览速度，而且可以丰富网页的表现，如动画、声音等。举个最常见的例子，当我们点击网页上的E－mail地址时能自动调用Outlook Express或Foxmail这类邮件软件，就是通过脚本功能来实现的。也正因为脚本的这些特点，往往被一些别有用心的人所利用。例如在脚本中加入一些破坏计算机系统的命令，这样当用户浏览网页时，一旦调用这类脚本，便会使用户的系统受到攻击。所以用户应根据对所访问网页的信任程度选择安全等级，特别是对于那些本身内容就非法的网页，更不要轻易允许使用脚本。通过“安全设置”对话框，选择“脚本”选项下的各种设置就可以轻松实现对脚本的禁用和启用。

现在的脚本语言是比较多的，一般的脚本语言的执行只同具体的解释执行器有关，所以只要系统上有相应语言的解释程序就可以做到跨平台。脚本(Script)，就是含有bind和alias等命令的集合，你可以把这个集合存为一个独立的文件然后在需要的时候执行，这样就可以方便你在CS中的使用。脚本可以存为后缀名为.cfg的文件放在cstrike文件夹下，执行时在控制台输入：exec(脚本文件名).cfg即可。比如将一个脚本存为buys.cfg文件，则在控制台中输入：execbuys.cfg则可以实现我们所需要的功能。要实现一个命令只要把这一过程定义(alias)好，并且分配一个键位给这个命令，以后只要按分配好的键位，就可以实现这一过程。所有的脚本都是通过这一方法实现的。

较常用的JS函数库有Prototype、Dojo、YUI、Ext JS、Moo Tools、Jquery等。现在最流行的是Jquery库。

本实施例中，采用JS脚本设定页面的选项卡Tabs。选项卡的设定，通常可以由用户自由切换，每个选项卡中包含不同的内容。本实施例中侧重于对并列排列的选项卡的操作，尤其是横向并列的选项卡。由于这些横向并列的选项 卡的高度不同，在用户切换选项卡时，会造成整体的页面高度的变化，液面高度的变化会带来浏览器的自动适配，然后可能造成页面的忽然跳跃，用户体验不好。

举例来说，页面设计时，选项卡的切换可以通过如下方式实现：

下载相关的脚步运行库：由于采用JQuery脚本来实现网页的动态效果，因此需要在网上搜索并下载相应的JQuery运动库，下载完成后进行解压缩，将解压后的文件拷贝到网站的根目录下。

新建一网页文件，命名为"index.html",利用文本编辑器打开，由于打算利用JQuery实现网页的脚本，因此需要引入对JQuery运行库的访问。“index.html”文件的重要作用是给用户呈现最基本的网页选项卡框架，其中包括三个选项卡，每一个选项卡中包括若干二级超链接，当然也可以是其它的文本内容。在文件中输入如图所示的代码。代码中包括对样式文件“MyStyle.css”和脚本文件“MyJQuery.js”的引用，对于这两个文件，我们将会在后面的讲解中进行展示。

在当前目录下新建一名称为"MyStyle.css"的层叠样式表文件，利用该文件实现网页的美化。当然利用CSS进行美化操作的另一目地是实现网页的内容与其表现形式的分离，这样就可以使我们专注于网页的美化，实现了更高效的分工合作理念。

在当前目录下创建另一文件，并命名为“MyQuery.js”。该文件的重要作用是实现选项卡的切换效果，当用户鼠标划过其中的一个菜单时，该菜单将显现高亮显示状态，同时位于该菜单下方的内容将会慢慢显示出来，并做了相应的的改变，同时其它选项卡的高亮显示状态被取消，恢复为默认状态。

双击文件"index.html"，就会自动启动浏览器。当用户鼠标划过其中的一个菜单时，该菜单将显现高亮显示状态，同时位于该菜单下方的内容将会慢慢显示出来，并做了相应的的改变，同时其它选项卡的高亮显示状态被取消，恢复为默认状态。

本实施例中，在页面中设计有选项卡时，还需要为各个并列排列的选项卡 设定一个父选项卡。这个父选项卡不用于具体的显示操作，而是用户选项卡高度的设定。

步骤12，设定所述父选项卡的高度为所述并列排列的选项卡中高度最大的选项卡的高度。

每个选项卡高度根据自身的显示内容或加载内容的不同而不同。获取所述选项卡中高度最大的选项卡的高度的值；将所述高度的值设定为父选项卡的高度的值。

这里，需要获取每个选项卡的高度，然后取其中高度的最大值，作为父选项卡的高度。

父选项卡的高度随着所述选项卡中高度最大的选项卡的高度变化而变化设定。

步骤13，将所述父选项卡的高度设定为页面显示选项卡的高度。

所有并列排列的选项卡的高度统一采用所述父选项卡的高度进行显示。这里，就是统一各个选项卡的高度，使得选项卡切换的时候，页面总体高度不便，就不会引起页面跳跃。

本发明实施例通过为页面中所有并列排列的选项卡设定父选项卡；设定所述父选项卡的高度为所述并列排列的选项卡中高度最大的选项卡的高度；将所述父选项卡的高度设定为页面显示选项卡的高度。本发明实施例的方案，能够通过设定父选项卡的操作，将所有并列排列的选项卡的高度统一固定为父选项卡的高度，从而减少了选项卡切换时由于选项卡高度不同而引起页面的跳跃，极大的提高了用户体验度。

如图2所示，为本发明实施例2提供的一种移动端页面高度固定系统结构示意图，其中，

父选项卡设定单元21，用于为页面中所有并列排列的选项卡设定父选项 卡；

高度同步单元22，用于设定所述父选项卡的高度为所述并列排列的选项卡中高度最大的选项卡的高度；

高度设定单元23，用于将所述父选项卡的高度设定为页面显示选项卡的高度。

进一步的，上述高度同步单元22还用于获取所述选项卡中高度最大的选项卡的高度的值；

将所述高度的值设定为父选项卡的高度的值。

进一步的，上述高度同步单元22还用于随着所述选项卡中高度最大的选项卡的高度变化而变化设定所述父选项卡的高度。

进一步的，上述系统还包括选项卡高度获取单元24，用于根据自身的显示内容或加载内容获取所述选项卡的高度；

所述高度同步单元22从所述选项卡高度获取单元24获取所述选项卡中高度最大的选项卡的高度的值。

综上所述，本发明实施例通过为页面中所有并列排列的选项卡设定父选项卡；设定所述父选项卡的高度为所述并列排列的选项卡中高度最大的选项卡的高度；将所述父选项卡的高度设定为页面显示选项卡的高度。本发明实施例的方案，能够通过设定父选项卡的操作，将所有并列排列的选项卡的高度统一固定为父选项卡的高度，从而减少了选项卡切换时由于选项卡高度不同而引起页面的跳跃，极大的提高了用户体验度。

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

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

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

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

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。