專利名稱：一種web頁面布局的方法及系統(tǒng)的制作方法
技術領域：
本發(fā)明涉及頁面顯示技術，尤其是一種頁面布局的方法及系統(tǒng)。
背景技術：
一個Web頁面是由很多個HTML元素構成的，每個HTML元素展示在 計算機屏幕上時，都具有一個實際的物理尺寸，默認以像素(px)為單位。
在任何系統(tǒng)中，頁面布局都是一項重要的技術，好的布局可以使系統(tǒng)的 界面組織的更加合理，在Web系統(tǒng)中，通常使用面板方式來組織布局，所述 面板可以是一個層(DIV),也可以是一個表格(TABLE )等具有規(guī)則形狀(通 常為矩形)的元素，通過制這些元素的尺寸來調(diào)整頁面的布局。并且，制定
所謂絕對尺寸是指為元素的寬度或高度指定一個絕對的值。如圖l所示， 對于左邊的標題部分，可以指定為"寬度二80px",右邊的輸入框部分可以指 定為"寬度二200px"。
對于絕對尺寸而言，由于左邊標題指定寬度為80px,右邊輸入框部分指 定寬度為200px,因此，不論瀏覽器窗口如何改變大小，頁面中元素始終是不 動的，其變化結果如圖2所示。
所謂百分比尺寸是指為頁面中元素指定相對于元素父容器的百分比尺 寸。如圖3所示，該示例中以整個頁面作為父容器，將左邊的標題部分寬度 指定為30%,右邊的輸入框部分指定為70%,那么，隨著窗口的變化，頁面 元素也將根據(jù)百分比的規(guī)則發(fā)生變化，其變化結果如圖4所示。
圖5示出了一種典型應用中的頁面，整個頁面基本分為上中下三個元素， 分別是查詢條件區(qū)、查詢結果展示區(qū)、命令按鈕區(qū)。由于"查詢條件區(qū)" 和"命令按鈕區(qū)"，所包含的內(nèi)容是固定的；對于"查詢結果展示區(qū)域"，所 包含的內(nèi)容是動態(tài)的，是根據(jù)查詢條件查詢出來的結果集，取決于數(shù)據(jù)庫中的記錄數(shù)。
對于該頁面而言，本領域技術人員期望，無論瀏覽器窗口如何變化，查 詢條件區(qū)和命令按鈕區(qū)兩部分的高度都固定(例如檢索條件區(qū)高度為80px, 命令按鈕區(qū)高度為25px),并且中間的查詢結果展示區(qū)域盡量充滿頁面所顯示 的剩余空間。具體的，上述需求具體可理解為查詢條件區(qū)尺寸固定；查詢 結果展示區(qū)域的上邊緣緊貼查詢條件區(qū)的下邊緣；查詢結果展示區(qū)域的下邊 緣緊貼命令按鈕區(qū)的上邊緣；命令按鈕區(qū)的下邊緣緊貼頁面底部且尺寸固定。
發(fā)明人發(fā)現(xiàn)，對于上述需求，釆用絕對尺寸的方式可以實現(xiàn)對查詢條件 區(qū)和命令按鈕區(qū)的布局要求，即該兩個區(qū)域的尺寸固定不變。
然而，對于查詢結果展示區(qū)域而言，如果采用絕對尺寸的方式進行布局， 則無論窗口尺寸如何變化，查詢結果展示區(qū)域的尺寸都不會發(fā)生變化，不能 實現(xiàn)恰好填充所述剩余空間的目的；另一方面，如果采用百分比尺寸進行布 局的方式將查詢結果展示區(qū)域百分比設置為100%,則按照現(xiàn)有技術中瀏覽器 解釋百分比布局的原則，"查詢結果展示區(qū)域"的高度，將會被翻譯為整個頁 面的高度；進而，無論怎樣調(diào)整窗口大小，"查詢條件區(qū)尺寸與查詢結果展示 區(qū)域尺寸的和將超過瀏覽器窗口的尺寸，從而使得命令按鈕區(qū)會被擠壓到頁 面顯示的窗口之外，并且整個頁面都將會有一條滾動條。
綜上所述，采用現(xiàn)有的頁面布局方法無法滿足圖5所示頁面的需求。

發(fā)明內(nèi)容
本發(fā)明實施例目的在于提供一種WEB頁面布局方法。
本發(fā)明目的是通過以下實施例實現(xiàn)的。 一種WEB頁面布局方法，包括 獲取頁面布局命令，計算父容器絕對尺寸；遍歷所述父容器中的元素，獲取 具有第一標識的元素絕對尺寸的和；獲取所述父容器絕對尺寸與所述具有第 一標識的元素絕對尺寸的和的差值；按照具有第二標識的元素占所述差值的 百分比計算得到所述的具有第二標識的元素的絕對尺寸；根據(jù)具有第一標識 的元素的絕對尺寸以及具有第二標識的元素的絕對尺寸布局頁面。 本發(fā)明實施例另一目的在于"R供一種WEB頁面布局系統(tǒng)。 為解決上述技術問題，本發(fā)明的目的是通過以下技術方案實現(xiàn)的。 一種WEB頁面布局系統(tǒng)包括接收單元，用于獲取頁面布局命令；其中，查找單 元，用于遍歷父容器中的元素，獲取具有第一標識的元素，并觸發(fā)第一計算 單元；獲取具有第二標識的元素，通知第二計算單元；第一計算單元，用于 計算父容器絕對尺寸，獲取具有第一標識的元素絕對尺寸的和；對所述父容 器絕對尺寸與所述具有第一標識的元素絕對尺寸的和求差獲得差值；第二計 算單元，獲取所述差值，按照具有第二標識的元素占所述差值的百分比計算 得到所述的具有第二標識的元素的絕對尺寸；頁面布局單元，用于根據(jù)具有 第 一標識的元素的絕對尺寸以及具有第二標識的元素的絕對尺寸布局頁面。
以上技術方案可以看出，由于本發(fā)明實施例中對頁面元素進行了分類， 將具有固定尺寸以及根據(jù)瀏覽器大小進行變化的元素設置為一類，按照父容 器尺寸以及所述第一類元素(具有第一標識的元素)的尺寸確定(求差)作 為計算第二類元素(具有第二類標識的元素)尺寸大小的依據(jù)。使得第二類 元素能夠按要求盡量利用父容器的剩余空間，并且隨著父容器尺寸的變化而 變化，具有動態(tài)適應父容器尺寸變化的功能。
進一步，當?shù)诙愒爻叽缭O置為百分之百(相對于父容器與第一類元 素絕對尺寸和的差值)時，相對于現(xiàn)有技術，本發(fā)明實施例可以實現(xiàn)圖5所 示的場景，即無論瀏覽器尺寸如何變化，查詢結果展示區(qū)域都能夠充滿瀏覽 器中除查詢條件區(qū)和命令按鈕區(qū)之外的空間，提高頁面空間利用率，并同時 實現(xiàn)了動態(tài)適應瀏覽器尺寸變化的功能。
進一步，本發(fā)明實施例并不限制所述第二類元素的個數(shù)。然而，所述第 二類元素集合中的元素的屬性在于第二類要求按照預置的比例填充所述父 容器的剩余空間。
進一步，本發(fā)明實施例可以實現(xiàn)頁面的實時布局，即當瀏覽器尺寸改變 的過程中，系統(tǒng)周期性的觸發(fā)頁面布局命令，使得例如用戶拖動瀏覽器尺寸 變化的過程中能夠看到該變化過程中頁面布局的變化過程；或者，頁面布局 也可在瀏覽器尺寸再次被確定后，由用戶觸發(fā)頁面布局命令(如發(fā)起頁面刷 新)。


圖1為絕對尺寸布局方式下第一布局場景示意圖； 圖2為絕對尺寸布局方式下第二布局場景示意圖； 圖3為百分比布局方式下第一布局場景示意圖； 圖4為百分比布局方式下第二布局場景示意圖； 圖5為本發(fā)明實施例所要實現(xiàn)的一布局場景示意圖； 圖6為本發(fā)明實施例方法流程圖； 圖7為本發(fā)明實施例系統(tǒng)結果示意圖。
具體實施例方式
在HTML的頁面中，提供表格、層等布局元素的形狀都是矩形，對于通 常在網(wǎng)頁中看到的不規(guī)則形狀， 一般是圖像，或者使用JavaScript在頁面上繪 制出來的，不屬于本發(fā)明所述布局的范疇。
本發(fā)明實施例目的在于提供一種頁面布局的方法和系統(tǒng)。以實現(xiàn)對上述 元素頁面布局的目的，以下參照附圖對本發(fā)明實現(xiàn)方式進行具體說明。
本發(fā)明的頁面布局方法在于，在頁面布局命令的觸發(fā)下開始執(zhí)行頁面布 局的步驟，包括計算父容器絕對尺寸；遍歷所述父容器中的元素，獲取具 有第一標識的元素絕對尺寸的和；獲取所述父容器絕對尺寸與所述具有第一 標識的元素絕對尺寸的和的差值；按照具有第二標識的元素占所述差值的百 分比計算得到所述的具有第二標識的元素的絕對尺寸；根據(jù)具有第 一標識的 元素的絕對尺寸以及具有第二標識的元素的絕對尺寸布局頁面。
可見，本發(fā)明實施例中對頁面元素進行了分類，將具有固定尺寸以及根 據(jù)瀏覽器大小進行變化的元素設置為一類，按照父容器尺寸以及所述第一類 元素(具有第一標識的元素)的尺寸確定(求差)作為計算第二類元素(具 有第二類標識的元素)尺寸大小的依據(jù)。使得第二類元素能夠按要求盡量利 用父容器的剩余空間，并且隨著父容器尺寸的變化而變化，具有動態(tài)適應父 容器尺寸變化的功能。
以下結合附圖5所示的布局場景示意圖，說明本發(fā)明方法實施例的實現(xiàn) 方式。圖5所示布局場景的頁面分為上中下三個元素，分別是查詢條件區(qū)、
7查詢結果展示區(qū)、命令按鈕區(qū)；要求無論瀏覽器尺寸如何變化，所述查詢條
件區(qū)和命鈕按鈕區(qū)尺寸不變，而查詢結果展示區(qū)填充滿頁面中剩余的區(qū)域。
參見圖5所示的場景示意圖，所述瀏覽器即為上文所述父容器。進而， 為實現(xiàn)圖5所示的場景，將頁面中所述三個元素進行分類，將元素查詢條件 區(qū)和命令按鈕區(qū)作為第一類元素，在HTML中增加自定義屬性并釆用一定的 標識予以標記；將查詢結果展示區(qū)作為第二類元素，在HTML中增加自定義 屬性并采用一定的標識予以標記；由于要求查詢結果展示區(qū)填充滿頁面中剩 余的區(qū)域，因此第二類元素(即查詢結果展示區(qū))屬性中設置尺寸百分比參 數(shù)為100%。
以下實施例僅以改變?yōu)g覽器高度為例說明本發(fā)明的實現(xiàn)方式，其中定義 檢索條件區(qū)高度為80象素，命令按鈕區(qū)高度為25象素。本實施例流程圖參 見圖6。
步驟61:計算布局瀏覽器的客戶端高度(clientHeight)或客戶端寬度 (clientWidth);瀏覽器所瀏覽的Web頁面是由多個HTML元素構成的，每個 HTML元素展示在計算機屏幕上時，都具有一個實際的物理尺寸，clientHeight 與clientWidth所指的就是這個實際的物理尺寸，默認以像素為單位。大多數(shù) 的瀏覽器提供了計算這個物理尺寸的方法；本步驟中要最終獲取瀏覽器客戶 端高度的絕對尺寸。具體的，瀏覽器能夠解釋javascript腳本，javascript的執(zhí) 行過程由瀏覽器負責完成。瀏覽器會對腳本的含義做出處理，如在javascript 中，通過window.screen.with屬性即可得到當前瀏覽器窗口的客戶端寬度值。
步驟62:計算瀏覽器內(nèi)所有第一類元素的clientHeight或clientWidth并累加。
本發(fā)明實施例通過在HTML元素中增加自定義屬性的方式實現(xiàn)元素分類 的標識，所有的HTML標簽除了可以定義標準屬性外，都可以增加自定義的 屬性，只需要將自定義屬性寫在元素標簽內(nèi)即可。例如
<div id="layout" width=，，80px" custom="my-attribute"/>
其中id、 width是div標簽的標準屬性，custom是自定義的一個屬性， 值為 "my-attribute"。
8所有的HTML標簽的屬性(包括自定義的屬性)，都可以通過JavaScript 腳本獲取到元素的對象，然后調(diào)用其getAttribute('屬性名，)的方法來獲得，例 如，上面例子中的 custom 屬性的值，可以通過 document.getElementByld('layout，).getAttribute('custom,)方式獲得。
因此，按照上述方式遍歷父容器中的元素，按照自定義的屬性可查找到 標識為第一類的元素，具體到圖5所示的實施例為查詢條件區(qū)和命令按鈕區(qū)。
進而，獲取所述第一類元素的絕對尺寸。
一個HTML頁面是由很多個元素構成的，如〈HTML〉、 <BODY>、 <TABLE>、 〈DIV〉等，使用JavaScript腳本(JavaScript腳本由瀏覽器負責解 釋和執(zhí)行)可以與這些元素進行交互，例如 一個〈DIVid^，mydiv"〉的元素， 可以使用mydiv這個id對其引用即可獲取這個元素的運行期狀態(tài)，具體的使 用mydiv.clientHeight可以獲得這個元素的運行時高度。
對于第一類元素而言，元素尺寸包括絕對尺寸或者百分比尺寸兩種形式。
對于絕對尺寸而言通過上述方法獲取該元素的運行時高度的絕對尺寸； 對于百分比尺寸而言，可以通過上述方法獲耳又該元素運行時高度的百分比尺 寸，進而將該尺寸與瀏覽器絕對尺寸求積得到絕對尺寸。
對所獲取的第 一類元素的絕對尺寸進行求和。
步驟63:瀏覽器的客戶端高度尺寸減去瀏覽器內(nèi)所述第一類元素的客戶 端高度尺寸的和，得到高度差值；
步驟64:按照第二標識的元素百分比參數(shù)計算所述第二類元素的絕對尺
寸；
具體到圖5所示的場經(jīng)過，由于要求查詢結果展示區(qū)充滿剩余空間，即 所述百分比尺寸為100%,因此設置第二類元素的高度絕對尺寸為步驟63中 計算得到的所述差值。
步驟65:根據(jù)具有第一類元素的絕對尺寸以及第二類元素的絕對尺寸布 局頁面。
JavaScript腳本提供了對頁面元素進行動態(tài)操作的能力，使用JavaScript
9腳本，可以對頁面上的元素進行交互，可以修改元素的尺寸屬性來達到改變
其大小的目的。例如想改變頁面上id為container的元素的高度，首先使用 JavaScript腳本根據(jù)id獲取到元素的對象，然后再對其高度進行賦值，最終達 到了改變其高度的效果。
綜上所述，本發(fā)明實施例首先根據(jù)當時頁面的情況，計算各區(qū)域的高度 絕對尺寸數(shù)值，其中對于第二類元素而言，獲得頁面高度絕對尺寸與第一類 元素高度絕對尺寸和的差值作為第二類元素高度絕對尺寸；然后調(diào)用 JavaScript腳本，將計算好的絕對尺寸數(shù)值賦給各個區(qū)域的元素。
可以看出，按照本發(fā)明實施例的方法能夠實現(xiàn)了圖5所示場景的要求， 具體的查詢條件區(qū)尺寸固定，方便用戶隨時輸入查詢條件；查詢結果展示 區(qū)域的上邊緣緊貼查詢條件區(qū)的下邊緣；查詢結果展示區(qū)域的下邊緣緊貼命 令按鈕區(qū)的上邊緣；命令按鈕區(qū)的下邊緣緊貼頁面底部。進而，當窗口改變 尺寸時，查詢結果展示區(qū)域將頁面中除查詢條件區(qū)以及命令按鈕區(qū)之外的區(qū) 域進行充分填充，從而在不影響查詢條件區(qū)及命令按鈕區(qū)的前提下，最大限 度的提高了頁面顯示效率。
在上述實施例基礎上，本發(fā)明并不限制所述第二類元素的個數(shù)。然而， 所述第二類元素集合中的元素的屬性在于第二類要求按照預置的比例填充 所述父容器的剩余空間。所述多個第二類元素的情況，按照各第二類元素所 占父容器中第一類元素之外剩余空間的百分比參數(shù)分別計算得到絕對尺寸。
進一步，本發(fā)明實施例可以實現(xiàn)頁面的實時布局，即當瀏覽器尺寸改變 的過程中，系統(tǒng)周期性的觸發(fā)頁面布局命令使得頁面重新布局。例如用戶拖 動瀏覽器邊框導致瀏覽器尺寸變化的過程中，能夠看到該過程中各個周期頁 面布局的狀況，即體現(xiàn)出頁面布局漸變的過程，并且如果周期值設置的越小， 則所述漸變過程展現(xiàn)的越流暢?；蛘?，頁面布局也可在瀏覽器尺寸再次被確 定后，由用戶觸發(fā)頁面布局命令(如用戶點擊頁面刷新功能鍵等)。
在實現(xiàn)頁面實時布局中，通過事件通知機制實現(xiàn)瀏覽器的尺寸變化的監(jiān) 控，具體的存在很多類型的事件，用戶如果關注某個事件，可以在代碼中 訂閱這些感興趣的事件，并為這個事件指定一個處理函數(shù)，當事件發(fā)生時，
10瀏覽器會通知訂閱者發(fā)生了此事件，并調(diào)用相應的處理函數(shù)。
如上文所述，瀏覽器支持javascript腳本，本實施例中在頁面載入的 javascript腳本中，訂閱"窗口尺寸發(fā)生變化"的這個事件，事件名稱為onresize， 并為其指定事件處理函數(shù)，將本發(fā)明所描述的調(diào)整尺寸的邏輯寫在這個事件 處理函數(shù)中，當窗口大小發(fā)生了變化時，瀏覽器會去通知這個事件處理函數(shù)， 也就是執(zhí)行這個函數(shù)中的邏輯。
本發(fā)明實施例還提供一種頁面布局的系統(tǒng)，如圖7所示，包括，接收單 元71、查找單元72、第一計算單元73、第二計算單元74、頁面布局單元75, 其中
接收單元71,用于獲取頁面布局命令；
查找單元72,用于遍歷父容器中的元素，獲取具有第一標識的元素，并 觸發(fā)第一計算單元；獲取具有第二標識的元素，通知第二計算單元；
第一計算單元73,用于計算父容器絕對尺寸，獲取具有第一標識的元素 絕對尺寸的和；對所述父容器絕對尺寸與所述具有第一標識的元素絕對尺寸 的和求差獲得差值； 第二計算單元74,獲取所述差值，按照具有第二標識的元素占所述差值 的百分比計算得到所述的具有第二標識的元素的絕對尺寸；
頁面布局單元75，用于根據(jù)具有第一標識的元素的絕對尺寸以及具有第 二標識的元素的絕對尺寸布局頁面。
上述系統(tǒng)基礎上，所述第一計算單元獲取具有第一標識的元素絕對尺寸 具體為獲取具有第一標識的元素的屬性，獲取所述屬性中元素尺寸的絕對 值；或者，獲取具有第一標識的元素的屬性，獲取所述屬性中元素尺寸的百 分比值，計算所述百分比與所述父容器的積，得到絕對值。
上述系統(tǒng)基礎上，所述具有第二標識的元素為至少2個；并且，所述第 二計算單元，分別按照具有第二標識的元素占所述差值的百分比計算得到所
述的具有第二標識的元素的絕對尺寸。
上述系統(tǒng)中，所述接收單元檢測并獲取到周期性發(fā)送的頁面布局命令，或者按照用戶指令觸發(fā)的頁面布局命令。
以上對本發(fā)明實施例進行了詳細介紹，本文中應用了具體個例對本發(fā)明 的原理及實施方式進行了闡述，以上實施例的說明只是用于幫助理解本發(fā)明
的實現(xiàn)方式；同時，對于本領域的一般技術人員，依據(jù)本發(fā)明的思想，在具
體實施方式及應用范圍上均會有改變之處，綜上所述，本說明書內(nèi)容不應理 解為對本發(fā)明的限制。
權利要求
1、一種頁面布局的方法，其特征在于，包括獲取頁面布局命令，計算父容器絕對尺寸；遍歷所述父容器中的元素，獲取具有第一標識的元素絕對尺寸的和；獲取所述父容器絕對尺寸與所述具有第一標識的元素絕對尺寸的和的差值；按照具有第二標識的元素占所述差值的百分比計算得到所述的具有第二標識的元素的絕對尺寸；根據(jù)具有第一標識的元素的絕對尺寸以及具有第二標識的元素的絕對尺寸布局頁面。
2、 如權利要求l所述的方法，其特征在于，所述獲取具有第一標識的元 素絕對尺寸的方法包括獲取具有第一標識的元素的屬性，獲取所述屬性中元素尺寸的絕對值；或者，獲取具有第 一標識的元素的屬性，獲取所述屬性中元素尺寸的百分比值， 計算所述百分比與所述父容器的積，得到絕對值。
3、 如權利要求2所述的方法，其特征在于 所述具有第二標識的元素占所述差值的百分比為百分之百。
4、 如權利要求2所述的方法，其特征在于所述具有第二標識的元素為至少2個，以及分別按照具有第二標識的元 素占所述差值的百分比計算得到所述的具有第二標識的元素的絕對尺寸。
5、 如權利要求1至4其中之一所述的方法，其特征在于檢測并獲取到周期性發(fā)送的頁面布局命令，或者用戶觸發(fā)頁面布局命令 的發(fā)送。
6、 一種WEB頁面布局的系統(tǒng)，其特征在于，包括 接收單元，用于獲取頁面布局命令；查找單元，用于遍歷父容器中的元素，獲取具有第一標識的元素，并觸 發(fā)第一計算單元；獲取具有第二標識的元素，通知第二計算單元；第一計算單元，用于計算父容器絕對尺寸，獲取具有第一標識的元素絕對尺寸的和；對所述父容器絕對尺寸與所述具有第一標識的元素絕對尺寸的 和求差獲得差值；第二計算單元，獲取所述差值，按照具有第二標識的元素占所述差值的 百分比計算得到所述的具有第二標識的元素的絕對尺寸；頁面布局單元，用于根據(jù)具有第 一標識的元素的絕對尺寸以及具有第二 標識的元素的絕對尺寸布局頁面。
7、 如權利要求6所述的系統(tǒng)，其特征在于，所述第一計算單元獲取具有 第一標識的元素絕對尺寸具體為獲取具有第 一標識的元素的屬性，獲取所述屬性中元素尺寸的絕對值； 或者，獲取具有第一標識的元素的屬性，獲取所述屬性中元素尺寸的百分比值， 計算所述百分比與所述父容器的積，得到絕對值。
8、 如權利要求7所述的系統(tǒng)，其特征在于所述具有第二標識的元素占所述差值的百分比為百分之百。
9、 如權利要求7所述的系統(tǒng)，其特征在于，所述具有第二標識的元素為 至少2個；以及，所述第二計算單元，分別按照具有第二標識的元素占所述差值的 百分比計算得到所述的具有第二標識的元素的絕對尺寸。
10、 如權利要求1所述的方法，其特征在于所述接收單元，檢測并獲取到周期性發(fā)送的頁面布局命令，或者按照用 戶指令觸發(fā)的頁面布局命令。
全文摘要
本發(fā)明涉及一種WEB頁面布局的方法及系統(tǒng)。所述方法包括獲取頁面布局命令，計算父容器絕對尺寸；遍歷所述父容器中的元素，獲取具有第一標識的元素絕對尺寸的和；獲取所述父容器絕對尺寸與所述具有第一標識的元素絕對尺寸的和的差值；按照具有第二標識的元素占所述差值的百分比計算得到所述的具有第二標識的元素的絕對尺寸；根據(jù)具有第一標識的元素的絕對尺寸以及具有第二標識的元素的絕對尺寸布局頁面。本發(fā)明使得具有第二標識的元素能夠按要求盡量利用父容器的剩余空間，并且隨著父容器尺寸的變化而變化，具有動態(tài)適應父容器尺寸變化的功能。
文檔編號G06F17/30GK101499099SQ20091011962
公開日2009年8月5日 申請日期2009年3月23日 優(yōu)先權日2009年3月23日
發(fā)明者旭 張 申請人:深圳市金蝶中間件有限公司