簡介 | 老洪的 IT 學習系統

簡介

2,805 views,
2015-04-21,
上傳者: 洪國恩,
收藏 0

Data Attributes: https://api.jquerymobile.com/data-attribute/

Pages & Dialogs

Page 須包含 data-role="page" 的屬性.
在 Page 中需要有三個 DIVs，其中的屬性分別是
1. data-role="header"
2. class="ui-content"
3. data-role="footer"
一個 Page 的 Container 也可以被設計為 Dialog，只需要加上 data-rel="dialog"，則長相與轉場動畫的行為就會類似 dialog

Ajax Navigation & Transitions

jQuery Mobile 會自動攔截 form submit 事件與產生 loading 的動畫
當被要求的頁面載入十，jQuery Mobile 會剖析含有 data-role="page" 屬性的元件，並插入原本的頁面。需要注意的是，這個新的頁面 (incoming page) 會自動拋棄 scripts, stylesheets 與其他資訊, 但是 title 資訊則會更新

Content & Widgets

在 content container 中，可以加入標準的 HTML 元件。jQuery Mobile 也包含許多適合觸控設備的 UI Widgets: form, collapsibles, collapsible sets, popups, dialogs, responsive tables 等等

jQuery Mobile 也提供了一個通用的 listviews，屬性是 data-role="listview"
要產生下圖的樣式只要這樣寫就可以了

<form>
    <input id="filter-for-listview" data-type="search" placeholder="Type to search...">
</form>
<ul data-role="listview" data-inset="true" data-filter="true" data-input="#filter-for-listview">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>