簡介
  • 1,679 views,
  • 2015-04-21,
  • 上傳者: 洪國恩,
  •  0
摘要
1.
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
2.
Ajax Navigation & Transitions
  1. jQuery Mobile 會自動攔截 form submit 事件與產生 loading 的動畫
  2. 當被要求的頁面載入十,jQuery Mobile 會剖析含有 data-role="page" 屬性的元件,並插入原本的頁面。需要注意的是,這個新的頁面 (incoming page) 會自動拋棄 scripts, stylesheets 與其他資訊, 但是 title 資訊則會更新
  3.  
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 討論區載入中...
資料夾 :
發表時間 :
2015-04-21 13:24:00
觀看數 :
1,679
發表人 :
洪國恩
部門 :
老洪的 IT 學習系統
QR Code :