jQuery Mobile Filterable enhanced选项
jQuery Mobile是一个基于HTML5的用户界面系统,旨在制作可在所有智能手机、平板电脑和桌面设备上使用的响应式网站和应用程序。
Filterable是一个可以过滤任何元素的孩子的部件。在filterable的帮助下,一个表单、列表等可以被过滤。一个搜索栏出现在列表的顶部,搜索文本就写在那里。
在本教程中,我们将学习jQuery Mobile Filterable enhanced选项。enhanced 选项表示可过滤小部件所需的原始标记是否存在。使之成为真的,有些选项在第一次使用时就不工作。
语法 。增强的选项需要一个布尔值。
初始化可过滤的小部件。
$(".items").filterable({
enhanced:true,
});
- 获得enhanced选项。
var enhanced = $(".items").filterable("option", "enhanced");
- 设置enhanced选项。
$(".items").filterable("option", "enhanced", true);
CDN链接。为你的jQuery Mobile项目使用以下CDN。
<link href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel=”stylesheet”/>
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
例子 。在下面的例子中,enhanced 选项被设置为 “true”,filterReveal 被设置为 “true”,但它并没有发挥作用,因为它删除了Filterable所需的标记。但是在一次搜索之后,增强 选项就不再起作用了,因为小部件被加载了。
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
rel="stylesheet"/>
<script src=
"https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<h1 style="color:green; text-align: center;">
GeeksforGeeks
</h1>
<h3 style="text-align:center;">
jQuery Mobile Filterable enhanced Option
</h3>
<ul class="items">
<li>
<a href=
"https://www.geeksforgeeks.org/data-structures"
target="_blank">
Data Structures
</a>
</li>
<li>
<a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation"
target="_blank">
Interview preparation
</a>
</li>
<li>
<a href=
"https://www.geeksforgeeks.org/java"
target="_blank">
Java Programming
</a>
</li>
</ul>
<script>
$(".items").filterable({
enhanced:true,
filterReveal:true,
});
</script>
</body>
</html>
输出:
jQuery Mobile可过滤的增强选项