Jquery Mobile列表

Posted tuna

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery Mobile列表相关的知识,希望对你有一定的参考价值。

向 <ol> 或 <ul> 元素添加 data-role="listview"

1、圆角和外边距 :data-inset="true" 

<ul data-role="listview" data-inset="true">

2、列表分隔符:data-role="list-divider"

<ul data-role="listview">
 <li data-role="list-divider">欧洲</li>
  <li><a href="#">法国</a></li>
  <li><a href="#">德国</a></li>
</ul>

3、列表搜索框:

<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">

4、列表缩略图:

对于大于 16x16px 的图像,在链接中添加 <img> 元素。

jQuery Mobile 将自动把图像调整至 80x80px:

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

5、列表图标:

class="ui-li-icon"

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

6、拆分列表:

在列表项li中放两个链接,jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式,链接中的文本(如有)将在用户划过该图标时显示:

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">下载浏览器</a>
  </li>
</ul>
<!-- 以对话框的形式打开id为download的页面 -->

7、计数泡沫

使用行内元素,并添加类:ui-li-count

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

tips:

更改列表项的默认图标:<li data-icon="plus" ...>

以上是关于Jquery Mobile列表的主要内容,如果未能解决你的问题,请参考以下文章

具有多个过滤器的 JQuery Mobile 可过滤列表视图

Jquery Mobile 嵌套列表 - 后退按钮不见了?

如何将数据绑定到 Jquery Mobile 列表视图

HTML5开发移动web应用—JQuery Mobile-列表

如何在 jQuery Mobile 拆分按钮列表项的两个按钮上添加图标?

如何使用自定义类一次重置 jquery mobile 中的多个下拉列表