您现在的地位: 365体育备用网址 > bet365体育在线, > jQuery Mobile 教程 > jQuery Mobile 列表内容

jQuery Mobile 列表内容_365体育备用网址官网资讯

您现在的地位: 365体育备用网址 > bet365体育在线, > jQuery Mobile 教程 > jQuery Mobile 列表内容

jQuery Mobile 列表内容

此节有 75 人学习过     更新时间:2017-08-06 12:18   参与评论

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>

亲自试一试

注释:如需在计数泡泡中显示正确的数字,就必须进行程序化更新。我们将在下一章种讲解。

都坊娱乐现金游戏实例

更改列表项的默认链接图标
如何为列表项设置不同的链接图标(右箭头是默认的)。
可折叠列表
如何创建隐藏和显示内容的列表。
都坊娱乐现金游戏内容格式
如何制作日历。

如对本文有疑问,请提交到交流js金沙城娱乐平台,广大热心网友会为你解答!! 点击进入js金沙城娱乐平台


公布评论 (75人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换开心8娱乐网址
最新评论
------分隔线----------------------------
条评论
Sitemap