qileilove

          blog已經(jīng)轉(zhuǎn)移至github,大家請(qǐng)?jiān)L問(wèn) http://qaseven.github.io/

          jQuery Mobile 列表視圖

          jQuery Mobile 列表視圖

          jQuery Mobile 中的列表視圖是標(biāo)準(zhǔn)的 HTML 列表:有序列表 (<ol>) 和無(wú)序列表 (<ul>)。

          如需創(chuàng)建列表,請(qǐng)向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使這些項(xiàng)目可點(diǎn)擊,請(qǐng)?jiān)诿總€(gè)列表項(xiàng)(<li>)中規(guī)定鏈接:

          實(shí)例

          <ol data-role="listview">   <li><a href="#">列表項(xiàng)</a></li> </ol>  <ul data-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)換為按鈕(無(wú)需 data-role="button")。

          列表分隔符

          列表分隔符(List Dividers)用于把項(xiàng)目組織和組合為分類(lèi)/節(jié)。

          如需規(guī)定列表分隔符,請(qǐng)向 <li> 元素添加 data-role="list-divider" 屬性:

          實(shí)例

          <ul data-role="listview">  <li data-role="list-divider">歐洲</li>   <li><a href="#">法國(guó)</a></li>   <li><a href="#">德國(guó)</a></li> </ul> 

          親自試一試

          如果您的列表是字母順序的(比如通訊錄),jQuery Mobile 自動(dòng)添加恰當(dāng)?shù)姆指舴ㄟ^(guò)在 <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" 屬性通過(guò)對(duì)列表項(xiàng)文本的首字母進(jìn)行大寫(xiě)來(lái)創(chuàng)建分隔符。

          搜索過(guò)濾器

          如需在列表中添加搜索框,請(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)建沒(méi)有鏈接的列表(不是按鈕,不可點(diǎn)擊)。

          posted on 2014-05-20 18:30 順其自然EVO 閱讀(191) 評(píng)論(0)  編輯  收藏 所屬分類(lèi): jQuery Mobile 教程

          <2025年6月>
          25262728293031
          1234567
          891011121314
          15161718192021
          22232425262728
          293012345

          導(dǎo)航

          統(tǒng)計(jì)

          常用鏈接

          留言簿(55)

          隨筆分類(lèi)

          隨筆檔案

          文章分類(lèi)

          文章檔案

          搜索

          最新評(píng)論

          閱讀排行榜

          評(píng)論排行榜

          主站蜘蛛池模板: 织金县| 淮阳县| 个旧市| 德令哈市| 丹巴县| 瑞昌市| 云梦县| 新闻| 繁峙县| 盈江县| 新竹市| 包头市| 奉贤区| 平潭县| 万年县| 长泰县| 新绛县| 合水县| 清水县| 会理县| 浠水县| 凌源市| 安岳县| 当阳市| 浑源县| 德阳市| 应城市| 柘荣县| 瑞丽市| 海林市| 谢通门县| 寻乌县| 通海县| 盐山县| 新乡市| 青铜峡市| 明水县| 友谊县| 诸暨市| 新宁县| 东明县|