可收缩的web系统界面框架设计的制作方法
【专利摘要】本发明是一种WEB应用框架，包括界面设计和界面控制两个部分。界面主体包括上、左和右三个部分，其中上主要为系统操作，左为功能选择，右为系统主要功能展示区域；界面控制部分主要为实现界面上的点击响应，界面区域的隐藏和界面功能模块的载入。其中上区域为系统按钮区域，可以同时显示客户定制的图片或者广告，系统按钮包含控制面板、打印、刷新和退出系统功能；左区域显示功能选择，功能可以分为大类，每个大类可以定义若干功能，使用滑块形式显示，点击后在右区域显示功能界面。
【专利说明】可收缩的WEB系统界面框架设计
【技术领域】
[0001]本发明涉及电子信息技术中的软件产品界面设计和实现，特别是指基于浏览器的WEB系统界面的设计和实现。
【背景技术】
[0002]在浏览器型号和版本非常混杂的今天，基于WEB的应用在界面上也遇到很大的挑战。当前，互联网软件厂商的竞争和各种新技术兴起，旧的技术又没有退出历史舞台，例如IE浏览器的各种版本同时在使用，国内用户终端上从IE6到IE9都有不同比例的用户，而IE浏览器在IE7、IE9都进行许多重大的改变，一些曾经的技术被淘汰，新的方法被应用；同时不同厂商的浏览器选择支持不同的WEB页面布局内核,例如Firefox、Chrome、Safari都有不同于IE的内核，使得我们在IE上测试过的WEB系统又遇到新的挑战，甚至有时候辛苦开发的功能因为不能适应用户的浏览器而不得不放弃。WEB应用的界面既要符合产品功能和美观的需要，又要能同时适应多种版本的浏览器，还要操作方便有特色。
【发明内容】
[0003]本发明是一种WEB应用框架，包括界面设计和界面控制两个部分。界面主体包括上、左和右三个部分，其中上主要为系统操作，左为功能选择，右为系统主要功能展示区域；界面控制部分主要为实现界面上的点击响应，界面区域的隐藏和界面功能模块的载入。
[0004]其中界面部分包含以下特点:
1.上区域为系统按钮区域，可以同时显示客户定制的图片或者广告，系统按钮包含控制面板、打印、刷新和退出系统功能。其中:
a)区域左边可以显示产品的名称图标和名称标题，也可以定制为客户想要显示的图片，只要安装系统说明的大小定制和替换图片即可实现显示内容的切换。
[0005]b)区域的右边为按钮排列区，可以根据需要放置和删除图标，系统中内置了部分图标，包括:控制面板、打印、刷新、退出、帮助。
[0006]1.其中每个图标都包括两个切换的图片，当鼠标悬停或经过的时候显示为显眼的图标，鼠标离开时恢复为原来的图标。
[0007]i1.其中控制面板按钮在点击时会弹出一个时间和管理对象范围选择对话框，可以在这个对话框中选择全局数据的时间和对象范围。该选择作用于接下来的所有功能模块。
[0008]ii1.其中打印按钮点击后弹出系统打印对话框，提示对当前功能页的打印设置，一旦选择设置后确定就打印当前功能页。
[0009]iv.其中刷新按钮点击后会重新加载当前的功能页面，刷新时重新发送当前已设定的参数。
[0010]V.其中帮助按钮点击后会在功能区域显示当前系统的帮助主页。
[0011]v1.其中退出按钮点击后后会弹出对话框提示是否确认，如果选择“确定”，会退出当前系统回到登录页；如果选择“取消”，会关闭对话框，什么也不操作。
[0012]2.左区域显示功能选择，功能可以分为大类，每个大类可以定义若干功能，使用滑块形式显示，点击后在右区域显示功能界面。其中:
a)大类显不为按钮，大类按次序排列，同一时刻只有一个大类的功能列表会被显不；即当点击一个关闭的大类按钮的时候，会关闭当前打开的列表，显示点击的大类的功能列表。
[0013]b)功能属于各自的大类，显示为文本，可以加图标。
[0014]c)点击功能名称,会在功能区域打开对应的功能。
[0015]3.其中上、左区域可以点击收缩按钮收缩到浏览器边框中，同时功能区域扩大到整个浏览器；同时收缩按钮变为弹出按钮；点击弹出按钮，收缩的区域重新回到原始位置。
[0016]4.其中上、左区域能够自动使用计算机屏幕的大小，显示为上下、左右铺满的界面。
[0017]5.中间部分为功能区域，功能区域根据上区域和左区域的选择，显示功能模块内容。
[0018]6.上述特点支持现行的多种浏览器，至少包括IE的各版本、Firefox、Chrome、Safari0
[0019]其中界面控制部分包含以下特点:
1.控制面板作用域控制，控制面板设定的参数为全局参数，可以在每个功能中直接调用。
[0020]2.程序界面风格控制，风格控制主要包含在CSS文件中，可以通过修改CSS文件，直接修改系统的界面风格，修改这些风格无需进行源代码开发，可以直接有界面设计人员完成。
[0021]3.功能模块显示控制，支持根据系统的需要控制要显示模块分类和功能模块。
[0022]4.支持根据不同的用户权限显示功能分类和模块分类，不同用户看到的同一功能分类的模块也可以不同。
[0023]5.如果该功能分类下面的所有模块都不被显示，该分类也会自动隐藏不显示。
[0024]6.支持用户设置每页的数据条数，支持设定默认显示的条数，和点击更多后显示的条数。
[0025]7.可以自定义系统所有者信息，系统所有者信息会显示在功能模块的下方。
【专利附图】
【附图说明】
[0026]附图1:本发明的界面框架示意图。
[0027]附图2:本发明的控制面板对话框示意图。
[0028]附图3:本发明的组件图。
[0029]附图4:本发明的控制结构示意图。
[0030]
【具体实施方式】
[0031]本发明可以按照如下步骤实施: 1.制作系统的标题图片，根据系统说明的标题图片大小，制作同样大小的图片，放到规定的路径，替换系统默认的图片文件。也可以使用默认的图片。
[0032]2.制作控制按钮图片，每个按钮做两个图片，比如一明一暗两个，按照系统的命名方式替换原来的图片即可。也可以使用默认的图片。
[0033]3.定制功能模块分类和模块列表。
[0034]4.设置CSS风格样式表,可以直接修改样式表文件,或者使用Dreamwaver编辑器编辑。
[0035]5.设置使用者信息，直接使用文本编辑器打开文件编辑内容。
[0036]6.部署本发明到IIS或者Apache中，然后使用浏览器访问。
【权利要求】
1.一种WEB系统界面，包括界面设计和界面控制两个部分，其中界面部分包括:标题和控制按钮区域，用来显示标题和控制按钮，位于界面的最上部；上部区域控制按钮，用来控制上部区域的显示和隐藏；功能模块显示区域，用来显示功能模块列表，其中的功能模块由后台设置和用户权限控制，位于界面的左部；左部区域控制按钮，用来控制左部区域的显示和隐藏；功能显示区域，用来显示功能模块的内容，占界面的绝大部分，是界面的主体部分，界面控制部分包括:控制面板，用于设定全局的对象范围和时间范围；界面风格控制文件，用于设定全局的界面风格，至少包括颜色、字体、表格；功能模块显示控制，用来响应界面的点击，打开和隐藏功能列表；打印响应，用来调用页面打印；刷新响应，用来刷新功能页面；退出响应，响应退出按钮事件，提示用户是否真的退出。
2.根据权利要求1所述的WEB系统界面，其特征在于:界面的上部和左部可以根据需要隐藏起来，把浏览器区域都留给功能模块显示使用，隐藏的区域随时可以打开恢复原始效果。
3.根据权利要求1所述的WEB系统界面，其特征在于:上部的标题图片可以使用同名的图片的替换。
4.根据权利要求3所述的图片，进一步的特征在于:可以使用后台程序控制输出的图片，比如可以在这个位置做广告图片显示。
5.根据权利要求1所述的WEB系统界面，其特征在于:控制按钮在鼠标经过时会显示动画效果，鼠标移开后恢复原状。
6.根据权利要求1所述的WEB系统界面，其特征在于:点击退出按钮时，会弹出确认对话框，提示用户是否真的退出，用户可以点击确定退出，或者点击取消回到系统。
7.根据权利要求1所述的WEB系统界面，其特征在于:左部的功能模块显示能够根据设置和用户权限的不同而不同，没有模块列表的功能分类会自动隐藏。
8.根据权利要求1所述的WEB系统界面，其特征在于:无论是点击上部按钮和左部的模块，其作用域都是功能区域。
9.根据权利要求1所述的WEB系统界面，其特征在于:使用者可以定义功能域页面下方的所有者提示信息，这只需要修改配置文件即可。
10.根据权利要求1所述的WEB系统界面，其特征在于:使用者只需要修改CSS文件就可以修改界面的颜色、字体、表格样式，无需程序设计。
11.根据权利要求1所述的WEB系统界面，其特征在于:其打印响应仅打印主功能区域的内容，不打印框架的内容。
12.根据权利要求1所述的WEB系统界面，其特征在于:刷新响应只刷新主功能区域。
13.根据权利要求1至8所述的WEB系统界面，其特征在于:这些特征都可以在现有的流行浏览器上实现，所述的浏览器至少包括:IE6至IE9、Firefox、Chrome、Safari。
【文档编号】G06F9/44GK104182212SQ201310199642
【公开日】2014年12月3日 申请日期:2013年5月27日 优先权日:2013年5月27日
【发明者】王国良 申请人:北京蓝太平洋科技开发有限公司