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

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

Info

Publication number
CN103902722B
CN103902722B CN201410142842.0A CN201410142842A CN103902722B CN 103902722 B CN103902722 B CN 103902722B CN 201410142842 A CN201410142842 A CN 201410142842A CN 103902722 B CN103902722 B CN 103902722B
Authority
CN
China
Prior art keywords
panel
main window
frameworks
page
display methods
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.)
Active
Application number
CN201410142842.0A
Other languages
English (en)
Other versions
CN103902722A (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

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 (5)

1.一种基于B/S架构的网页页面显示方法，其特征在于：包括以下步骤：
步骤一，在网页浏览器中获得用户指令；
步骤二，根据所述用户指令，可在一个页面内同时打开多个主窗口，并可任意调整所述多个主窗口的大小或位置，使多个主窗口平铺于一个页面内，即根据用户点击网页上显示的主窗口图标或者其对应的文字指令，即可打开主窗口，可以同时点击多个主窗口图标来打开多个主窗口，并根据用户需求调整主窗口的大小和位置，使多个主窗口以相互层叠、纵向平铺、横向平铺或纵向横向结合平铺的形式同时显示在在一个页面上；
所述主窗口中还设有面板图标区，所述面板图标区中包含多个面板图标及其文字说明，用户可通过点击或触摸相应的图标及文字说明来激活一个面板，激活的面板的内容将显示在当前主窗口中的面板内容区内；
所述主窗口中的面板内容区内，还包含多个属性页，用户通过点击或触摸相应的标签来激活一个属性页， 激活的属性页内容将显示在当前属性页标签下。
2.根据权利要求1所述的基于B/S架构的网页页面显示方法，其特征在于：可对所述步骤二中多个主窗口执行最大化、最小化和关闭的操作。
3.根据权利要求1所述的基于B/S架构的网页页面显示方法，其特征在于：所述主窗口中还设有隐藏按钮，用于隐藏所述面板图标区；所述面板图标区隐藏后形成面板侧边栏；点击所述面板侧边栏，弹出临时面板图标区；所述面板侧边栏上还设有展开按钮，点击展开按钮，恢复面板图标区。
4.根据权利要求1所述的基于B/S架构的网页页面显示方法，其特征在于：每个打开的主窗口在页面底部均设有栏目模块，点击栏目模块就弹出相应的主窗口至最外层。
5.根据权利要求1至4中任意一项权利要求所述的基于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 CN103902722A (zh) 2014-07-02
CN103902722B true 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)

Families Citing this family (8)

* 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 贾占利 搜索引擎、搜索方法及基于两种或两种以上搜索页面同时显示的制作方法
CN108469972B (zh) * 2017-02-20 2021-09-24 阿里巴巴集团控股有限公司 支持web页面中显示多窗口的方法和装置
CN107133046B (zh) * 2017-05-11 2021-02-02 武汉斗鱼网络科技有限公司 页面搭建方法、装置和电子终端
CN108052662B (zh) * 2017-12-29 2021-11-09 上海器魂智能科技有限公司 基于网页的组件布局方法、装置、设备及存储介质
CN109271603B (zh) * 2018-09-19 2022-07-22 上海尚往网络科技有限公司 用于展示页面的方法和设备
CN110765208B (zh) * 2019-10-22 2022-09-20 成都知道创宇信息技术有限公司 一种数据同步方法、装置、电子设备及存储介质

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101140516A (zh) * 2007-10-22 2008-03-12 金蝶软件（中国）有限公司 一种动态布局界面元素的方法和系统
CN101894168A (zh) * 2010-06-30 2010-11-24 优视科技有限公司 移动终端网页页面的排版显示方法及系统
CN102830972A (zh) * 2012-08-14 2012-12-19 管重 互联网浏览器的多网页浏览装置
CN102929603A (zh) * 2012-09-28 2013-02-13 用友软件股份有限公司 界面控件布局装置和界面控件布局方法
CN103309659A (zh) * 2013-05-24 2013-09-18 天津市天安怡和信息技术有限公司 基于富客户端的用户界面动态生成方法及其生成装置
CN103488389A (zh) * 2013-07-05 2014-01-01 贝壳网际（北京）安全技术有限公司 一种页面显示方法、装置和浏览器装置
CN103677538A (zh) * 2012-09-07 2014-03-26 腾讯科技（深圳）有限公司 多窗口显示方法及装置

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1996285A (zh) * 2006-01-06 2007-07-11 胡擘 一种网页浏览器网中的窗口系统
US8549429B2 (en) * 2007-01-25 2013-10-01 Sharp Kabushiki Kaisha Multi-window management apparatus and program, storage medium and information processing apparatus
CN101075174A (zh) * 2007-06-15 2007-11-21 魏新成 通过电脑屏幕左边缘的扩展任务栏进行功能操作的方法
CN102033943B (zh) * 2010-12-21 2012-11-14 广州市动景计算机科技有限公司 基于移动通讯设备终端的多窗口浏览方法及其系统
US9477642B2 (en) * 2012-02-05 2016-10-25 Apple Inc. Gesture-based navigation among content items
CN103279518A (zh) * 2013-05-27 2013-09-04 中山爱科数字科技股份有限公司 一种浏览器

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101140516A (zh) * 2007-10-22 2008-03-12 金蝶软件（中国）有限公司 一种动态布局界面元素的方法和系统
CN101894168A (zh) * 2010-06-30 2010-11-24 优视科技有限公司 移动终端网页页面的排版显示方法及系统
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 天津市天安怡和信息技术有限公司 基于富客户端的用户界面动态生成方法及其生成装置
CN103488389A (zh) * 2013-07-05 2014-01-01 贝壳网际（北京）安全技术有限公司 一种页面显示方法、装置和浏览器装置

Also Published As

Publication number Publication date
CN103902722A (zh) 2014-07-02

Similar Documents

Publication Publication Date Title
CN103902722B (zh) 基于b/s架构的网页页面显示方法及终端
CN105740315B (zh) 一种多种屏幕响应式网页布局调整的方法
US9389759B2 (en) Environment for responsive graphical designs
CN104636120A (zh) 一种浏览器的多窗口显示方法及装置
US8930847B2 (en) Method for displaying windows
CN104267854B (zh) 触摸屏终端的控制方法和装置
CN104123078B (zh) 输入信息的方法和设备
CN103309555B (zh) 基于多窗口的焦点切换的方法及装置
CN103473016B (zh) 多窗口显示方法及触控终端
CN102799692B (zh) 一种网页页面的显示方法及终端
CN103677507B (zh) 一种显示终端及界面窗口显示方法
CN102830972A (zh) 互联网浏览器的多网页浏览装置
CN104317474A (zh) 窗口切换方法及装置
JP2009532755A5 (zh)
KR20170135956A (ko) 인스턴트 메시징 창을 표시하기 위한 방법 및 장치 및 컴퓨터 판독 가능 매체
CN103729106A (zh) 网页缩略图展示方法和装置
CN103543996A (zh) 一种浏览器窗口管理方法及装置
CN105917298A (zh) 显示控制方法和显示控制装置
CN103631475A (zh) 切换窗口的方法和装置
CN104239062A (zh) 基于客户端的多种类型标签页显示方法及其系统
CN105868418B (zh) 一种视频显示方法及装置
CN104281399B (zh) 依据手势翻译对应目标文字的系统及其方法
CN103793512A (zh) 通过单窗口链接网页浏览器浏览网页的系统和方法
CN105578294B (zh) 浏览切换处理方法、装置及系统
CN106155462A (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