jQuery Mobile - 頁首/頁尾與內容(header/footer/content)

jQuery Mobile 技術文件系列 

在「關於data-role 與分頁配置」這一篇文章裏面,我們看到了所謂的行動頁定義,現在我們要進一步來構成頁面的基本元素,頁首/頁尾與內容。每一個行動裝置頁都可以配置一個專屬的頁首與頁尾,需要的 data-role 屬性值為 header 與 footer ,而頁面的主體內容,則設定為 content ,下表列舉這些屬性值的意義:

data-role 屬性值
說明
page
表示一個獨立顯示的行動裝置頁。
header
頁首
content
內容
footer
頁尾

完成表列的屬性值配置,即可建立一個完整的行動裝置網頁,我們來看一個範例。

<body>
    <div data-role="page">
        <div data-role="header">
            <h1>
                HTML5 完美風暴</h1>
        </div>
        <div data-role="content">
            <p>
                HTML5 技術規格開始邁向成熟,…</p>
            <p>
                HTML5正在全球掀起一場科技業的完美風暴,…</p>
            <p>
                8月開始,歡迎參加我們最新的【HTML5 專業解構】技術研討課程,…</p>
        </div>
        <div data-role="footer">
            康廷數位 版權所有
        </div>
    </div>
</body>

巢狀式 <div> 標籤,依所要呈現的內容指定特定的 data-role 屬性值,最外層的是 page ,表示這是一個頁面,接下來的三個 <div> 標籤,依序設定 header、content 以及 footer ,表示此頁的頁首、內容與頁尾,而在內容的部份,配置示範的文句內容。最後得到以下的輸出畫面:


如你所見,這個頁面包含了頁首與頁尾,讀者可以自行比對其中的內容。為了示範,這個範例頁面作了些許的調整,讓內容包含頁首與頁尾能夠剛好填滿手機的頁面,如果你將任意長度的內容丟入其中的 content 區域,則頁尾不一定可以顯示,或是它不會在底部呈現,你必須進一步改善頁面的配置,這一部份,我們後續討論。

這一篇的目的,在於說明 jQuery Mobile 的頁面基本組成架構,請務必理解,才能順利的更進一理解 jQuery Mobile 的頁面構成原理。

jQuery Mobile 技術文件系列 


沒有留言: