Как назначить собственный стиль фильтру представления списка в jQuery mobile 1.4.0?

У меня есть представление списка с фильтром. Как я могу изменить тему фильтра, добавить к ней определенный стиль с помощью css? так как мне нужно изменить значок фильтра, границу, но я не знаю, как назначить ему эти стили, пожалуйста, помогите мне..

<div data-role="page" id="index">

<div  data-role="header" data-position="fixed"  data-tap-toggle="false" data- fullscreen="false"   data-theme="b">

<div  style="padding-top:15px;" > <font  color="white"   size="6px" >Index </font></div>
</div>
<div data-role="content"  >

<ul data-role="listview"  data-filter="true" data-filter-placeholder="Search..  " 
data-split-icon="delete"  style="margin-top: 30px;" > 
    <li> element1</li>
     <li> element2</li>
     <li> element3</li>
     <li> element4</li>
     <li> element5</li>
     <li> element6</li>

    </ul>
 </div>
</div>

filter jquery-mobile jquery-mobile-listview
person user    schedule 28.01.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Создайте вход для поиска и назначьте идентификатор.

<input type="search" id="custom-filter" />

В ul добавьте атрибут data-input со значением id входных данных поиска, начиная с # хэш-тега data-input="#custom-filter".

<ul data-role="listview" data-filter="true" data-input="#custom-filter">

Создайте собственный стиль и добавьте его в #custom-filter div, чтобы стили применялись к входным данным.

$("#custom-filter").closest("div").addClass("styles");

Демо

person Omar    schedule 28.01.2014
comment
@OmarСпасибо, я пробовал это, но это не сработало в моем приложении, так как jsfiddle граница применяется к странице (вокруг страницы), а заполнитель не отображается в фильтре! - person user; 28.01.2014
comment
@user Я использовал другой идентификатор в скрипке, чем в ответе. Заполнитель должен быть добавлен к пользовательскому вводу. - person Omar; 28.01.2014
comment
@OmarIhave использовал код из jsfiddle, и я убедился, что идентификатор ввода и ввод данных в списке совпадают в моем коде. - person user; 28.01.2014
comment
@OmarЧто касается заполнителя, вы назначаете его в представлении списка, как показано в jsfiddle jsfiddle.net/Palestinian/yCLqU - person user; 28.01.2014
comment
@OmarI использовал этот код в своем мобильном приложении jQuery 1.4.0, проблема в том, что рамка появляется вокруг страницы, а не вокруг ввода поиска, не могли бы вы мне помочь ?? Я много раз пытался заставить его работать, но граница все еще появляется вокруг страницы. - person user; 28.01.2014
comment
@OmarПроблема в ближайшем (div), это будет содержимое страницы, потому что вокруг страницы появилась рамка, и когда я попробовал этот ‹div›‹input type=search id=custom-filter /›‹/div›, результат появился как изображение, которое я загрузил выше, не могли бы вы помочь мне в решении этой проблемы, пожалуйста? - person user; 28.01.2014
comment
@user замените closest("div") на closest("ui-input-search") - person Omar; 28.01.2014
comment
@OmarI пробовал, не получилось, граница вообще не появилась - person user; 28.01.2014
comment
то вы вызываете $("#custom-filter").closest("div").addClass("styles"); до создания input. Где вы разместили этот код? @пользователь - person Omar; 28.01.2014
comment
это то, что я пробовал: document.addEventListener('deviceready', onDeviceReady, false); function onDeviceReady() {$('#custom-filter').closest(ui-input-search).addClass(styles);} - person user; 28.01.2014
comment
@user, вы должны поместить его внутрь pagecreate. на deviceready страница еще не создана, поэтому стиль переходит в ближайший div. - person Omar; 28.01.2014
comment
@OmarЯ попробовал, но, к сожалению, проблема осталась :( граница не появилась, что нам теперь делать? - person user; 28.01.2014
comment
давайте продолжим это обсуждение в чате - person Omar; 28.01.2014