jQuery Mobile 过滤
来源:互联网 发布:开男士精品淘宝店 编辑:程序博客网 时间:2024/06/05 01:01
可过滤元素
所有的元素如果有一个或更多的子元素均可过滤。
- 你想过滤的元素必须使用 data-filter="true" 属性。
- 创建 <input> 元素并指定 id,元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。将 <input> 元素放置于一个表单中,表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段与过滤元素的外边距。
- 接着为过滤的元素添加 data-input 属性。该值需要是 <input> 元素的 id。
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter">
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
</ul>
自定义过滤
一般的插入到各个列表项的文本就是作为过滤的文本使用(如 A 对应 "Adele" 或 "B" 对应 "Billy")。 但是,如果你想指定自定义的过滤的文本,你需要在子元素中使用 data-filtertext 属性:
如果你在元素中使用了 data-filtertext 属性,元素的源文本内容在过滤时将被忽略, 这时你如果还要查找列表项"Adele",需要使用的关键字为:f, a, v 或 fav。
<input id="myFilter"data-type="search">
</form>
<ul data-role="listview" data-filter="true"data-input="#myFilter" data-autodividers="true" data-inset="true">
<li data-filtertext="fav"><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Frank</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
过滤div中的文字
<form>
<input data-type="search" id="divOfPs-input">
</form>
<div class="elements" data-filter="true" data-input="#divOfPs-input">
<p><strong>These</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
<p><strong>p elements</strong> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
<p><strong>are</strong> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
<p><strong>filterable</strong> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
</div>
过滤表格
<form>
<input id="filterTable-input" data-type="search" placeholder="Search For Customers...">
</form>
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable" data-filter="true" data-input="#filterTable-input">
<thead>
<tr>
<th data-priority="6">CustomerID</th>
<th>CustomerName</th>
<th data-priority="1">ContactName</th>
<th data-priority="2">Address</th>
<th data-priority="3">City</th>
<th data-priority="4">PostalCode</th>
<th data-priority="5">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Antonio Moreno Taquer</td>
<td>Antonio Moreno</td>
<td>Mataderos 2312</td>
<td>Mico D.F.</td>
<td>05023</td>
<td>Mexico</td>
</tr>
<tr>
<td>3</td>
<td>Around the Horn</td>
<td>Thomas Hardy</td>
<td>120 Hanover Sq.</td>
<td>London</td>
<td>WA1 1DP</td>
<td>UK</td>
</tr>
<tr>
<td>4</td>
<td>Berglunds snabbk</td>
<td>Christina Berglund</td>
<td>Berguvsven 8</td>
<td>Lule</td>
<td>S-958 22</td>
<td>Sweden</td>
</tr>
</tbody>
</table>
- jquery mobile 过滤
- jQuery Mobile 列表过滤
- jQuery Mobile 过滤
- 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
- arm linux c++编译std 提示 undefined reference
- Tyvj P1034 尼克的任务
- 并行编程中的lock free技术
- 2017年第0届浙江工业大学之江学院程序设计竞赛决赛 Problem C: 勤劳的ACgirls(n个相同球放到m个不同的盒子里。)
- php中0与空 Null false的区别
- jQuery Mobile 过滤
- 剑指Offer-25
- 数据库mysqldump指令参数详解
- LOCAL_PREBUILT_* Usage
- Windows安装梯度提升开发库LightGBM
- Spring Cloud构建微服务架构(五)服务网关
- 一篇文章入门卡尔曼滤波器
- JAVA数据结构Map浅谈!!
- 找工作笔试面试那些事儿(1)---C,C++基础和编程风格(2)