雷林鵬分享：jQuery Mobile 列表視圖

　　jQuery Mobile 列表視圖

　　jQuery Mobile 列表視圖

　　jQuery Mobile 中的列表視圖是標準的HTML 列表; 有序(

) 和 無序(
).

 

　　列表視圖是jQuery Mobile中功能強大的一個特性。它會使標準的無序或有序列表應用更普遍。應用方法就是在ul或ol標籤中添加data-role="listview"屬性。在每一個項目(

• )中添加連接，用戶能夠點擊它：

   

  　　實例

  　　

   

  　　

  1. 列表項m

   

  　　

   

  　　

   

  　　

  • 列表項

   

  　　

   

  　　嘗試一下 »

  　　列表樣式的圓角和邊緣，使用 data-inset="true" 屬性設置:

  　　實例

  　　

   

  　　嘗試一下 »

  默認狀況下，列表項的連接會自動變成一個按鈕 (不須要 data-role="button")。

  　　列表分隔

  　　列表項也能夠轉化爲列表分割項，用來組織列表，使列表項成組。

  　　指定列表分割，給列表項

  • 元素添加 data-role="list-divider" 屬性便可：

     

    　　實例

    　　

     

    　　

    • 歐洲

     

    　　

    • 法國

     

    　　

    • 德國

     

    　　

     

    　　嘗試一下 »

    　　若是你有一個字母順序排列的列表，(例如一個電話簿)經過

    或者
    元素的 data-autodividers="true" 屬性設置能夠配置爲自動生成的項目的分隔:

     

    　　實例

    　　

     

    　　

    • Adele

     

    　　

    • Agnes

     

    　　

    • Billy

     

    　　

    • Calvin

     

    　　...

    　　

     

    　　嘗試一下 »

    data-autodividers="true" 能夠配置爲自動生成的項目的分隔。默認狀況下，建立的分隔文本是列表項文本的第一個大寫字母。

    　　搜索過濾

    　　jquery Mobile提供一個很是簡單的方法，實現客戶端搜索功能，篩選列表的選項。只需添加 data-filter="true" 屬性便可:

    　　實例

    　　

     

    　　嘗試一下 »

    　　默認狀況下，搜索輸入框默認的字符爲 "Filter items..."。

    　　經過設置mobileinit事件的綁定程序或者給 $.mobile.listview.prototype.options.filterPlaceholder 選項設置一個字符串，或者給列表設置 data-filter-placeholder 屬性，能夠設置搜索輸入框的默認字符:

    　　實例

    　　

     

    　　嘗試一下 »

    　　更多實例

    　　只讀列表

    　　如何建立一個不帶連接的列表 (不會是個按鈕且不可點擊)。

    　　本文轉載自：w3cschool(編輯：雷林鵬 來源：網絡 侵刪)