JQuery мобильный фильтр данных CSS стиль - как?

Question

У меня есть мобильный список jquery с поиском data-filter для списка. Я пытаюсь выяснить, как изменить классы CSS, которые контролируют фильтр данных. В частности, цвет внешнего фона окна, но я хотел бы знать, как управлять всеми классами окна поиска, которые находятся в jquery mobile.css.

Я прошел каждый класс пользовательского поиска jquery mobile 1.01.css, пробуя разные цвета, позиции и т. Д. Я наткнулся на некоторые вещи, которые работают для цвета внутреннего блока, но ничего для внешнего фонового блока или цвета контура внутреннего поля поиска при выделении области.

Кто-нибудь знает, как управлять стилем мобильного фильтра данных jquery?

Кроме того, кто-нибудь знает, где я могу найти полный список с описанием того, что каждый элемент в jquery mobile css контролирует? Я искал и возился. Я делаю успехи. Просто не могу поверить, что это не опубликовано где-то в Интернете. Я хотел бы получить полное объяснение. Еще не нашли.

Answer 1

Я бы не стал менять классы.Переопределение проще.

Поместите свой список в оболочку, например, так:

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

Это приведет к следующей расширенной разметке

<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>

Теперь вы можете использовать CSSчтобы переопределить классы следующим образом:

.listWrap _your_search_filter_class {  /* do something */ }

Вы также можете полностью переместить фильтр просмотра списка.Для этого в JQM ищет эту строку:

.appendTo( wrapper )

и заменяет ее следующим:

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

Затем задайте класс .ui-filter-destination в контейнер элемента, который должен включать ваш фильтр, и он будет удален из верхней части фильтра в нужный элемент обертки.

Answer 2

Нет необходимости переносить список, просто используйте «data-filter-theme»

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

Answer 3

Я использовал то, что предложил @Frequent (за исключением того, что я не заключил в другой div), а также @shanabus (просматривая инспектор). Я использую data-theme = "g", поэтому мой код для переопределения CSS, предоставленный themeroller, выглядит следующим образом:

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

Это помогло мне избавиться от раздражающего цвета bg и аккуратно расположить форму на любом цветном фоне.