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 ...
随机推荐
- qtp 自动化测试--点滴 自定义显示工具菜单 trzedit
tools-customize-toolbars-勾选后关闭 2 trzedit 使用winobject 方法取值 Window("驷惠WIN系列[汽车4S连锁管理软件] 6.") ...
- SpringJdbc框架
import javax.sql.DataSource; import org.springframework.jdbc.core.JdbcTemplate; import JdbcUtils.Jdb ...
- onkeyup+onafterpaste 只能输入数字和小数点--转载
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'') ...
- 阿里云 ECS 安全组
以前在案例云买的ECS我一般都是 连上 ssh,然后把网站文件拿上去 ,安装好需要的环境 然后就可以顺利的打开网站了,这次帮一个朋友买的阿里云ECS让我蒙了, 一切都准备好了 网站打不开 防火墙也检查 ...
- linux固定IP
在新安装的Linux系统命令行下, 敲入:ifconfig,显示如下界面. 上面这张图显示网卡没有启动,那么我们敲入代码:ifup eth0启动网卡. 网卡启动后,我们可以看出,IP地址和网关等其他信 ...
- jQuery代码优化的9种方法
前面的话 本文将详细介绍jQuery代码优化的9种方法 用对选择器 在jQuery中,可以用多种选择器,选择同一个网页元素.每种选择器的性能是不一样的,应该了解它们的性能差异 1.最快的选择器:id选 ...
- vi简短教程
1.模式 命令行模式:光标的移动.内容删除移动复制操作 插入模式:文字输入,即编辑状态 底行模式:文件保存或退出vi,设置编辑环境 2.基本操作 vi myfile,输入vi 文件名,则进入vi. 3 ...
- h5 打开 app
目前只支持在浏览器中打开,如果非浏览器,例如 微信 支付宝 钉钉 第三方 app 中会弹出下载页面 schemeUrl 为 和app 约定url openApp() { /* 小希学生端 aoji ...
- Spring 使用介绍(六)—— AOP(二)
一.切入点语法 1)通配符 AOP支持的通配符: *:匹配任何数量字符 ..:匹配任何数量字符的重复,在类型模式中匹配任何数量子包,在方法参数模式中匹配任何数量参数 +:匹配指定类型的子类型,仅能作为 ...
- Codeforces1073E Segment Sum 【数位DP】
题目分析: 裸的数位DP,注意细节. #include<bits/stdc++.h> using namespace std; ; int k; ][],sz[][],cnt[][]; ] ...