最後這一篇來看看如何建構每個 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>HTML與CSS3</td></tr>
…
</table>
</div>
議程的內容格式為固定行列資料，適合以表格來呈現，因此配置一個 table 標籤以容納其內容。最後是研討會的地點資訊，這一部份的資料分成三塊，為了讓使用者能夠方便檢視，因此置了三組縮放式面板如下：
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h2>地址</h2>
<p>高雄市前鎮區復興四路12號A棟</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 入門案例－研討活動資訊頁（上｜中｜下）
