2015年3月6日 星期五

jQuery Mobile - Listview

一般的HTML網頁是以<ol></ol>與<ul></ul>網頁標籤分別定義編號與項目符號，並以<li></li>網頁標籤定義各項目清單 (List)，例如：
    
  
  1. JavaFX 8技術手冊.
    2. 
  
  2. JavaFX遊戲程式設計.
    3. 
  
  3. Visual C++ Web程式設計.
    4. 
  
  4. 深入研究JavaFX 2.
    5. 
  
  5. 深入研究Java Swing.
    6. 


...

     
  
  • 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
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)