jQuery Mobile 入門案例
【HTML5 完全入門】課程資訊頁(3)- 課程綱要

【HTML5 完全入門】課程資訊頁案例

當使用者透過連結進入特定的日期課程,將自動切換至對應的日期頁,以第一天為例,內容如下:

<div data-role="page" id="Div1">
    <div data-role="header" data-position="fixed">
        <h1>Day 1</h1>
    </div>
    <div data-role="content">
        <h3>HTML+CSS+JavaScript 入門<a href="#day2"
data-icon="arrow-r" data-transition="slide"
data-role="button" data-inline="true"
data-iconpos="notext"></a></h3>
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">09:00~12:00</li>
            <li>HTML5 從零開始</li>
            <li>入門 HTML 標籤</li>
            <li>入門 CSS 樣式</li>
            <li>建立個人網頁</li>
            <li data-role="list-divider">13:00~15:00</li>
            <li>裝置與網頁的相容性考量</li>
            <li>建立行動版個人網頁</li>
            <li>流變格線與響應式設計-導入Bootstrap</li>
            <li>建立行動主機環境/實機裝置測試</li>
            <li data-role="list-divider">15:00~17:00</li>
            <li>JavaScript語法入門</li>
            <li>網頁應用程式化</li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
          
    </div>
</div>

特定日期的課程內容,重點在 data-role="content" 的 div 區塊,其中必須配置導覽按鈕,以方便使用者切換至下一日的課程頁,這個按鈕以 <a> 實作,表列說明相關的特性設定:

特性
設定說明
按鈕外觀
data-role="button"
向右箭頭
data-icon="arrow-r",表示導覽至下一日課程頁。
滑動式效果
data-transition="slide",以滑動特效呈現換頁效果。
隱藏文字
data-iconpos="notext",沒有說明文字。
配置位置
data-inline="true",按鈕不佔據新行配置。

完成上述的設定,獲得以下的標題畫面,在標題的右邊呈現一個向右箭頭的按鈕:


接下來是課程內容的部份,以 <ul> 配置內容,設定 data-role="listview" 以套用內建的清單樣式,設定data-inset="true" 以內縮清單的內容區隔邊界以呈現比較清楚的視覺效果,課程內容以 <li> 條列式配置,而作為時段分隔的 <li> 設定 data-role="list-divider" ,以呈現分區的視覺效果,最後呈現的結果畫面如下:


其它三天的設定完全相同。

【HTML5 完全入門】課程資訊頁案例

沒有留言: