Data Attributes: https://api.jquerymobile.com/data-attribute/
Pages & Dialogs
- Page 須包含 data-role=”page” 的屬性.
- 在 Page 中需要有三個 DIVs，其中的屬性分別是
- data-role=”header”
- class=”ui-content”
- 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>
