CN103902722A - 基于b/s架构的网页页面显示方法及终端 - Google Patents

基于b/s架构的网页页面显示方法及终端 Download PDF

Info

Publication number
CN103902722A
CN103902722A CN201410142842.0A CN201410142842A CN103902722A CN 103902722 A CN103902722 A CN 103902722A CN 201410142842 A CN201410142842 A CN 201410142842A CN 103902722 A CN103902722 A CN 103902722A
Authority
CN
China
Prior art keywords
panel
webpage display
district
icon
main window
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
Application number
CN201410142842.0A
Other languages
English (en)
Other versions
CN103902722B (zh
Inventor
白杨
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Individual
Original Assignee
Individual
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Individual filed Critical Individual
Priority to CN201410142842.0A priority Critical patent/CN103902722B/zh
Publication of CN103902722A publication Critical patent/CN103902722A/zh
Application granted granted Critical
Publication of CN103902722B publication Critical patent/CN103902722B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

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/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]

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)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • User Interface Of Digital Computer (AREA)
  • Digital Computer Display Output (AREA)

Abstract

本发明公开一种基于B/S架构的网页页面显示方法及终端，包括以下步骤：步骤一，在网页浏览器中获得用户指令；步骤二，根据所述用户指令，可在一个页面内同时打开多个主窗口，并可任意调整所述多个主窗口的大小或位置，使多个主窗口平铺于一个页面内。本发明可以在一个页面中同时显示多个主窗口，每个主窗口中可包含多个面板，每个面板内可包含多个属性页，同时显示多级数据，并且在执行窗口切换时，无需重新渲染界面。

Description

基于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树复杂度的同时，还避免了传统模式中，每次切换内容都要重新加载内容、重新渲染界面的弊端。

Claims (7)

1.一种基于B/S架构的网页页面显示方法，其特征在于：包括以下步骤：
步骤一，在网页浏览器中获得用户指令；
步骤二，根据所述用户指令，可在一个页面内同时打开多个主窗口，并可任意调整所述多个主窗口的大小或位置，使多个主窗口平铺于一个页面内。
2.根据权利要求1所述的基于B/S架构的网页页面显示方法，其特征在于：可对所述步骤二中多个主窗口执行最大化、最小化和关闭的操作。
3.根据权利要求1所述的基于B/S架构的网页页面显示方法，其特征在于：所述主窗口中还设有面板图标区，所述面板栏图标区中包含多个面板图标及其文字说明，用户可通过点击或触摸相应的图标及文字说明来激活一个面板，激活的面板的内容将显示在当前主窗口中的面板内容区内。
4.根据权利要求3所述的基于B/S架构的网页页面显示方法，其特征在于：所述主窗口中还设有隐藏按钮，用于隐藏所述面板图标区；所述面板图标区隐藏后形成面板侧边栏；点击所述面板侧边栏，弹出临时面板图标区；所述面板侧边栏上还设有展开按钮，点击展开按钮，恢复面板图标区。
5.根据权利要求3所述的基于B/S架构的网页页面显示方法，其特征在于：所述主窗口中的面板内容区内，还包含多个属性页，用户通过点击或触摸相应的标签来激活一个属性页,激活的属性页内容将显示在当前属性页标签下。
6.根据权利要求1所述的基于B/S架构的网页页面显示方法，其特征在于：每个打开的主窗口在页面底部均设有栏目模块，点击栏目模块就弹出相应的主窗口至最外层。
7.一种基于B/S架构的网页页面显示终端，其特征在于：包括多个控件和布局容器；所述布局容器对位于其中的多个控件进行统一排布；所述布局容器可相互嵌套；每个控件均带有四周边距、纵向最小尺寸、纵向最大尺寸、横向最小尺寸、横向最大尺寸、纵向弹性系数、横向弹性系数以及对齐方式的布局属性。
CN201410142842.0A 2014-04-10 2014-04-10 基于b/s架构的网页页面显示方法及终端 Active CN103902722B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410142842.0A CN103902722B (zh) 2014-04-10 2014-04-10 基于b/s架构的网页页面显示方法及终端

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410142842.0A CN103902722B (zh) 2014-04-10 2014-04-10 基于b/s架构的网页页面显示方法及终端

Publications (2)

Publication Number Publication Date
CN103902722A true CN103902722A (zh) 2014-07-02
CN103902722B CN103902722B (zh) 2018-01-12

Family

ID=50994044

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410142842.0A Active CN103902722B (zh) 2014-04-10 2014-04-10 基于b/s架构的网页页面显示方法及终端

Country Status (1)

Country Link
CN (1) CN103902722B (zh)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104615744A (zh) * 2015-02-12 2015-05-13 姚林 显示屏下单一浏览器界面多窗口同时浏览的方法
CN105512345A (zh) * 2016-01-27 2016-04-20 贾占利 搜索引擎、搜索方法及基于两种或两种以上搜索页面同时显示的制作方法
CN105511855A (zh) * 2015-11-26 2016-04-20 贾占利 一种由框架组成的网页及制作方法、装置及其显示方法
CN107133046A (zh) * 2017-05-11 2017-09-05 武汉斗鱼网络科技有限公司 页面搭建方法、装置和电子终端
CN108052662A (zh) * 2017-12-29 2018-05-18 上海器魂智能科技有限公司 基于网页的组件布局方法、装置、设备及存储介质
CN108469972A (zh) * 2017-02-20 2018-08-31 阿里巴巴集团控股有限公司 支持web页面中显示多窗口的方法和装置
CN109271603A (zh) * 2018-09-19 2019-01-25 上海连尚网络科技有限公司 用于展示页面的方法和设备
CN110765208A (zh) * 2019-10-22 2020-02-07 成都知道创宇信息技术有限公司 一种数据同步方法、装置、电子设备及存储介质

Citations (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1996285A (zh) * 2006-01-06 2007-07-11 胡擘 一种网页浏览器网中的窗口***
CN101075174A (zh) * 2007-06-15 2007-11-21 魏新成 通过电脑屏幕左边缘的扩展任务栏进行功能操作的方法
CN101140516A (zh) * 2007-10-22 2008-03-12 金蝶软件（中国）有限公司 一种动态布局界面元素的方法和***
CN101606124A (zh) * 2007-01-25 2009-12-16 夏普株式会社 多窗口管理装置及程序、存储介质及信息处理装置
CN101894168A (zh) * 2010-06-30 2010-11-24 优视科技有限公司 移动终端网页页面的排版显示方法及***
CN102033943A (zh) * 2010-12-21 2011-04-27 广州市动景计算机科技有限公司 基于移动通讯设备终端的多窗口浏览方法及其***
CN102830972A (zh) * 2012-08-14 2012-12-19 管重 互联网浏览器的多网页浏览装置
CN102929603A (zh) * 2012-09-28 2013-02-13 用友软件股份有限公司 界面控件布局装置和界面控件布局方法
US20130205194A1 (en) * 2012-02-05 2013-08-08 Apple Inc. Navigating among content items in a browser using an array mode
CN103279518A (zh) * 2013-05-27 2013-09-04 中山爱科数字科技股份有限公司 一种浏览器
CN103309659A (zh) * 2013-05-24 2013-09-18 天津市天安怡和信息技术有限公司 基于富客户端的用户界面动态生成方法及其生成装置
CN103488389A (zh) * 2013-07-05 2014-01-01 贝壳网际（北京）安全技术有限公司 一种页面显示方法、装置和浏览器装置
CN103677538A (zh) * 2012-09-07 2014-03-26 腾讯科技（深圳）有限公司 多窗口显示方法及装置

Patent Citations (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1996285A (zh) * 2006-01-06 2007-07-11 胡擘 一种网页浏览器网中的窗口***
CN101606124A (zh) * 2007-01-25 2009-12-16 夏普株式会社 多窗口管理装置及程序、存储介质及信息处理装置
CN101075174A (zh) * 2007-06-15 2007-11-21 魏新成 通过电脑屏幕左边缘的扩展任务栏进行功能操作的方法
CN101140516A (zh) * 2007-10-22 2008-03-12 金蝶软件（中国）有限公司 一种动态布局界面元素的方法和***
CN101894168A (zh) * 2010-06-30 2010-11-24 优视科技有限公司 移动终端网页页面的排版显示方法及***
CN102033943A (zh) * 2010-12-21 2011-04-27 广州市动景计算机科技有限公司 基于移动通讯设备终端的多窗口浏览方法及其***
US20130205194A1 (en) * 2012-02-05 2013-08-08 Apple Inc. Navigating among content items in a browser using an array mode
CN102830972A (zh) * 2012-08-14 2012-12-19 管重 互联网浏览器的多网页浏览装置
CN103677538A (zh) * 2012-09-07 2014-03-26 腾讯科技（深圳）有限公司 多窗口显示方法及装置
CN102929603A (zh) * 2012-09-28 2013-02-13 用友软件股份有限公司 界面控件布局装置和界面控件布局方法
CN103309659A (zh) * 2013-05-24 2013-09-18 天津市天安怡和信息技术有限公司 基于富客户端的用户界面动态生成方法及其生成装置
CN103279518A (zh) * 2013-05-27 2013-09-04 中山爱科数字科技股份有限公司 一种浏览器
CN103488389A (zh) * 2013-07-05 2014-01-01 贝壳网际（北京）安全技术有限公司 一种页面显示方法、装置和浏览器装置

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104615744A (zh) * 2015-02-12 2015-05-13 姚林 显示屏下单一浏览器界面多窗口同时浏览的方法
CN105511855A (zh) * 2015-11-26 2016-04-20 贾占利 一种由框架组成的网页及制作方法、装置及其显示方法
CN105512345A (zh) * 2016-01-27 2016-04-20 贾占利 搜索引擎、搜索方法及基于两种或两种以上搜索页面同时显示的制作方法
CN108469972A (zh) * 2017-02-20 2018-08-31 阿里巴巴集团控股有限公司 支持web页面中显示多窗口的方法和装置
CN108469972B (zh) * 2017-02-20 2021-09-24 阿里巴巴集团控股有限公司 支持web页面中显示多窗口的方法和装置
CN107133046A (zh) * 2017-05-11 2017-09-05 武汉斗鱼网络科技有限公司 页面搭建方法、装置和电子终端
CN107133046B (zh) * 2017-05-11 2021-02-02 武汉斗鱼网络科技有限公司 页面搭建方法、装置和电子终端
CN108052662A (zh) * 2017-12-29 2018-05-18 上海器魂智能科技有限公司 基于网页的组件布局方法、装置、设备及存储介质
CN108052662B (zh) * 2017-12-29 2021-11-09 上海器魂智能科技有限公司 基于网页的组件布局方法、装置、设备及存储介质
CN109271603A (zh) * 2018-09-19 2019-01-25 上海连尚网络科技有限公司 用于展示页面的方法和设备
CN110765208A (zh) * 2019-10-22 2020-02-07 成都知道创宇信息技术有限公司 一种数据同步方法、装置、电子设备及存储介质
CN110765208B (zh) * 2019-10-22 2022-09-20 成都知道创宇信息技术有限公司 一种数据同步方法、装置、电子设备及存储介质

Also Published As

Publication number Publication date
CN103902722B (zh) 2018-01-12

Similar Documents

Publication Publication Date Title
CN103902722A (zh) 基于b/s架构的网页页面显示方法及终端
US10691331B2 (en) Native overlay for rapid editing of web content
US9063757B2 (en) Interactive application assistance, such as for web applications
US8930847B2 (en) Method for displaying windows
US8751945B1 (en) Environment for responsive graphical designs
US10048847B2 (en) Intelligent window sizing and control
CN107272994A (zh) 视窗切换界面
CN104636120A (zh) 一种浏览器的多窗口显示方法及装置
WO2018000626A1 (zh) 基于电视机的网页浏览控制方法及相关装置
US9946806B2 (en) Exporting responsive designs from a graphical design tool
CN103019516A (zh) 用于显示页面的方法和设备
CN102736903A (zh) 一种基于智能终端桌面管理微件的方法及装置
CN107728905A (zh) 一种弹幕显示方法、装置及存储介质
CN104239062A (zh) 基于客户端的多种类型标签页显示方法及其***
CN103870123A (zh) 一种信息处理方法及电子设备
CN103034410A (zh) 页面显示的方法及设备
CN104102495A (zh) 一种窗口显示方法和装置
CN107491502A (zh) 一种选择词条的方法及终端
JP4847991B2 (ja) 情報処理装置、方法、プログラムシステム及びサーバコンピュータ
CN108399058A (zh) 一种信号显示控制方法及装置
CN112346610A (zh) 多层级可选项选择组件的实现方法、电子设备及存储介质
CN106534732A (zh) 一种应用于数字电视树形导航菜单的设计方法
CN103577057A (zh) 一种在终端上横向布局列表部件的方法及装置
CN102999598A (zh) 改变网页中的内容的显示状态的方法及设备
CN102760159B (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
GR01 Patent grant
GR01 Patent grant