html - jquery mobile data-filter css样式--如何？

Question

我有一个 jquery 移动列表，其中包含该列表的搜索数据过滤器。我试图弄清楚如何更改控制数据过滤器的 css 类。特别是外部背景框颜色，但我想知道如何控制 jquery mobile.css 中找到的所有搜索框类。

我已经浏览了每个 jquery mobile 1.01.css ui-search 类，尝试了不同的颜色、位置等。我偶然发现了一些适用于内部框颜色的东西，但没有任何适用于外部背景框或选择区域时内部搜索框轮廓颜色。

有人知道如何控制 jquery 移动数据过滤器的样式吗？

此外，有人知道我可以在某个地方找到完整的列表，其中包含 jquery mobile css 控制中每个元素的描述吗？我一直在寻找和修补。我正在取得进展。只是不敢相信它没有在网络上的某个地方发布。我想要一个完整的解释。还没找到。

Answer 1

我不会改变类(class)。覆盖更容易。

将列表放入包装器中，如下所示:

<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 */ }

您还可以完全重新定位 ListView 过滤器。为此，在 JQM 中查找这一行:

.appendTo( wrapper )

并将其替换为:

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

然后给一个元素容器一个 .ui-filter-destination 类，其中应该包含您的过滤器，并且它将从过滤器顶部删除到您想要的包装元素。