jqueryモバイルデータフィルタCSSスタイル - どのように？

Question

私はリストのためにデータフィルタを持つjqueryモバイルリストを持っています。私はどのようにデータフィルタを制御するCSSクラスを変更するかを把握しようとしています。特に外側の背景ボックスの色ですが、jquery mobile.cssにあるすべての検索ボックスクラスを制御する方法を知りたいと思います。

私はそれぞれのjqueryモバイル1.01.css ui-searchクラスを試してみました。色、位置などを試してみました。内側のボックスカラーでは動作しますが、外側のバックグラウンドボックスでは動作しませんでしたエリアが選択されると、内側の検索ボックスのアウトラインカラーが表示されます。

誰でもjqueryモバイルデータフィルタのスタイリングを制御する方法を知っていますか？

また、私はjqueryモバイルCSSの各項目が何を制御しているのかを記述した完全なリストを見つけることができます。私は探していたしていた。私は前進している。ちょうどそれがウェブ上のどこかに公開されていないとは信じられません。私は完全な説明が欲しい。まだ見つけていない。

Answer 1

私はクラスを変更しません。オーバーライドは簡単です。

そうのようなラッパーの内側にあなたのリストを置く：

<div class="listWrap"> 
    <ul data-role="listview" data-filter="true"> 
    // list items 
    </ul> 
</div> 

これは、あなたがそうのようなクラスをオーバーライドするためにCSSを使用することができます今すぐ

<div class="listWrap"> 
    <form class="ui-listview-filter ui-bar-c ui-listview-filter-inset" role="search"> 
     // your filter 
     <div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c"> 
     // input 
     <input placeholder="" data-type="search" class="ui-input-text ui-body-c"> 
     // close button 
     <a title="clear text" class="ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-input-clear-hidden" href="#" data-theme="c"> 
      <span class="ui-btn-inner ui-btn-corner-all"> 
       <span class="ui-btn-text">clear text</span> 
       <span class="ui-icon ui-icon-delete ui-icon-shadow"></span> 
      </span> 
      </a> 
     </div> 
    </form>  
    <ul data-role="listview" data-filter="true"> 
    // list items 
    </ul> 
</div> 

次の充実したマークアップになります：

.listWrap _your_search_filter_class { /* do something */ } 

また、リストビューフィルタを完全に再配置することもできます。これを行うには、JQMにこの行を探します：

.appendTo(wrapper) 

、これに置き換える：

.appendTo($('.ui-page-active .ui-filter-destination').length > 0 ? $('.ui-filter-destination') : wrapper) 

その後要素コンテナに.ui-フィルター先のクラスを与え、どのフィルタを含める必要があります。フィルタの上部から必要なラッパー要素に削除されます。

Answer 2

リストをラップする必要はありません、単に「データ・フィルタ・テーマ」

<ul data-role="listview" data-filter="true" data-filter-placeholder="Custom filter text" data-filter-theme="b"> 

Answer 3

を使用私は@Frequentは（（私は別のdivでラップしていなかった除く）だけでなく、@shanabus示唆したものを使用しましたインスペクターを見て）。これは、迷惑なBGの色を取り除くために私のために働いた

form.ui-listview-filter.ui-bar-h.ui-listview-filter-inset { background:none!important; border:none!important;} 

を、フォームを作る： は、私は次のようであるThemeRollerのが提供するCSSをオーバライドするために自分のコードにデータ・テーマ=「G」を使用しています色のついた背景にきれいに座ってください。