可收縮的web系統(tǒng)界面框架設(shè)計(jì)的制作方法
【專利摘要】本發(fā)明是一種WEB應(yīng)用框架，包括界面設(shè)計(jì)和界面控制兩個(gè)部分。界面主體包括上、左和右三個(gè)部分，其中上主要為系統(tǒng)操作，左為功能選擇，右為系統(tǒng)主要功能展示區(qū)域；界面控制部分主要為實(shí)現(xiàn)界面上的點(diǎn)擊響應(yīng)，界面區(qū)域的隱藏和界面功能模塊的載入。其中上區(qū)域?yàn)橄到y(tǒng)按鈕區(qū)域，可以同時(shí)顯示客戶定制的圖片或者廣告，系統(tǒng)按鈕包含控制面板、打印、刷新和退出系統(tǒng)功能；左區(qū)域顯示功能選擇，功能可以分為大類，每個(gè)大類可以定義若干功能，使用滑塊形式顯示，點(diǎn)擊后在右區(qū)域顯示功能界面。
【專利說明】可收縮的WEB系統(tǒng)界面框架設(shè)計(jì)

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及電子信息技術(shù)中的軟件產(chǎn)品界面設(shè)計(jì)和實(shí)現(xiàn)，特別是指基于瀏覽器的WEB系統(tǒng)界面的設(shè)計(jì)和實(shí)現(xiàn)。

【背景技術(shù)】
[0002]在瀏覽器型號(hào)和版本非?；祀s的今天，基于WEB的應(yīng)用在界面上也遇到很大的挑戰(zhàn)。當(dāng)前，互聯(lián)網(wǎng)軟件廠商的競(jìng)爭(zhēng)和各種新技術(shù)興起，舊的技術(shù)又沒有退出歷史舞臺(tái)，例如IE瀏覽器的各種版本同時(shí)在使用，國(guó)內(nèi)用戶終端上從IE6到IE9都有不同比例的用戶，而IE瀏覽器在IE7、IE9都進(jìn)行許多重大的改變，一些曾經(jīng)的技術(shù)被淘汰，新的方法被應(yīng)用；同時(shí)不同廠商的瀏覽器選擇支持不同的WEB頁(yè)面布局內(nèi)核,例如Firefox、Chrome、Safari都有不同于IE的內(nèi)核，使得我們?cè)贗E上測(cè)試過的WEB系統(tǒng)又遇到新的挑戰(zhàn)，甚至有時(shí)候辛苦開發(fā)的功能因?yàn)椴荒苓m應(yīng)用戶的瀏覽器而不得不放棄。WEB應(yīng)用的界面既要符合產(chǎn)品功能和美觀的需要，又要能同時(shí)適應(yīng)多種版本的瀏覽器，還要操作方便有特色。


【發(fā)明內(nèi)容】

[0003]本發(fā)明是一種WEB應(yīng)用框架，包括界面設(shè)計(jì)和界面控制兩個(gè)部分。界面主體包括上、左和右三個(gè)部分，其中上主要為系統(tǒng)操作，左為功能選擇，右為系統(tǒng)主要功能展示區(qū)域；界面控制部分主要為實(shí)現(xiàn)界面上的點(diǎn)擊響應(yīng)，界面區(qū)域的隱藏和界面功能模塊的載入。
[0004]其中界面部分包含以下特點(diǎn):
1.上區(qū)域?yàn)橄到y(tǒng)按鈕區(qū)域，可以同時(shí)顯示客戶定制的圖片或者廣告，系統(tǒng)按鈕包含控制面板、打印、刷新和退出系統(tǒng)功能。其中:
a)區(qū)域左邊可以顯示產(chǎn)品的名稱圖標(biāo)和名稱標(biāo)題，也可以定制為客戶想要顯示的圖片，只要安裝系統(tǒng)說明的大小定制和替換圖片即可實(shí)現(xiàn)顯示內(nèi)容的切換。
[0005]b)區(qū)域的右邊為按鈕排列區(qū)，可以根據(jù)需要放置和刪除圖標(biāo)，系統(tǒng)中內(nèi)置了部分圖標(biāo)，包括:控制面板、打印、刷新、退出、幫助。
[0006]1.其中每個(gè)圖標(biāo)都包括兩個(gè)切換的圖片，當(dāng)鼠標(biāo)懸?；蚪?jīng)過的時(shí)候顯示為顯眼的圖標(biāo)，鼠標(biāo)離開時(shí)恢復(fù)為原來的圖標(biāo)。
[0007]i1.其中控制面板按鈕在點(diǎn)擊時(shí)會(huì)彈出一個(gè)時(shí)間和管理對(duì)象范圍選擇對(duì)話框，可以在這個(gè)對(duì)話框中選擇全局?jǐn)?shù)據(jù)的時(shí)間和對(duì)象范圍。該選擇作用于接下來的所有功能模塊。
[0008]ii1.其中打印按鈕點(diǎn)擊后彈出系統(tǒng)打印對(duì)話框，提示對(duì)當(dāng)前功能頁(yè)的打印設(shè)置，一旦選擇設(shè)置后確定就打印當(dāng)前功能頁(yè)。
[0009]iv.其中刷新按鈕點(diǎn)擊后會(huì)重新加載當(dāng)前的功能頁(yè)面，刷新時(shí)重新發(fā)送當(dāng)前已設(shè)定的參數(shù)。
[0010]V.其中幫助按鈕點(diǎn)擊后會(huì)在功能區(qū)域顯示當(dāng)前系統(tǒng)的幫助主頁(yè)。
[0011]v1.其中退出按鈕點(diǎn)擊后后會(huì)彈出對(duì)話框提示是否確認(rèn)，如果選擇“確定”，會(huì)退出當(dāng)前系統(tǒng)回到登錄頁(yè)；如果選擇“取消”，會(huì)關(guān)閉對(duì)話框，什么也不操作。
[0012]2.左區(qū)域顯示功能選擇，功能可以分為大類，每個(gè)大類可以定義若干功能，使用滑塊形式顯示，點(diǎn)擊后在右區(qū)域顯示功能界面。其中:
a)大類顯不為按鈕，大類按次序排列，同一時(shí)刻只有一個(gè)大類的功能列表會(huì)被顯不；即當(dāng)點(diǎn)擊一個(gè)關(guān)閉的大類按鈕的時(shí)候，會(huì)關(guān)閉當(dāng)前打開的列表，顯示點(diǎn)擊的大類的功能列表。
[0013]b)功能屬于各自的大類，顯示為文本，可以加圖標(biāo)。
[0014]c)點(diǎn)擊功能名稱,會(huì)在功能區(qū)域打開對(duì)應(yīng)的功能。
[0015]3.其中上、左區(qū)域可以點(diǎn)擊收縮按鈕收縮到瀏覽器邊框中，同時(shí)功能區(qū)域擴(kuò)大到整個(gè)瀏覽器；同時(shí)收縮按鈕變?yōu)閺棾霭粹o；點(diǎn)擊彈出按鈕，收縮的區(qū)域重新回到原始位置。
[0016]4.其中上、左區(qū)域能夠自動(dòng)使用計(jì)算機(jī)屏幕的大小，顯示為上下、左右鋪滿的界面。
[0017]5.中間部分為功能區(qū)域，功能區(qū)域根據(jù)上區(qū)域和左區(qū)域的選擇，顯示功能模塊內(nèi)容。
[0018]6.上述特點(diǎn)支持現(xiàn)行的多種瀏覽器，至少包括IE的各版本、Firefox、Chrome、Safari0
[0019]其中界面控制部分包含以下特點(diǎn):
1.控制面板作用域控制，控制面板設(shè)定的參數(shù)為全局參數(shù)，可以在每個(gè)功能中直接調(diào)用。
[0020]2.程序界面風(fēng)格控制，風(fēng)格控制主要包含在CSS文件中，可以通過修改CSS文件，直接修改系統(tǒng)的界面風(fēng)格，修改這些風(fēng)格無需進(jìn)行源代碼開發(fā)，可以直接有界面設(shè)計(jì)人員完成。
[0021]3.功能模塊顯示控制，支持根據(jù)系統(tǒng)的需要控制要顯示模塊分類和功能模塊。
[0022]4.支持根據(jù)不同的用戶權(quán)限顯示功能分類和模塊分類，不同用戶看到的同一功能分類的模塊也可以不同。
[0023]5.如果該功能分類下面的所有模塊都不被顯示，該分類也會(huì)自動(dòng)隱藏不顯示。
[0024]6.支持用戶設(shè)置每頁(yè)的數(shù)據(jù)條數(shù)，支持設(shè)定默認(rèn)顯示的條數(shù)，和點(diǎn)擊更多后顯示的條數(shù)。
[0025]7.可以自定義系統(tǒng)所有者信息，系統(tǒng)所有者信息會(huì)顯示在功能模塊的下方。

【專利附圖】

【附圖說明】
[0026]附圖1:本發(fā)明的界面框架示意圖。
[0027]附圖2:本發(fā)明的控制面板對(duì)話框示意圖。
[0028]附圖3:本發(fā)明的組件圖。
[0029]附圖4:本發(fā)明的控制結(jié)構(gòu)示意圖。
[0030]

【具體實(shí)施方式】
[0031]本發(fā)明可以按照如下步驟實(shí)施: 1.制作系統(tǒng)的標(biāo)題圖片，根據(jù)系統(tǒng)說明的標(biāo)題圖片大小，制作同樣大小的圖片，放到規(guī)定的路徑，替換系統(tǒng)默認(rèn)的圖片文件。也可以使用默認(rèn)的圖片。
[0032]2.制作控制按鈕圖片，每個(gè)按鈕做兩個(gè)圖片，比如一明一暗兩個(gè)，按照系統(tǒng)的命名方式替換原來的圖片即可。也可以使用默認(rèn)的圖片。
[0033]3.定制功能模塊分類和模塊列表。
[0034]4.設(shè)置CSS風(fēng)格樣式表,可以直接修改樣式表文件,或者使用Dreamwaver編輯器編輯。
[0035]5.設(shè)置使用者信息，直接使用文本編輯器打開文件編輯內(nèi)容。
[0036]6.部署本發(fā)明到IIS或者Apache中，然后使用瀏覽器訪問。
【權(quán)利要求】
1.一種WEB系統(tǒng)界面，包括界面設(shè)計(jì)和界面控制兩個(gè)部分，其中界面部分包括:標(biāo)題和控制按鈕區(qū)域，用來顯示標(biāo)題和控制按鈕，位于界面的最上部；上部區(qū)域控制按鈕，用來控制上部區(qū)域的顯示和隱藏；功能模塊顯示區(qū)域，用來顯示功能模塊列表，其中的功能模塊由后臺(tái)設(shè)置和用戶權(quán)限控制，位于界面的左部；左部區(qū)域控制按鈕，用來控制左部區(qū)域的顯示和隱藏；功能顯示區(qū)域，用來顯示功能模塊的內(nèi)容，占界面的絕大部分，是界面的主體部分，界面控制部分包括:控制面板，用于設(shè)定全局的對(duì)象范圍和時(shí)間范圍；界面風(fēng)格控制文件，用于設(shè)定全局的界面風(fēng)格，至少包括顏色、字體、表格；功能模塊顯示控制，用來響應(yīng)界面的點(diǎn)擊，打開和隱藏功能列表；打印響應(yīng)，用來調(diào)用頁(yè)面打印；刷新響應(yīng)，用來刷新功能頁(yè)面；退出響應(yīng)，響應(yīng)退出按鈕事件，提示用戶是否真的退出。
2.根據(jù)權(quán)利要求1所述的WEB系統(tǒng)界面，其特征在于:界面的上部和左部可以根據(jù)需要隱藏起來，把瀏覽器區(qū)域都留給功能模塊顯示使用，隱藏的區(qū)域隨時(shí)可以打開恢復(fù)原始效果。
3.根據(jù)權(quán)利要求1所述的WEB系統(tǒng)界面，其特征在于:上部的標(biāo)題圖片可以使用同名的圖片的替換。
4.根據(jù)權(quán)利要求3所述的圖片，進(jìn)一步的特征在于:可以使用后臺(tái)程序控制輸出的圖片，比如可以在這個(gè)位置做廣告圖片顯示。
5.根據(jù)權(quán)利要求1所述的WEB系統(tǒng)界面，其特征在于:控制按鈕在鼠標(biāo)經(jīng)過時(shí)會(huì)顯示動(dòng)畫效果，鼠標(biāo)移開后恢復(fù)原狀。
6.根據(jù)權(quán)利要求1所述的WEB系統(tǒng)界面，其特征在于:點(diǎn)擊退出按鈕時(shí)，會(huì)彈出確認(rèn)對(duì)話框，提示用戶是否真的退出，用戶可以點(diǎn)擊確定退出，或者點(diǎn)擊取消回到系統(tǒng)。
7.根據(jù)權(quán)利要求1所述的WEB系統(tǒng)界面，其特征在于:左部的功能模塊顯示能夠根據(jù)設(shè)置和用戶權(quán)限的不同而不同，沒有模塊列表的功能分類會(huì)自動(dòng)隱藏。
8.根據(jù)權(quán)利要求1所述的WEB系統(tǒng)界面，其特征在于:無論是點(diǎn)擊上部按鈕和左部的模塊，其作用域都是功能區(qū)域。
9.根據(jù)權(quán)利要求1所述的WEB系統(tǒng)界面，其特征在于:使用者可以定義功能域頁(yè)面下方的所有者提示信息，這只需要修改配置文件即可。
10.根據(jù)權(quán)利要求1所述的WEB系統(tǒng)界面，其特征在于:使用者只需要修改CSS文件就可以修改界面的顏色、字體、表格樣式，無需程序設(shè)計(jì)。
11.根據(jù)權(quán)利要求1所述的WEB系統(tǒng)界面，其特征在于:其打印響應(yīng)僅打印主功能區(qū)域的內(nèi)容，不打印框架的內(nèi)容。
12.根據(jù)權(quán)利要求1所述的WEB系統(tǒng)界面，其特征在于:刷新響應(yīng)只刷新主功能區(qū)域。
13.根據(jù)權(quán)利要求1至8所述的WEB系統(tǒng)界面，其特征在于:這些特征都可以在現(xiàn)有的流行瀏覽器上實(shí)現(xiàn)，所述的瀏覽器至少包括:IE6至IE9、Firefox、Chrome、Safari。
【文檔編號(hào)】G06F9/44GK104182212SQ201310199642
【公開日】2014年12月3日 申請(qǐng)日期:2013年5月27日 優(yōu)先權(quán)日:2013年5月27日
【發(fā)明者】王國(guó)良 申請(qǐng)人:北京藍(lán)太平洋科技開發(fā)有限公司