摘要

  • Pages & Dialogs
    1. Page 須包含 data-role="page" 的屬性. 
    2. 在 Page 中需要有三個 DIVs，其中的屬性分別是
      1. data-role="header"
      2. class="ui-content"
      3. data-role="footer"
    3. 一個 Page 的 Container 也可以被設計為 Dialog，只需要加上 data-rel="dialog"，則長相與轉場動畫的行為就會類似 dialog
  • Ajax Navigation & Transitions
    1. jQuery Mobile 會自動攔截 form submit 事件與產生 loading 的動畫
    2. 當被要求的頁面載入十，jQuery Mobile 會剖析含有 data-role="page" 屬性的元件，並插入原本的頁面。需要注意的是，這個新的頁面 (incoming page) 會自動拋棄 scripts, stylesheets 與其他資訊, 但是 title 資訊則會更新
    3.  
  • Content & Widgets
    1. 在 content container 中，可以加入標準的 HTML 元件。jQuery Mobile 也包含許多適合觸控設備的 UI Widgets: form, collapsibles, collapsible sets, popups, dialogs, responsive tables 等等
    2. 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>
      e7a696db4fc21f095e1b8d10b852d741.png
Facebook 討論區載入中...