jQuery Mobile - 關於 data-role 與分頁配置

jQuery Mobile 技術文件系列

jQuery-Mobile 運用了 data-* 這個屬性的特質,定義各種行動裝置網頁樣式,最基本的 data-* 屬性即為 data-role ,當你將此屬性的值設定為 page ,表示要建立一個行動裝置專用的網頁區塊,而這個區塊會佔滿行動裝置的畫面,形成一組單一頁面。於網頁中配置一組如下的 <div>標籤 :

<div data-role="page" ></div>

其中設定了 data-role 屬性為 page ,如此一來此 div 區塊形成一個行動裝置的頁面,現在我們用一個比較完整的網頁檔案來測試頁面的效果,內容如下:

<body>
    <div data-role="page"
style="background: black; font-size: 72pt; color: white;">
        Page Black</div>
</body>

為了方便識別,因此將其中的 <div> 標籤 background 屬性設為 black,並且於其內容配置了 Page Black 字串,現在於行動裝置瀏覽器檢視結果畫面如下:


透過行動裝置檢視配置了此 <div> 標籤的頁面,並沒有任何特殊之處,它只是呈現 div 區塊的內容,現在我們嘗試建立另外一個完整的網頁,配置三個 <div> 標籤,並且分別設定其 data-role 屬性為 page ,列舉如下:

<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 區塊的背景顏色均不同,並且以 標籤標示此頁的顏色名稱,現在重新瀏覽此網頁,你會發現出現以上相同的頁面。

就如稍早的說明, jQuery Mobile 以 data-role 屬性設定為 page 的區塊為單位切割 html 網頁的內容,一次只顯示一個區塊,其它的設為 page 的區塊則被隱藏。

jQuery Mobile 技術文件系列



沒有留言: