jQuery Mobile 入門案例-研討活動資訊頁(中)

jQuery Mobile 入門案例-研討活動資訊頁(

如前述「jQuery Mobile 入門案例-研討活動資訊頁(上)」的說明, jQuery Mobile 以單一文件模擬多頁介面,因此現在建立一個新的網頁檔案 freehtml5info.html,於其中配置三個 div 標籤區塊,並設定 data-role="page" 完成所需分頁配置,每一個分頁均需設定 id 名稱以支援後續的分頁導覽跳頁。

<div id="home" data-role="page">
     //首頁內容 …
</div>
<div id="session" data-role="page">
     //議程內容 …
</div>
<div id="location" data-role="page">
     //地點資訊 …
</div>

接下來於每個分頁中,建立頁尾區塊(data-role="footer"),並且於其中嵌入三個導覽按鈕,以首頁為例,其內容如下:

<div data-role="footer" data-position="fixed" data-id="toolbar">
<div data-role="navbar">
<ul>
<li><a href="#home">HOME</a></li>
         <li><a class="ui-btn-active" href="#session">議程</a></li>
         <li><a href="#location">地點資訊</a></li>
</ul>
</div>
</div>

三個導覽按鈕以 li 標籤配置,其中的提示文字必須設定超連結,將 href 指向每一個分頁的 id 。由於要以導覽樣式呈現,因此將這一組 ul 標籤內容配置於設定為 data-role="navbar" 的 div 標籤區塊中。

由於三個分頁都需要一致的導覽列,因此每一個分頁都必須配置同樣的頁尾區塊,但必須注意的是,其中與目前分頁連結的 li 標籤按鈕中,必須設定 class="ui-btn-active" ,以突顯目前的頁面。
現在為每個頁面配置頁首,以首頁為例,內容如下:

<div id="home" data-role="page">
<div data-role="header">
         <h1>HTML5 技術講座</h1>
</div>
     //首頁內容 …
</div>

作為頁首的區塊設定 data-role="header" 並且 h1 標籤標示此分頁名稱。

下一篇討論內容的配置以完成此案例。

jQuery Mobile 入門案例-研討活動資訊頁(

沒有留言: