简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

目录搜索

jQuery Mobile 基础教程 jQuery Mobile 安装 jQuery Mobile 页面 jQuery Mobile 页面切换 jQuery Mobile 按钮 jQuery Mobile 按钮图标 jQuery Mobile 工具栏 jQuery Mobile 可折叠块 jQuery Mobile 网格 jQuery Mobile 表单 jQuery Mobile 表单 jQuery Mobile 表单输入元素 jQuery Mobile 表单选择菜单 jQuery Mobile 表单滑动条 jQuery Mobile 列表 jQuery Mobile 列表视图 jQuery Mobile 列表内容 jQuery Mobile 事件 jQuery Mobile 事件 jQuery Mobile 触摸事件 jQuery Mobile 滚屏事件 jQuery Mobile 方向改变事件 jQuery Mobile 实例 jQuery Mobile Data 属性 jQuery Mobile 图标 jQuery Mobile 事件 jQuery Mobile orientationchange 事件 jQuery Mobile pagebeforecreate 事件 jQuery 事件方法 jQuery bind() 方法 jQuery blur() 方法 jQuery change() 方法 jQuery click() 方法 jQuery dblclick() 事件 jQuery delegate() 方法 jQuery die() 方法 jQuery error() 方法 jQuery event.currentTarget 属性 jQuery event.data 属性 jQuery event.delegateTarget 属性 jQuery event.isDefaultPrevented() 方法 jQuery event.isImmediatePropagationStopped() 方法 jQuery event.isPropagationStopped() 方法 jQuery event.namespace 属性 jQuery event.pageX 属性 jQuery event.pageY 属性 jQuery event.preventDefault() 方法 jQuery event.relatedTarget 属性 jQuery event.result 属性 jQuery event.stopImmediatePropagation() 方法 jQuery event.stopPropagation() 方法 jQuery event.target 属性 jQuery event.timeStamp 属性 jQuery event.type 属性 jQuery event.which 属性 jQuery focus() 方法 jQuery focusin() 方法 jQuery focusout() 方法 jQuery hover() 方法 jQuery keydown() 方法 jQuery keypress() 方法 jQuery keyup() 方法 jQuery live() 方法 jQuery load() 方法 jQuery mousedown() 方法 jQuery mouseenter() 方法 jQuery mouseleave() 方法 jQuery mousemove() 方法 jQuery mouseout() 方法 jQuery mouseover() 方法 jQuery mouseup() 方法 jQuery off() 方法 jQuery on() 方法 jQuery one() 方法 jQuery $.proxy() 方法 jQuery ready() 方法 jQuery resize() 方法 jQuery scroll() 方法 jQuery select() 方法 jQuery submit() 方法 jQuery toggle() 方法 jQuery trigger() 方法 jQuery triggerHandler() 方法 jQuery unbind() 方法 jQuery undelegate() 方法 jQuery unload() 方法 jQuery Mobile pagebeforehide 事件 jQuery Mobile pagebeforeload 事件 jQuery Mobile pagebeforeshow 事件 jQuery Mobile pagecreate 事件 jQuery Mobile pagehide 事件 jQuery Mobile pageinit 事件 jQuery Mobile pageload 事件 jQuery Mobile pageloadfailed 事件 jQuery Mobile pageshow 事件 jQuery Mobile scrollstart 事件 jQuery Mobile scrollstop 事件 jQuery Mobile swipe 事件 jQuery Mobile swipeleft 事件 jQuery Mobile swiperight 事件 jQuery Mobile tap 事件 jQuery Mobile taphold 事件 jQuery Mobile 页面事件 jQuery Mobile CSS 类 jQuery Mobile 主题 jQuery Mobile 主题 jQuery Mobile 图标

文字

jQuery Mobile 列表视图

jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和无序(<ul>).

列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role="listview"属性。在每个项目(<li>)中添加链接，用户可以点击它：

实例

<ol data-role="listview">
  <li><a href="#">列表项m</a></li>
 </ol>

<ul data-role="listview">
   <li><a href="#">列表项</a></li>
</ul>

效果预览 »

列表样式的圆角和边缘，使用 data-inset="true" 属性设置:

实例

<ul data-role="listview" data-inset="true">

效果预览 »

	默认情况下，列表项的链接会自动变成一个按钮 (不需要 data-role="button")。

列表分隔

列表项也可以转化为列表分割项，用来组织列表，使列表项成组。

指定列表分割，给列表项<li>元素添加 data-role="list-divider" 属性即可：

实例

<ul data-role="listview">
 <li data-role="list-divider">欧洲</li>
  <li><a href="#">法国</a></li>
  <li><a href="#">德国</a></li>
 </ul>

效果预览 »

如果你有一个字母顺序排列的列表，（例如一个电话簿）通过 <ol> 或者<ul> 元素的 data-autodividers="true" 属性设置可以配置为自动生成的项目的分隔:

实例

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

效果预览 »

	data-autodividers="true" 可以配置为自动生成的项目的分隔。默认情况下，创建的分隔文本是列表项文本的第一个大写字母。

搜索过滤

jquery Mobile提供一个非常简单的方法，实现客户端搜索功能，筛选列表的选项。只需添加 data-filter="true" 属性即可:

实例

<ul data-role="listview" data-filter="true"></ul>

效果预览 »

默认情况下，搜索输入框默认的字符为 "Filter items..."。

通过设置mobileinit事件的绑定程序或者给 $.mobile.listview.prototype.options.filterPlaceholder 选项设置一个字符串，或者给列表设置 data-filter-placeholder 属性，可以设置搜索输入框的默认字符:

实例

<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">

效果预览 »

在线实例

只读列表
如何创建一个不带链接的列表 (不会是个按钮且不可点击)。