2015年3月6日 星期五

jQuery Mobile - Listview

一般的HTML網頁是以<ol></ol>與<ul></ul>網頁標籤分別定義編號與項目符號,並以<li></li>網頁標籤定義各項目清單 (List),例如:
  1. JavaFX 8技術手冊.
  2. JavaFX遊戲程式設計.
  3. Visual C++ Web程式設計.
  4. 深入研究JavaFX 2.
  5. 深入研究Java Swing.
...
  • Graphical Decision Model.
  • Big Data.
  • Cloud Computing.
  • Rich Internet Application.
  • Supply Chain Management.
jQuery Mobile則是以<ul></ul>網頁標籤與data-role="listview"屬性定義Listview,例如:

Listview

  • JavaFX 8技術手冊.
  • JavaFX遊戲程式設計.
  • Visual C++ Web程式設計.
  • 深入研究JavaFX 2.
  • 深入研究Java Swing.
  • 完全探索網路程式設計 - 使用Java.
  • ...
【執行結果】

以下為以Android智慧型手機瀏覽器執行的結果:
若在<li></li>中加入<a></a>網頁標籤,則成為含有超連結的Listview,並在右側顯示向右圖示,代表含有超連結,當點選清單時則可連結至指定的超連結:

【執行結果】
若將<ul></ul>改為<ol></ol>,則成為編號之項目清單,例如:

【執行結果】
此外,可在項目清單中加入圖片,而圖片最大顯示範圍,長寬分別為80px:

【執行結果】
在<img>中加入class="ui-li-icon"屬性,則以圖示代替項目清單:

【執行結果】
在<ul></ul>中加入data-inset="true"屬性,則將項目清單分成兩部份,其右側將新增一連結圖示部份,此外在<ul></ul>中再加入data-split-icon屬性,代表此部份所有圖示均一致,以下範例將右側圖示設為Gear圖示:

【執行結果】
亦可以下列方式設定個別圖示:

【執行結果】
以下範例加入data-filter="true"屬性以建立搜尋篩選器 (Search Filter):

【執行結果】

輸入關鍵字則顯示相關清單:
在<a></a>中再加入<span class="ui-li-count"></span>,則在項目清單右側顯示計數器 (Counter):

【執行結果】
【參考資料】

[1] XAMPP:https://www.apachefriends.org
[2] jQuery Mobile:http://jquerymobile.com
[3] jQuery:http://jquery.com

© Chia-Hui Huang

沒有留言:

張貼留言