自动打开过滤的可折叠设置项目 - jquery mobile [英] Automatically open filtered collapsible set items - Jquery mobile
问题描述
我创建了一个简单的页面，其中有一个应用于可折叠设置项目的jQuery数据过滤器（请参阅下面的jsfiddle和代码）。可折叠的设置项目最初是关闭的。
我希望能够在过滤器框中输入一个单词，并在返回时自动打开匹配的可折叠设置项目。
我无法在文档中找到任何帮助我的内容。任何想法？
http://jsfiddle.net/ mikewilsonuk / xpaGE /
< head>
< title> JQM latest< / title>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =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 =pageid =page>
< div data-role =content>
< h1>通过搜索< / h1>设置可折叠的设置
< div data-role =collapsible-set>
< div data-role =listviewdata-inset =truedata-filter =true>
< div data-role =collapsible>
< h1> Numero uno< / h1>
< div>一些文字< / div>
< / div>
< div data-role =collapsible>
< h1>二号< / h1>
< div>一些文字< / div>
< / div>
< div data-role =collapsible>
< h1> Numero three< div>等级：25％（128的8）< / div>< / h1>
< div>一些马铃薯< / div>
< / div>
< div data-role =collapsible>
< h1>四号< / h1>
< div>一些文字< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / body>
可过滤的小部件有一个事件（ 返回的UI对象是一个jQuery对象，其items收集是筛选器处理的可折叠对象的列表。因此，使用 以下是 FIDDLE I've created a a simple page which has a jquery data-filter applied to collapsible set items (please see jsfiddle and code below). The collapsible set items are closed initially. I want to be able to enter a word into the filter box and have the matching collapsible set items automatically opened when they are returned? I can't find anything in the docs that will help me. Any ideas? http://jsfiddle.net/mikewilsonuk/xpaGE/
The filterable widget has an event ( Then on The returned UI object is a jQuery object whose items collection is a list of the collapsible objects the filter handled. So using the Here is a working FIDDLE
这篇关于自动打开过滤的可折叠设置项目 - jquery mobile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ filterablefilter - http://api.jquerymobile.com/filterable/#event-filter你可以在完成过滤后处理。为了方便起见，我在数据过滤器中添加了一个id给你的div。
$ p $ lt; code>< div id =filterMedata-role =listviewdata-inset =truedata-filter =true> ...
<然后在 pagecreate 上添加事件处理函数：
$ b $ pre $ $ $ $ $ $ $ $ （document）.on（pagecreate，#page，function（）{
$（＃filterMe）。 items.each（function（index）{
$（this）.collapsible（option，collapsed，$（this）.hasClass（ui-screen-hidden））。removeClass（屏幕隐藏）;
}）;
}）;
}）;
each（）函数，可以迭代列表并根据类是否为 ui-screen-hidden 已被过滤器应用。之后，我删除了 ui-screen-hidden 类，这样就不会隐藏任何项目。如果你还想隐藏项目，你可以删除 .removeClass（ui-screen-hidden）。
<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) you can handle after it is done filtering. For convenience I added an id to your div with a data-filter.<div id="filterMe" data-role="listview" data-inset="true" data-filter="true">...
pagecreate, I added the event handler:$(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");
});
});
});
each() function, you can iterate the list and set the collapsed state based on whether the class ui-screen-hidden has been applied by the filter. After that I remove the ui-screen-hidden class so that none of the items are hidden. If you still want items hidden as well, you can just remove the .removeClass("ui-screen-hidden").
