jQuery Mobile 列表内容
jQuery Mobile 列表缩略图
对于大于 16x16px 的图像,请在链接中添加 <img> 元素。
jQuery Mobile 将自动把图像调整至 80x80px:
实例:
<ul data-role="listview">
<li><a href="#"><img src="chrome.png">
</a></li>
</ul>
请使用标准 HTML 来填充带有信息的列表:
实例:
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome
免费的开源
web
浏览器。发布于
2008
年。
</p>
</a>
</li>
</ul>
jQuery Mobile 列表图标
如需向您的列表添加 16x16px 的图标,请向 <img> 元素添加 class="ui-li-icon" 属性:
实例:
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon"
>USA</a></li>
拆分按钮
如需创建带有垂直分隔栏的拆分列表,请在 <li> 元素内放置两个链接。
jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式,链接中的文本(如有)将在用户划过该图标时显示:
实例:
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
通过添加页面和对话框,可使链接的功能更强:
实例:
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download"data-rel="dialog">下载浏览器</a>
</li>
</ul>
弹出对话框:
计数泡沫
计数泡沫用于显示与列表项相关的数目,例如邮箱中的消息:
如需添加计数泡沫,请使用行内元素,比如 <span>,设置 class "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>
注释:如需在计数泡泡中显示正确的数字,就必须进行程序化更新。
更多示例:
如何为列表项设置不同的链接图标(右箭头是默认的)。
<div data-role="page" id="pageone">
<div data-role="content">
<h2>列表图标:</h2>
<ul data-role="listview" data-inset="true">
<li><a href="#">默认是右箭头</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li data-icon="info"><a href="#">data-icon="info"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
</div>
</div>
2、可折叠列表
如何创建隐藏和显示内容的列表。
<div data-role="page" id="pageone">
<div data-role="header">
<h1>可折叠列表</h1>
</div>
<div data-role="content">
<div data-role="collapsible">
<h4>A</h4>
<ul data-role="listview">
<li><a href="#">Adam</a></li>
<li><a href="#">Angela</a></li>
</ul>
</div>
<div data-role="collapsible">
<h4>B</h4>
<ul data-role="listview">
<li><a href="#">Bill</a></li>
<li><a href="#">Bob</a></li>
</ul>
</div>
<div data-role="collapsible">
<h4>C</h4>
<ul data-role="listview">
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Christina</a></li>
</ul>
</div>
</div>
<div data-role="footer">
<h1>此处是页脚文本</h1>
</div>
</div>
3、更多内容格式
如何制作日历。
<div data-role="page" id="pageone">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="content">
<h2>我的日历</h2>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">星期三, 1 月 2 日, 2013 <span class="ui-li-count">2</span></li>
<li><a href="#">
<h2>医生</h2>
<p><b>To Peter Griffin</b></p>
<p>Well, Mr. Griffin, I've looked into physical results.</p>
<p>Ah, Mr. Griffin, I'm not quite sure how to say this. Kim Bassinger? Bass singer? Bassinger?</p>
<p>But now, onto the cancer</p>
<p>You are a Cancer, right? You were born in July? Now onto these test results.</p>
<p class="ui-li-aside">Re: Appointment</p></a>
</li>
<li><a href="#">
<h2>Glen Quagmire</h2>
<p>Remember me this weekend!</p>
<br>
<p>- giggity giggity goo</p>
<p class="ui-li-aside">Re: Camping</p></a>
</li>
<li data-role="list-divider">周二, 1 月 1 日, 2013 <span class="ui-li-count">1</span></li>
<li><a href="#">
<h2>Louis</h2>
<p><b>Happy Girl!</b></p>
<p>Thank you so much!!</p>
<p class="ui-li-aside">Re: Christmas Gifts</p></a>
</li>
</ul>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
jQuery Mobile 列表内容的更多相关文章
- 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列表
向 <ol> 或 <ul> 元素添加 data-role="listview" 1.圆角和外边距 :data-inset="true" ...
- 一个简单的jquery左右列表内容切换应用
选中左边某个选项点击添加,即可将选中项添加到右边文本框中,点击选中全部即可将全部选项移到右边,移除按钮功能相同. html代码: <div id="main"> < ...
- 消除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 - 解决动态更新页面内容,CSS失效问题!
今天编写JQuery Mobile程序,需要对数组数据动态创建,并且每条数据对应一个复选框,于是我很顺利写了一个Demo,当我运行时候发现,和我期望的不一样!复选框确实创建出来了,但是却没有CSS效果 ...
随机推荐
- 用iptables 实现本地端口转发
设定本机2121端口转发到21端口 iptables -t nat -A PREROUTING -p tcp -i eth0 -d -j DNAT --to iptables -t nat -I PO ...
- onethink连接操作 sqlite 数据库
直接上干货:一个简单的demo onthink本身已经有sqlite数据库的驱动 不需要在下载 common下面的config文件: 'SQLITE'=> array( 'DB_TYPE' =& ...
- FIS
学习官网 http://fis.baidu.com/docs/beginning/getting-started.html 1. fis release: 编译并发布 fis releas ...
- 显示全部select change 异常
异常信息(异常类型:Genersoft.Platform.Core.Error.GSPException)异常提示:调用方法SelectChange发生异常,详细请看内部异常信息!异常信息:调用方法S ...
- Hive集成HBase;安装pig
Hive集成HBase 配置 将hive的lib/中的HBase.jar包用实际安装的Hbase的jar包替换掉 cd /opt/hive/lib/ ls hbase-0.94.2* rm -rf ...
- ios10 no route to host
IdTCPClient1 ios10 no route to host IOS 9 正常 IOS10 出错,参考下面的设置解决问题 http://www.sh-huhe.com/solution/14 ...
- MySQL的索引类型和左前缀索引
1.索引类型: 1.1B-tree索引: 注:名叫btree索引,大的方面看,都用的是平衡树,但具体的实现上,各引擎稍有不同,比如,严格的说,NDB引擎,使用的是T-tree,但是在MyISAM,In ...
- HMC破解控制台密码
一般我们装完HMC以后默认的登录控制台的账户是:admin 密码:abc123当我们可以自创建登录账户后,忘记密码了怎么办? 这里有两种方法: 1 由于HMC是suse系统,基于linux内核的,所以 ...
- {Latex}{Tabular}文本超出表格自动换行
用p或者m可以控制每列的宽度(需载入array宏包). 要整个表格相对于页面居中,用chngpage宏包的adjustwidth,如下: \documentclass[oneside]{article ...
- linux 学习 14 日志管理
第十四讲 日志管理 14.1 日志管理-简介 .日志服务 在CentOS .x中日志服务已经由rsyslogd取代了原先的syslogd服务.rsyslogd日志服务更加先进,功能更多.但是不论该服 ...