jQuery Mobile 列表
2020-12-13 02:03
标签：style blog class code java color 一、jQuery Mobile
列表视图：jQuery
Mobile 中的列表视图是标准的 HTML 列表：有序列表 ( 1、创建列表 向 如需使这些项目可点击，请在每个列表项（ 如需为列表添加圆角和外边距，请使用 data-inset="true"
属性： 给文字加上超链接默认地，列表中的列表项会自动转换为按钮（无需
data-role="button"）。如果没有加超链接那么是只读列表，就不是按钮，不可点击 2、列表分隔符 列表分隔符（List Dividers）用于把项目组织和组合为分类/节。 如需规定列表分隔符，请向 如果您的列表是字母顺序的（比如通讯录），jQuery Mobile 自动添加恰当的分隔符，通过在 data-autodividers="true" 属性通过对列表项文本的首字母进行大写来创建分隔符。 3、搜索过滤器 如需在列表中添加搜索框，请使用 data-filter="true"
属性： 默认地，搜索框中的文本是 "Filter items..."。 如需修改默认文本，请使用 data-filter-placeholder 属性： 1、jQuery Mobile
列表缩略图 对于大于 16x16px 的图像，请在链接中添加 jQuery Mobile 将自动把图像调整至 80x80px： jQuery Mobile 列表,搜素材,soscw.com jQuery Mobile 列表 标签：style blog class code java color 原文地址：http://www.cnblogs.com/LO-ME/p/3714807.html) 和无序列表 (
)。
或
元素添加 data-role="listview"。
div data-role="page" id="pageone">
div data-role="content">
h1>有序列表：h1>
ol data-role="listview">
li>a href="#">列表项a>li>
li>a href="#">列表项a>li>
li>a href="#">列表项a>li>
ol>
h1>无序列表h1>
ul data-role="listview">
li>a href="#">列表项a>li>
li>a href="#">列表项a>li>
li>a href="#">列表项a>li>
ul>
div>
div>
div data-role="page" id="pageone">
div data-role="content">
h1>不带data-inset="true"属性h1>
ol data-role="listview">
li>a href="#">列表项a>li>
li>a href="#">列表项a>li>
li>a href="#">列表项a>li>
ol>
h1>带data-inset="true"属性h1>
ul data-role="listview" data-inset="true">
li>a href="#">列表项a>li>
li>a href="#">列表项a>li>
li>a href="#">列表项a>li>
ul>
div>
div>
div data-role="page" id="pageone">
div data-role="content">
h1>列表分隔符h1>
ul data-role="listview">
li data-role="list-divider">a href="#">广州a>li>
li>a href="#">清远a>li>
li data-role="list-divider">湛江li>
li>深圳li>
li data-role="list-divider">珠海li>
li>中山li>
li data-role="list-divider">东莞li>
li>河源li>
li data-role="list-divider">梅州li>
ul>
div>
div>
或
元素上设置 data-autodividers="true" 属性：
div data-role="page" id="pageone">
div data-role="content">
h1>列表分隔符h1>
ul data-role="listview" data-autodividers="true" data-inset="true">
li>a href="#">Adelea>li>
li>a href="#">Agnesa>li>
li>a href="#">Alberta>li>
li>a href="#">Billya>li>
li>a href="#">Boba>li>
li>a href="#">Calvina>li>
li>a href="#">Camerona>li>
li>a href="#">Chloea>li>
li>a href="#">Christinaa>li>
li>a href="#">Dianaa>li>
li>a href="#">Gabriela>li>
li>a href="#">Glena>li>
li>a href="#">Ralpha>li>
li>a href="#">Valariea>li>
ul>
div>
div>
div data-role="page" id="pageone">
div data-role="content">
h2>我的通讯录h2>
ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true">
li>a href="#">Adelea>li>
li>a href="#">Agnesa>li>
li>a href="#">Alberta>li>
li>a href="#">Billya>li>
li>a href="#">Boba>li>
li>a href="#">Calvina>li>
li>a href="#">Camerona>li>
li>a href="#">Chloea>li>
li>a href="#">Christinaa>li>
li>a href="#">Dianaa>li>
li>a href="#">Gabriela>li>
li>a href="#">Glena>li>
li>a href="#">Ralpha>li>
li>a href="#">Valariea>li>
ul>
div>
div>
div data-role="page" id="pageone">
div data-role="content">
h2>我的通讯录h2>
ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true" data-filter-placeholder="搜索姓名 ...">
li>a href="#">Adelea>li>
li>a href="#">Agnesa>li>
li>a href="#">Alberta>li>
li>a href="#">Billya>li>
li>a href="#">Boba>li>
li>a href="#">Calvina>li>
li>a href="#">Camerona>li>
li>a href="#">Chloea>li>
li>a href="#">Christinaa>li>
li>a href="#">Dianaa>li>
li>a href="#">Gabriela>li>
li>a href="#">Glena>li>
li>a href="#">Ralpha>li>
li>a href="#">Valariea>li>
ul>
div>
div>
二、jQuery Mobile 列表内容
