jQuery Mobile 虛擬頁面

jQuery Mobile 技術文件系列

jQuery Mobile 是基於行動裝置發展的一套 UI 框架,相較於桌上型電腦,行動裝置螢幕空間相對有限,因此採用了虛擬頁面技術實現行動頁的展示效果。

所謂的虛擬頁面,是在一份網頁文件中,嵌入一個以上預先定義的分頁區塊(data-role="page"),這些區塊便成為能夠在行動裝置螢幕展示的虛擬頁面,而其中只有一個頁面會在瀏覽過程中呈現出來,至於頁面區塊的定義,請參考 jQuery Mobile - 關於 data-role 與分頁配置

考慮以下的配置:

<body>
    <div id="black" data-role="page" style="background: black;font-size:72pt;">
        <span>Page Black</span></div>
    <div id="gray" data-role="page" style="background: gray;font-size:72pt;">
       <span>Page Gray</span></div>
    <div id="silver" data-role="page" style="background:silver; font-size:72pt;">
        <span>Page Silver</span></div>
</body>

配置三個 div 標籤,並且分別設定其 data-role 屬性為 page ,每一個 div 區塊的背景顏色均不同,並且以 span 標籤標示此頁的顏色名稱,現在重新瀏覽此網頁,你會發現只有第一個 div 標籤,也就是 id 為 black 的區塊會出現,從這裏讀者可以發現,無論 data-role 屬性設定為 page 的 div 標籤有幾個,只有第一個頁面呈現出來。

由於螢幕尺寸的關係,手機之類的小型行動裝置能顯示的網頁區域有限,jQuery Mobile 一次只會顯示一組 data-role 屬性標示為 page 的區塊,如果單一網頁上包含了一個以上的區塊將其 data-role 屬性設定為 page ,則會自動以此為單位切割成數個頁面,並且透過連結的設定支援換頁瀏覽功能。現在修改上述的配置,於其中加入跳頁連結:

<body>
    <div data-role="page" id="a" style="background:black" >
        <a href="#b"><span>A</span> </a>
    </div>
    <div data-role="page" id="b" style="background:gray" >
        <a href="#c"><span>B</span> </a>
    </div>
    <div data-role="page" id="c"  style="background:silver"  >
        <a href="#a"><span>C</span> </a>
    </div>
</body>

body 內部包含了三個 div 區塊,每一個區塊均設定了其 data-role 屬性為 page ,並且分別指定了 id 屬性以支援區塊識別,瀏覽這個網頁時,只會顯示第一個 div 標籤的內容,也就是 id 值等於 a 的區塊,為了方便識別,因此除了 data-role 屬性,這裏分別為每個 div 設定了 id 屬性,並且於其中配置了 span 顯示 A、B 與 C 三個不同的字母,同時以不同的區塊背景顏色作識別。

由於一次只會顯示一個「page」,因此在個別 div 中,配置導覽用的超連結,指向下一個欲顯示的頁面。現在瀏覽此頁面,首先出現以下左邊截圖的單一頁面,按一下畫面上的英文字母,會持續自動跳至下一個 page 區塊的內容,跳頁預設是以淡出/淡入效果呈現。


jQuery Mobile 技術文件系列



沒有留言: