jQuery Mobile 列表視圖
jQuery Mobile 列表視圖
jQuery Mobile 中的列表視圖是標(biāo)準(zhǔn)的 HTML 列表:有序列表 (<ol>) 和無序列表 (<ul>)。
如需創(chuàng)建列表,請(qǐng)向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使這些項(xiàng)目可點(diǎn)擊,請(qǐng)?jiān)诿總€(gè)列表項(xiàng)(<li>)中規(guī)定鏈接:
實(shí)例
<oldata-role="listview"
> <li><a href="#">列表項(xiàng)</a></li> </ol> <uldata-role="listview"
> <li><a href="#">列表項(xiàng)</a></li> </ul>
如需為列表添加圓角和外邊距,請(qǐng)使用 data-inset="true" 屬性:
實(shí)例
<ul data-role="listview" data-inset="true"
>
提示:默認(rèn)地,列表中的列表項(xiàng)會(huì)自動(dòng)轉(zhuǎn)換為按鈕(無需 data-role="button")。
列表分隔符
列表分隔符(List Dividers)用于把項(xiàng)目組織和組合為分類/節(jié)。
如需規(guī)定列表分隔符,請(qǐng)向 <li> 元素添加 data-role="list-divider" 屬性:
實(shí)例
<ul data-role="listview"> <li data-role="list-divider"
>歐洲</li> <li><a href="#">法國</a></li> <li><a href="#">德國</a></li> </ul>
如果您的列表是字母順序的(比如通訊錄),jQuery Mobile 自動(dòng)添加恰當(dāng)?shù)姆指舴ㄟ^在 <ol> 或 <ul> 元素上設(shè)置 data-autodividers="true" 屬性:
實(shí)例
<ul data-role="listview" data-autodividers="true"
> <li><a href="#">Adam</a></li> <li><a href="#">Angela</a></li> <li><a href="#">Bill</a></li> <li><a href="#">Calvin</a></li> ... </ul>
提示:data-autodividers="true" 屬性通過對(duì)列表項(xiàng)文本的首字母進(jìn)行大寫來創(chuàng)建分隔符。
搜索過濾器
如需在列表中添加搜索框,請(qǐng)使用 data-filter="true" 屬性:
實(shí)例
<ul data-role="listview" data-filter="true"
></ul>
默認(rèn)地,搜索框中的文本是 "Filter items..."。
如需修改默認(rèn)文本,請(qǐng)使用 data-filter-placeholder 屬性:
實(shí)例
<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名"
>
更多實(shí)例
- 只讀列表
- 如何創(chuàng)建沒有鏈接的列表(不是按鈕,不可點(diǎn)擊)。
posted on 2014-05-20 18:30 順其自然EVO 閱讀(193) 評(píng)論(0) 編輯 收藏 所屬分類: jQuery Mobile 教程