向 <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列表的更多相关文章

  1. jQuery Mobile 列表内容

    jQuery Mobile 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 <img> 元素. jQuery Mobile 将自动把图像调整至 80x80px: 实例: &l ...

  2. jQuery Mobile 列表视图(带有自动检索)

    输入a: 输入b: jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的 HTML 列表:有序列表 (<ol>) 和无序列表 (<ul>). ...

  3. (五)Jquery Mobile列表

    Jquery Mobile列表 一.JM列表 1.普通列表            效果:            带序号的列表 将ul换成ol      效果:       2.data-inset=& ...

  4. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  5. 消除JQuery Mobile 列表样式右侧箭头

    有时候我们看到JQM上面有一些呈现跟我们要的很像如下面这个Listview效果   程序代码如下: view sourceprint? 1.<ul data-role="listvie ...

  6. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  7. 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

    使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...

  8. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  9. JQuery mobile中按钮自定义属性的改变

    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...

随机推荐

  1. JQ查找到带有某个字符,并起类名,然后替换这个某个字符

    <script> setTimeout("asdasd()",1000); //定时器是为了防止其他JS影响到它,可以不加 function asdasd() { $( ...

  2. Java使用RabbitMQ之整合Spring(消费者)

    依赖包: <!--RabbitMQ集成spring--> <!-- https://mvnrepository.com/artifact/org.springframework.am ...

  3. Error:Failed to resolve: com.android.support:appcompat-v7

    repositories { maven { url "https://maven.google.com" } } implementation 'com.android.supp ...

  4. DotNetty 实现 Modbus TCP 系列 (四) Client & Server

    本文已收录至:开源 DotNetty 实现的 Modbus TCP/IP 协议 Client public class ModbusClient { public string Ip { get; } ...

  5. Python图形库Turtle

    画笔绘制状态函数 函数 描述 pendown() 放下画笔 penup() 提起画笔,与pendown()配合使用 pensize(width) 设置画笔线条的粗细为指定大小 画笔运动函数 函数 描述 ...

  6. 云服务器ECS

    云服务器Elastic Compute Service(ECS)是阿里云提供的一种基础云计算服务.使用云服务器ECS就像使用水.电.煤气等资源一样便捷.高效.您无需提前采购硬件设备,而是根据业务需要, ...

  7. 多校#5-1005-Instring-HDU5785-manacher+维护

    寻找三元组(i,j,k),使得(i,j)(j,k)都是回文字串,其中i<=j<k. 可以发现,对于每一位i,只要预处理出来有多少个以i为右端的回文串和以i为左端的回文串.把那些串的另一端的 ...

  8. bzoj 1257: [CQOI2007]余数之和 (数学+分块)

    Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + … + k mod n的值 其中k mod i表示k除以i的余数. 例如j(5 ...

  9. PHP 事务写法

    $md=new Model(); //创建事务 $md->startTrans(); //开始事务 $md->table("ym_xxx")->where(&qu ...

  10. 「POJ-3608」Bridge Across Islands (旋转卡壳--求两凸包距离)

    题目链接 POJ-3608 Bridge Across Islands 题意 依次按逆时针方向给出凸包,在两个凸包小岛之间造桥,求最小距离. 题解 旋转卡壳的应用之一:求两凸包的最近距离. 找到凸包 ...