[發(fā)明專利]頁面動態(tài)參照布局及展現(xiàn)方法

有效

• 申請?zhí)枺?/td>: 201310215942.7
• 申請日: 2013-06-04
• 公開（公告）號: CN103324476A
• 公開（公告）日: 2013-09-25
• 發(fā)明（設(shè)計）人: 白連宇
• 申請（專利權(quán)）人: 白連宇
• 主分類號: G06F9/44
• 分類號: G06F9/44
• 代理公司: 暫無信息
• 代理人: 暫無信息

技術(shù)領(lǐng)域

本發(fā)明涉及到網(wǎng)頁、軟件、操作系統(tǒng)以及各種實物等的頁面、界面、版面元素的動態(tài)布局及展現(xiàn)方法。?

背景技術(shù)

伴隨著當今社會的日新月異，一個蘊含了大量信息的頁面往往不能同時由一個窗口全部展現(xiàn)出來時，窗口就會給用戶提供一種叫做“滾動條”的工具，使用戶可以上下左右滾動查看，但是在這種情況下，經(jīng)常會出現(xiàn)多個布局元素由于不能等高或者等寬，在頁面布局時無法對齊從而出現(xiàn)空白區(qū)域的現(xiàn)象，不但浪費了有限的窗口資源，減少了窗口的使用效率，用戶體驗效果也不是很好，例如一個頁面包含左右兩欄，且兩欄的高度不同，在頁面滾動瀏覽的過程中，相對短的一欄就會給窗口框架留出空白，如圖1.1、圖1.2所示。為了解決這個難題，最常用的就是把左右兩欄分開控制，左右兩欄各執(zhí)一個滾動條，如圖1.3所示，但是這樣，又會產(chǎn)生了新的問題：一是頁面包含了多個滾動條時不好控制，二是滾動條的出現(xiàn)減少了有限的窗口顯示面積，三是影響頁面的完整性、美觀性。?

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

本發(fā)明為頁面提供了一種動態(tài)參照布局及展現(xiàn)的方法，如果某個頁面中的元素A與元素B由于高度（或?qū)挾龋┎荒苓_成統(tǒng)一，從而造成頁面的布局空白或缺失，那么通過判斷元素A、元素B、窗口框架三者之間的尺寸關(guān)系，智能的得出相應的布局方法，使頁面在窗口框架中移動時，元素A與元素B進行相互的參照，適時的移動、鎖定、解鎖，達到元素A、元素B的縱向（或橫向）有效區(qū)域在其窗口框架中存在與消失時保持同步，最終使頁面達到完整、美觀、易用的目的，改善用戶體驗，其大致布局過程請參照圖2、圖3所示。?

為達到上述目的，本發(fā)明實施采用如下技術(shù)方案：?

首先為某個元素A指定一個縱向（或橫向）參照元素B，通過智能的判斷元素A、B的高度（或?qū)挾龋┡c其窗口框架的高度（或?qū)挾龋┑年P(guān)系，執(zhí)行相應的布局方法，理論上，元素A、B可以任意指定，但是在實際應用中，為達到智能布局的有效性，一般參照元素B的高度（或?qū)挾龋┍M量大于元素A，并且參照元素B的高度（或?qū)挾龋┍M量大于窗口框架的高度（或?qū)挾龋谹、B應該在頁面中有一定的聯(lián)系，比如想在顯示B的過程中始終顯示元素A，當然，有時頁面布局時，由于元素的內(nèi)容需要動態(tài)加載，所以無法預知各元素的高度（或?qū)挾龋饕w現(xiàn)在下面的三種情況：

一、元素A的高度（或?qū)挾龋┐笥谄浯翱诳蚣艿母叨龋ɑ驅(qū)挾龋瑫r縱向（或橫向）參照元素B的高度（或?qū)挾龋┐笥谄浯翱诳蚣艿母叨龋ɑ驅(qū)挾龋鐖D4所示，對于此種情況，所對應的布局方案為——首先比較元素A與參照元素B的高度（或?qū)挾龋绻谹的高度（或?qū)挾龋┐笥趨⒄赵谺的高度（或?qū)挾龋柘葘⒃谹與參照元素B??所代表的元素對調(diào)，再執(zhí)行布局方法，在參照元素B進入縱向（或橫向）“提供參照”狀態(tài)后，元素A會參照元素B在其所屬的窗口框架中以特定的方式進行縱向（或橫向）移動，當元素A縱向（或橫向）的有效區(qū)域在其窗口框架中的部分將要減少時，將元素A縱向（或橫向）鎖定，直到符合條件時解鎖；

二、元素A、B有一方的高度（或?qū)挾龋┐笥谄浯翱诳蚣艿母叨龋ɑ驅(qū)挾龋硪环降母叨龋ɑ驅(qū)挾龋┬∮诘扔谄浯翱诳蚣艿母叨龋ɑ驅(qū)挾龋瑢Υ饲闆r，如果參照元素B的高度（或?qū)挾龋┬∮诘扔谄浯翱诳蚣艿母叨龋ɑ驅(qū)挾龋敲词紫纫獙⒃谹、B所代表的元素對調(diào)，在頁面移動的過程中，如果參照元素B進入縱向（或橫向）“提供參照”狀態(tài)后，將元素A縱向（或橫向）鎖定，直到符合條件時解鎖，如圖5所示；

三、元素A的高度（或?qū)挾龋┬∮诘扔谄浯翱诳蚣艿母叨龋ɑ驅(qū)挾龋瑫r縱向（或橫向）參照元素B的高度（或?qū)挾龋┬∮诘扔谄浯翱诳蚣艿母叨龋ɑ驅(qū)挾龋鐖D6所示，對于此種情況，所對應的布局方案為——不會執(zhí)行布局方法。