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 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 <img> 元素. jQuery Mobile 将自动把图像调整至 80x80px: 实例: &l ...
- jQuery Mobile 列表视图(带有自动检索)
输入a: 输入b: jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的 HTML 列表:有序列表 (<ol>) 和无序列表 (<ul>). ...
- (五)Jquery Mobile列表
Jquery Mobile列表 一.JM列表 1.普通列表 效果: 带序号的列表 将ul换成ol 效果: 2.data-inset=& ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- 消除JQuery Mobile 列表样式右侧箭头
有时候我们看到JQM上面有一些呈现跟我们要的很像如下面这个Listview效果 程序代码如下: view sourceprint? 1.<ul data-role="listvie ...
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录
使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...
- jQuery Mobile入门
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
- JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
随机推荐
- JQ查找到带有某个字符,并起类名,然后替换这个某个字符
<script> setTimeout("asdasd()",1000); //定时器是为了防止其他JS影响到它,可以不加 function asdasd() { $( ...
- Java使用RabbitMQ之整合Spring(消费者)
依赖包: <!--RabbitMQ集成spring--> <!-- https://mvnrepository.com/artifact/org.springframework.am ...
- Error:Failed to resolve: com.android.support:appcompat-v7
repositories { maven { url "https://maven.google.com" } } implementation 'com.android.supp ...
- DotNetty 实现 Modbus TCP 系列 (四) Client & Server
本文已收录至:开源 DotNetty 实现的 Modbus TCP/IP 协议 Client public class ModbusClient { public string Ip { get; } ...
- Python图形库Turtle
画笔绘制状态函数 函数 描述 pendown() 放下画笔 penup() 提起画笔,与pendown()配合使用 pensize(width) 设置画笔线条的粗细为指定大小 画笔运动函数 函数 描述 ...
- 云服务器ECS
云服务器Elastic Compute Service(ECS)是阿里云提供的一种基础云计算服务.使用云服务器ECS就像使用水.电.煤气等资源一样便捷.高效.您无需提前采购硬件设备,而是根据业务需要, ...
- 多校#5-1005-Instring-HDU5785-manacher+维护
寻找三元组(i,j,k),使得(i,j)(j,k)都是回文字串,其中i<=j<k. 可以发现,对于每一位i,只要预处理出来有多少个以i为右端的回文串和以i为左端的回文串.把那些串的另一端的 ...
- 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 ...
- PHP 事务写法
$md=new Model(); //创建事务 $md->startTrans(); //开始事务 $md->table("ym_xxx")->where(&qu ...
- 「POJ-3608」Bridge Across Islands (旋转卡壳--求两凸包距离)
题目链接 POJ-3608 Bridge Across Islands 题意 依次按逆时针方向给出凸包,在两个凸包小岛之间造桥,求最小距离. 题解 旋转卡壳的应用之一:求两凸包的最近距离. 找到凸包 ...