jQuery Mobile 入門案例
【HTML5 完全入門】課程資訊頁(2)- 首頁清單

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

首頁主要提供課程內容連結清單,同時包含每一天的課程細即,由於總共有四天課程,因此針對每一天課程配置一個分頁,加上清單頁,總共會有五個分頁,以五個<div>標籤定義內容如下:

<div data-role="page" id="home" >
     課程清單 …
</div>
<div data-role="page" id="day1" >
     第一天課程
</div>
<div data-role="page" id="day4" >
     第四天課程
</div>

每一個<div>必須設定專屬的 id 屬性值,以方便進行鏈結設定。

課程清單以中<ul>定義內容,並且設定 data-role="listview" 以套用 jQuery Mobile 清單樣式,同時配置標是以及頁尾,內容定義如下:


<div id="home" data-role="page" >
        <div data-role="header" data-position="fixed" style="">
              <div data-role="controlgroup" data-type="horizontal"
style="text-align: center;">
                  <img src="images/lesson.png"
style="margin: 10px; float: left;" width="160" />
</div>
        </div>
        <div data-role="content">
            <div>
                <ul data-role="listview" style="background: #0094ff;">
                    <li>
                        <a href="#day1">
                            <h1>Day 15/11</h1>
                            <p>HTML+CSS+JavaScript 入門</p>
                        </a>
                    </li>
                    清單
                </ul>
            </div>
        </div>
        <div data-role="footer"  data-position="fixed" >
            <div data-role="controlgroup"
data-type="horizontal"
style="text-align: center;">
                <a data-role="button" href="signup.html"
data-icon="check" data-rel="external">報名</a>
                <a data-role="button" href="about.html"
data-icon="info" data-rel="external">關於課程</a>
           </div>
        </div>
</div>

清單的部份配置於 data-role="content" 設定的區塊中,並且以 每一個<li>定義一個課程分頁連結,其中的 <a> 設定為特定課程的連結,例如 href="#day1" ,四個<li>標籤分別配置四天課程的對應連結。最後呈現的結果如下:


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

沒有留言: