Mik*_*ike 2 filter jquery-mobile jquery-mobile-collapsible
我创建了一个简单的页面,其中有一个应用于可折叠集合项的jquery数据过滤器(请参阅下面的jsfiddle和代码).可折叠的设置项目最初是关闭的.
我希望能够在过滤器框中输入一个单词,并在返回时自动打开匹配的可折叠集项目吗？
我在文档中找不到任何可以帮助我的内容.有任何想法吗？
http://jsfiddle.net/mikewilsonuk/xpaGE/
<head>
<title>JQM latest</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.0/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<h1>Collapsible set with search</h1>
<div data-role="collapsible-set" >
<div data-role="listview" data-inset="true" data-filter="true">
<div data-role="collapsible">
<h1>Numero uno</h1>
<div>some text</div>
</div>
<div data-role="collapsible">
<h1>Number two</h1>
<div>some text</div>
</div>
<div data-role="collapsible">
<h1>Numero three <div>Grade: 25% (8th of 128)</div></h1>
<div>some potato</div>
</div>
<div data-role="collapsible">
<h1>Number four</h1>
<div>some text</div>
</div>
</div>
</div>
</div>
</div>
</body>
可过滤的小部件有一个事件(filterablefilter- http://api.jquerymobile.com/filterable/#event-filter),您可以在完成过滤后处理.为方便起见,我使用数据过滤器为您的div添加了一个id.
<div id="filterMe" data-role="listview" data-inset="true" data-filter="true">...
然后pagecreate,我添加了事件处理程序:
$(document).on("pagecreate", "#page", function(){
$("#filterMe").on( "filterablefilter", function( event, ui ) {
ui.items.each(function( index ) {
$(this).collapsible("option", "collapsed", $(this).hasClass("ui-screen-hidden")).removeClass("ui-screen-hidden");
});
});
});
返回的UI对象是一个jQuery对象,其items集合是过滤器处理的可折叠对象的列表.因此,使用该each()函数,您可以迭代列表并根据ui-screen-hidden过滤器是否已应用该类来设置折叠状态.之后,我删除了ui-screen-hidden类,以便不隐藏任何项目.如果你仍然想要隐藏项目,你可以删除.removeClass("ui-screen-hidden").
这是一个有效的FIDDLE
| 归档时间： |
|
| 查看次数： |
1694 次 |
| 最近记录： |