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 ...
随机推荐
- Lodop打印控件 超文本自动分页
Lodop打印控件打印html超文本,通常传入一个超文本内容可能会超过纸张,如果要拆分每页显示哪些然后手动分页比较麻烦,Lodop中的超文本都有自动分页的特点.自动分页的依据:1.超文本超过设置的打印 ...
- gauss——seidel迭代
转载:https://blog.csdn.net/wangxiaojun911/article/details/6890282 Gauss–Seidelmethod 对应于形如Ax = b的方程(A为 ...
- .net core compatibility windows & windows compatible Linux
Who is this package for? This package is meant for developers that need to port existing .NET Framew ...
- JVM安全点操作与测试小记
JVM的安全点学习与代码测试 监控安全点(打印JVM停顿时间,不止GC,处理毛刺): -XX:+PrintGC -XX:+PrintGCApplicationStoppedTime 取消偏向锁: -X ...
- BZOJ3435[Wc2014]紫荆花之恋——动态点分治(替罪羊式点分树套替罪羊树)
题目描述 强强和萌萌是一对好朋友.有一天他们在外面闲逛,突然看到前方有一棵紫荆树.这已经是紫荆花飞舞的季节了,无数的花瓣以肉眼可见的速度从紫荆树上长了出来.仔细看看的话,这个大树实际上是一个带权树.每 ...
- HUST 1555 数学作业
参考自:https://www.cnblogs.com/ECJTUACM-873284962/p/6394892.html 1555 - A Math Homework 时间限制:1秒 内存限制:12 ...
- Django 缓存、序列化、信号
一,缓存 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcac ...
- Ionic3新页面去除Tabs的菜单问题总结
问题 要求在[我的]页面,点击[退出登录]按钮,返回到登录页面. 使用 this.navCtrl.setRoot(LoginPage); 或者 this.navCtrl.push(LoginPage) ...
- 爬虫_豆瓣电影top250 (正则表达式)
一样的套路,就是多线程还没弄 import requests import re import json headers = 'Mozilla/5.0 (Windows NT 10.0; WOW64) ...
- 「HDU - 2857」Mirror and Light(点关于直线的对称点)
题目链接 Mirror and Light 题意 一条直线代表镜子,一个入射光线上的点,一个反射光线上的点,求反射点.(都在一个二维平面内) 题解 找出入射光线关于镜子直线的对称点,然后和反射光线连边 ...