基于B/S架构的网页页面显示方法及终端与流程

本发明涉及网页显示领域，尤其涉及一种基于B/S架构的网页页面显示方法及终端。

背景技术：
目前的Web界面多以树形菜单和列表为主来组织内容，多为左侧树形菜单，右侧内容面板的结构。在一个页面中，同一时间只能查看一组内容，要查看不同内容时，需要通过树形菜单来回切换。同时，此模式还有每次切换都要重新加载内容、重新渲染界面的弊端。即浪费了处理性能和网络带宽，有增加了响应延迟。

技术实现要素：
本发明的目的是：提出了一种基于B/S架构的网页页面显示方法,可以在一个页面中同时显示多个主窗口，每个主窗口中可包含多个面板，每个面板内可包含多个属性页，同时显示多级数据，并且在执行窗口切换时，无需重新渲染界面。为了实现上述目的，本发明的技术方案是：一种基于B/S架构的网页页面显示方法，包括以下步骤：步骤一，在网页浏览器中获得用户指令；步骤二，根据所述用户指令，可在一个页面内同时打开多个主窗口，并可任意调整所述多个主窗口的大小或位置，使多个主窗口平铺于一个页面内。进一步的，可对所述步骤二中多个主窗口执行最大化、最小化和平铺的操作。进一步的，所述主窗口中还设有面板图标区，所述面板栏图标区中包含多个面板图标及其文字说明，用户可通过点击或触摸相应的图标及文字说明来激活一个面板，激活的面板的内容将显示在当前主窗口中的面板内容区内。进一步的，所述主窗口中的面板内容区内，包含多个属性页，用户可通过点击或触摸相应的标签来激活一个属性页,激活的属性页内容将显示在当前属性页标签下。进一步的，所述主窗口中还设有隐藏按钮，用于隐藏所述面板图标区；所述面板图标区隐藏后形成面板侧边栏；点击所述面板侧边栏，弹出临时面板图标区；所述面板侧边栏上还设有展开按钮，点击展开按钮，恢复面板图标区。进一步的，每个打开的主窗口在页面底部均设有栏目模块，点击栏目模块就弹出相应的主窗口至最外层。一种基于B/S架构的网页页面显示终端，包括多个控件和布局容器；所述布局容器对位于其中的多个控件进行统一排布；所述布局容器可相互嵌套；每个控件均带有四周边距、纵向最小尺寸、纵向最大尺寸、横向最小尺寸、横向最大尺寸、纵向弹性系数、横向弹性系数以及对齐方式的布局属性。本发明由于采用了上述技术，使之与现有技术相比具有的积极效果是：本发明可以在一个页面中同时显示多个主窗口，每个主窗口中可包含多个面板，每个面板内可包含多个属性页，同时显示多级数据，并且在执行窗口切换时，无需重新渲染界面。附图说明图1是本发明基于B/S架构的网页页面显示方法的流程图。图2是使用本发明基于B/S架构的网页页面显示方法的第一种显示图。图3是使用本发明基于B/S架构的网页页面显示方法的第二种显示图。图4是使用本发明基于B/S架构的网页页面显示方法的第三种显示图。图5是使用本发明基于B/S架构的网页页面显示方法的第四种显示图。图6是使用本发明基于B/S架构的网页页面显示方法的第五种显示图。图7是使用本发明基于B/S架构的网页页面显示方法的第六种显示图。图8是使用本发明基于B/S架构的网页页面显示方法的第七种显示图。图9是使用本发明基于B/S架构的网页页面显示方法的第八种显示图。图10是使用本发明基于B/S架构的网页页面显示方法的第九种显示图。具体实施方式以下结合附图进一步说明本发明的实施例。请参见图1所示，一种基于B/S架构的网页页面显示方法，包括以下步骤：步骤一，在网页浏览器中获得用户指令；该指令是指打开网页后，在网页上显示的主窗口图标及其文字的指令。步骤二，根据所述用户指令，可在一个页面内同时打开多个主窗口，并可任意调整所述多个主窗口的大小或位置，使多个主窗口平铺于一个页面内。具体的，根据用户点击网页上显示的主窗口图标或者其对应的文字指令，即可打开主窗口。可以同时点击多个主窗口图标来打开多个主窗口，并根据用户需求调整主窗口的大小和位置，使多个主窗口以相互层叠、纵向平铺、横向平铺或纵向横向结合平铺的形式同时显示在在一个页面上，具体如图2、3、4、5所示。请参见图2至图5所示，在每个主窗口中设置有最大化、最小化和关闭的按钮，可对所述步骤二中多个主窗口执行最大化、最小化、关闭等操作。请参见图6所示，优选的，所述主窗口中还设有面板图标区2，所述面板栏图标区2中包含多个面板图标及其文字说明，用户可通过点击或触摸相应的图标及文字说明来激活一个面板，激活的面板的内容将显示在当前主窗口中的面板内容区3内，面板内容区3通常位于主窗口右侧，但也可根据需要调整至左侧、上方或下方。优选的，所述主窗口中还设有隐藏按钮1，用于隐藏所述面板图标区；所述面板图标区隐藏后，仅在主窗口的一侧，通常是左侧，显示一个矩形的面板侧边栏4，具体参见图7所示，此时面板内容区3可获得更多的空间用于显示当前面板的内容。优选的，侧边栏4上还设置有展开按钮5，点击所述面板侧边栏4，可显示临时面板图标区6，具体参见图8所示；在弹出的临时面板图标区6中，用户可以通过鼠标点击或触摸等方式自由切换面板，在面板成功切换或者临时面板图标区6失去焦点后，临时面板图标区6将自动隐藏，恢复图7所示界面；点击展开按钮5，恢复所述图6所示的界面。请参见图9所示，优选的，每个面板的面板内容区3中可包含多个属性页7，其中每个属性页内可包含任意内容，使用属性页7标签栏可以在不同属性页之间进行切换，属性页7标签栏通常位于面板内容区3上方，但也可根据需要调整至其左侧、右侧或下方。请参见图9所示，优选的，每个打开的主窗口在页面底部均设有栏目模块8，点击栏目模块8就弹出相应的主窗口至最外层。本发明中的各个主窗口的尺寸均可由用户随时进行调整，因此为了保证布局的正确性，设置了如下自适应布局算法：每个控件均带有四周边距、纵向最小尺寸、纵向最大尺寸、横向最小尺寸、横向最大尺寸、纵向弹性系数、横向弹性系数以及对齐方式等布局属性。控件的弹性系数决定了控件在其最大和最小尺寸范围内，能够延展或收缩的比例。为多个控件统一布局设计了横向（行）排布、纵向（列）排布和表格（多行多列）排布等布局容器。布局容器本身不可见，仅负责按照预设的尺寸限制、弹性系数和对齐方式等参数对位于其中的多个控件进行统一排布。布局容器可以相互嵌套，组成更复杂的布局规则。在用户每次改变窗口尺寸后，若当前窗口中包含了一个或多个布局容器，则其中的内容先按照布局容器进行排布，然后再按照每个容器内的控件调整，再按照自身规则进行调整，以完成最终布局。为了保证用户体验流程、简化网页DOM树复杂度，引入了复杂的隐式iframe优化方案。即：将页面中较为复杂的主窗口、面板、属性页等内容，分别用内联的隐式iframe节点实现，防止它们直接挂接在主页面的DOM树中。与传统模式不同的是，通过较复杂的技术实现保证了这些iframe,一经初始化后，只需渲染一次即可被反复重用。仍然为用户提供一个单页面的操作环境，并且保留了单页面应用的所有好处。综上所述，本发明可以在一个页面中同时显示多个主窗口，每个主窗口中可包含多个面板，每个面板内可包含多个属性页，同时显示多级数据，并且在执行窗口切换时，无需重新渲染界面。只需渲染一次即可被反复重用。仍然为用户提供一个单页面的操作环境，并且保留了单页面应用的所有好处。在大大简化了主页面DOM树复杂度的同时，还避免了传统模式中，每次切换内容都要重新加载内容、重新渲染界面的弊端。