2012-03-13 7 views
4

特定のリスト項目を展開して子項目を表示する機能を持つjquery-mobileでリストビューコントロールを作成しようとしています。私の目標は、このリストはフィルタリング可能であり、jquery-mobile data-filter = "true"属性で十分です。残念ながら、内部には<と> <という要素が継承されているように見え、複数のフィルタコントロールが使用されています。 jqueryでこの種の継承を防ぐためのベストプラクティスはありますか?無関係なフォームタグを削除するためにjqueryを使用することは効果的なハックですが、私はむしろそれを設計通りにやります。jquery mobile:複数のデータフィルタ表示

<div data-role="content"> 
    <div class="choice_list"> 
    <h2>Select an item</h2><br /> 
    <ul data-role="listview" data-inset="true" data-filter="true"> 
     <li><a>Item</a></li> 
     <li data-role="collapsible"> 
     <h3>Super Item</h3> 
     <ul data-role="listview" data-inset="true"> 
      <li><a>Sub Item</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 

は、例えば、このJSFiddleを見てみてください:http://jsfiddle.net/harlomic/SsJjS/3/

は、ここで簡単な例です。

答えて

2

次の3つのフィルタ入力のうちの2つを隠すためにCSSを使用することができます。http://jsfiddle.net/SsJjS/5/

testは、リストビューがされているページのIDであること:ここでは

/*hide all of the search filter forms*/ 
#test .choice_list form.ui-listview-filter { 
    display : none; 
} 

/*show just the first search filter form*/ 
#test .choice_list form.ui-listview-filter:nth-child(-n+3) { 
    display : block; 
} 

はデモです見つかったとchoice_listはあなたのリストビューのコンテナ要素のクラスです。

+0

答えをくれてありがとう、ジャスパー、CSSでフィルターを隠す方法を知っておいてよかったです。私はまだフィルタがDOMに追加されないようにするためのベストプラクティスを探しています。 – TahoeWolverine

+0

私はあなたがバグに遭遇したと信じています。私はこのようなネストされたリストを使用したことはありませんが、jQuery Mobileはデータフィルタを適用するときにネストされたリストビューとネストされていないリストビューの違いを理解していないようです。 – Jasper

1

JQMのネストされたリストでも同じ問題が発生しました。

私はそれを使いこなしましたが、< ul>からdata-role = "listview"を削除しても問題は解決しますが、あなたのJQMスタイリングは失われてしまいます。探している。私たちは皆、JQMの滑らかなレイアウトとスタイリングを求めています。

JQMはこの問題を修正する必要があります。これについてはドキュメントで何も見つかりませんでしたので、これはバグかもしれません。

+0

応答、cshuありがとう。これは基本的に同じ経験でした。 – TahoeWolverine

関連する問題