在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
jQuery Mobile 列表缩略图
默认情况下每个jQuery Mobile列表项都会包含一个向右的箭头图标。
大于 16x16px 的图像,请在链接中添加 <img> 元素。 jQuery Mobile 将自动缩放图像到 80x80px: 使用标准的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 列表图标在列表 <img> 元素使用 class="ui-li-icon" 添加 16x16px 图标: 分割按钮在JQuery Mobile的列表中,有时需要对选项内容做两个不同的操作,这时,需要对选项中的链接按钮进行分割。实现分割的方法是在<li>元素中再增加一个<a>元素,便可以在页面实现分割效果。 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> 尝试一下 » 注意:显示一个正确的气泡数字,必须修改编程方式。 这将在以后的章节解释。 更多实例 改变列表项的默认链接图标
可折叠的列表
更多内容格式
有关jQuery Mobile列表内容的介绍到此就结束了,在下一章中,我们将开始介绍jQuery Mobile表单。 |
请发表评论