• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

jQuery Mobile 列表内容

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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 列表图标

在列表 <img> 元素使用 class="ui-li-icon" 添加 16x16px 图标:

实例

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

尝试一下 »


分割按钮

在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表单。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
jQuery Mobile 表单发布时间:2022-02-02
下一篇:
jQuery Mobile 列表视图发布时间:2022-02-02
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap