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>

  

注释:如需在计数泡泡中显示正确的数字,就必须进行程序化更新。

更多示例:

1、更改列表项的默认链接图标

如何为列表项设置不同的链接图标(右箭头是默认的)。

<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 列表内容的更多相关文章

  1. jQuery Mobile 列表视图(带有自动检索)

    输入a: 输入b: jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的 HTML 列表:有序列表 (<ol>) 和无序列表 (<ul>). ...

  2. (五)Jquery Mobile列表

    Jquery Mobile列表 一.JM列表 1.普通列表            效果:            带序号的列表 将ul换成ol      效果:       2.data-inset=& ...

  3. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  4. Jquery Mobile列表

    向 <ol> 或 <ul> 元素添加 data-role="listview" 1.圆角和外边距 :data-inset="true" ...

  5. 一个简单的jquery左右列表内容切换应用

    选中左边某个选项点击添加,即可将选中项添加到右边文本框中,点击选中全部即可将全部选项移到右边,移除按钮功能相同. html代码: <div id="main"> < ...

  6. 消除JQuery Mobile 列表样式右侧箭头

    有时候我们看到JQM上面有一些呈现跟我们要的很像如下面这个Listview效果   程序代码如下: view sourceprint? 1.<ul data-role="listvie ...

  7. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  8. 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

    使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...

  9. JQuery Mobile - 解决动态更新页面内容,CSS失效问题!

    今天编写JQuery Mobile程序,需要对数组数据动态创建,并且每条数据对应一个复选框,于是我很顺利写了一个Demo,当我运行时候发现,和我期望的不一样!复选框确实创建出来了,但是却没有CSS效果 ...

随机推荐

  1. NOIP模拟赛-征兵

    一个国王,他拥有一个国家.最近他因为国库里钱太多了,要征集一只部队要保卫国家.他选定了N个女兵和M个男兵,但事实上每征集一个兵他就要花10000RMB,即使国库里钱再多也伤不起啊.他发现,某男兵和某女 ...

  2. maven 项目出现 java.lang.ClassNotFoundException

    需要修改的有两个地方1.项目根目录下的.project文件,用记事本打开,加入以下代码(把原来的<buildSpec>节点和<natures>替换了): <buildSp ...

  3. sass安装与使用

    安装: 1.安装ruby 2.安装Koala,用于sass编译 3.gem install sass(mac电脑安装如果安装报错,一般是权限问题,没有权限安装到ruby下面,因此可以尝试sudo ge ...

  4. 这些年正Android - 母亲

    记得小时候,在自己写完一篇作文,完成母亲布置的任务后,就会搬走母亲正在使用的大椅子,面朝门前的马路,就这么憧憬的坐着,听着母亲给小孩打针时,小孩哇哇的哭声,努力的幻想着自己以后能做一个顶天立地的男子汉 ...

  5. Java基础--定时任务Timer

    Java基础--定时任务Timer 一.Timer介绍 java.util.Timer java.util.TimerTask Timer是一个定时器类,通过该类可以为指定的定时任务进行配置.Time ...

  6. mysql中修改view的definer

    我常用的工具是navicat,但是修改definer不能用工具,只能用命令行: 数据库迁移到其他服务器上,会报definer错误,修改view的definer方法如下(比如把definer改为本地的, ...

  7. Unity已经学会的

    1.以MonoBehaviour为脚本的开发模式. 2.MonoBehaviour的大多数API. 3.动画系统大多数了解. 4.UI了解一些,能写UI. 5.Editor了解一些,能写Editor. ...

  8. Foundation框架—字符串(NSString)

    一 NSString不可变字符串 1.字符串的创建 //创建字符串常量 NSString *string1 = @"hello"; string1 = @"hello w ...

  9. python包下载地址

    https://pypi.python.org/pypi http://www.lfd.uci.edu/~gohlke/pythonlibs/ 当在线安装安装不了时,需要将安装包下载到本地,进行本地p ...

  10. Datasnap Image

    delphi用,不能与java.c#互相识别. procedure TServerMethods.UpdateDoc(ItemID : integer; doc : TStream); delphi用 ...