如何使用jQuery Mobile过滤可折叠设置？

问题描述：

我有一个简单的可折叠设置，我想过滤单个过滤器，它将显示在集合之上。期望的结果是仅查看与我的搜索匹配的项目（不是项目出现的整个可折叠块）。如何使用jQuery Mobile过滤可折叠设置？

请告知如何处理这个任务......

<div data-role="content"> 
    <div data-role="collapsible-set"> 
     <div data-role="collapsible" data-content-theme="c"> 
      <h3>Firs Collapsed list</h3> 
      <ul data-role="listview" data-inset="false" data-theme="d"> 
       <li><a href="index.html">Acura</a></li> 
       <li><a href="index.html">Audi</a></li> 
       <li><a href="index.html">BMW</a></li> 
      </ul> 
     </div> 
     <div data-role="collapsible" data-content-theme="c"> 
      <h3>Second Collapsed list</h3> 
      <ul data-role="listview" data-inset="false" data-theme="d"> 
       <li><a href="index.html">Cadillac</a></li> 
       <li><a href="index.html">Chrysler</a></li> 
       <li><a href="index.html">Dodge</a></li> 
      </ul> 
     </div> 
     <div data-role="collapsible" data-content-theme="c"> 
      <h3>Third Collapsed list</h3> 
      <ul data-role="listview" data-inset="false" data-theme="d"> 
       <li><a href="index.html">Ferrari</a></li> 
       <li><a href="index.html">Ford</a></li> 
      </ul> 
     </div> 
    </div><!--/content-primary --> 
</div>

答

你可以把你data-role="collapsible"元素在data-role="listview"元素的列表项可以有data-filter="true"属性来自动创建一个过滤器的搜索里面输入。这里有一个例子：

<ul data-role="listview" data-filter="true" id="outer-ul"> 
     <li> 
      <div data-role="collapsible" data-content-theme="c"> 
       <h3>Firs Collapsed list</h3> 
       <ul> 
        <li><a href="index.html">Acura</a></li> 
        <li><a href="index.html">Audi</a></li> 
        <li><a href="index.html">BMW</a></li> 
       </ul> 
      </div> 
     </li> 
    </ul>

这里是一个演示：http://jsfiddle.net/Awg8W/2/

注意，有一些你必须要处理，用CSS问题。其中之一是有内部data-role="listview"元素创建多个搜索输入。我躲在所有的，但第一个用这个CSS：

//wait for page to initialize 
$(document).on('pageinit', '#page', function() { 

    //find the headings we want to watch 
    $(this).find('#outer-ul').find('.ui-collapsible-heading').on('click', function() { 

     //cache the parent collapsible widget 
     var that = $(this).closest('.ui-collapsible')[0]; 

     //collapse all other collapsible widgets 
     $(this).closest('ul').find('.ui-collapsible').filter(function() { 

      //filter-out the collapsible widget that got clicked, so it functions 
      return this !== that; 
     }).trigger('collapse'); 

     //since we are messing around with the listview widget, let's refresh it 
     $(this).closest('ul').trigger('refresh'); 
    }); 
});

第一，但是这是不准确我找。这个代码过滤可折叠的块，例如，如果我在搜索框中输入“ac”，将显示两个第一个可折叠块，其中包含所有项目，我希望结果将只有2个列表项目，Acura和Cadillac 。有任何想法吗？ – Victor 2012-08-13 21:13:24

这是纯金 – Pitto 2013-06-25 16:32:28

答

的问题是有点：

#page .ui-listview-filter:nth-child(n+2) { 
    display : none; 
}

更新

然后，您可以使用此jQuery代码复制手风琴效果旧的，但今天遇到同样的问题，这里是我的解决方法演示：http://jsfiddle.net/2Vg4z/。

所以，关于JS，我只是从原始的listview filter复制/粘贴代码并修改了一下，所以它可以应用于多个列表视图。

从中搜索字段将被创建的ul具有设置2个属性：

data-x-filter，像data-filter
id，一个布尔值，能够识别在搜索字段

其他ul必须通过此搜索字段过滤必须设置1属性：

data-x-filter-id，该ID设置之前

要使用它，只是复制/代码从的jsfiddle从this pastebin贴！

在演示中，我添加了一个空列表，使其位于可折叠组的顶部，但如果列表不为空，它也会过滤它自己的项目。

我希望它有帮助。

注意：这种解决方案并不完美，但我只是想这个很快。更好的解决方案是创建一个“搜索字段控件”来避免需要空列表，但它需要更多的编码。

答

我知道这个问题有点老，但我面临同样的问题。我找到了一个无需编写JavaScript或CSS的解决方案。我希望这对于有这个问题的其他人来说可能是有用的。 jsfiddle

编辑：一切都归功于很多An update using nested lists

<div data-role="page" id="page"> 
    <div data-role="content"> 
     <h1>Collapsible set with search</h1> 
     <div data-role="collapsible-set" data-filter="true"> 
      <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> 
     </div> 
    </div> 
</div>

如何使用jQuery Mobile过滤可折叠设置？

相关推荐