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

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

最後這一篇來看看如何建構每個分頁的內容,於頁首與頁尾中插入 div 區塊,並設定為 data-role="content" ,來看看首頁的部份,內容如下:

<div data-role="content" style="text-align: center">
<img id="poster" src="images/poster_date.jpg" />
</div>

其中只配置了一張圖,這是最單純的內容分頁。第二張分頁如下:

<div data-role="content">
<table>
<tr><th>時間</th><th>內容</th></tr>
         <tr><td>08:30~09:00</td><td>學員報到/開始</td></tr>
         <tr><td>09:00~10:00</td><td>HTML5概觀</td></tr>
         <tr><td>10:00~11:00</td><td>HTMLCSS3</td></tr>
         
</table>
</div>

議程的內容格式為固定行列資料,適合以表格來呈現,因此配置一個 table 標籤以容納其內容。最後是研討會的地點資訊,這一部份的資料分成三塊,為了讓使用者能夠方便檢視,因此置了三組縮放式面板如下:

<div data-role="content">
    <div data-role="collapsible-set">
        <div data-role="collapsible" data-collapsed="false">
            <h2>地址</h2>
            <p>高雄市前鎮區復興四路12A</p>
            <p><a href="tel:0981035322">0981035322</a></p>
        </div>
        <div data-role="collapsible" style="">
            <h2>地圖</h2>
            <img id="map" src="images/map.jpg" />
        </div>
        <div data-role="collapsible">
            <h2>交通資訊</h2>
            <p><span style="color: maroon"><b>捷運:</p>
            <p><span style="color: maroon"><b>高鐵/台鐵:</p>
        </div>
    </div>
</div>

其中每一個區塊的資料配置於獨立的 div 標籤中,並設定了 data-role="collapsible" ,並且配置了 h2 標籤以作為標題,第一個區塊同時設定 data-collapsed="false" ,預設為展開。

最後三個區塊配置於設定為 data-role="collapsible-set" 的 div 區塊中成為其子區塊,如此一來,當使用者點選任何一個面板時會將其展開並縮合其它區塊。

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

沒有留言: