Как изменить положение фильтра мобильного списка JQuery (ввод)

Я использую элемент управления jQUery Mobile List вместе с его функциями фильтрации. По умолчанию jQuery mobile добавляет поисковый ввод перед list ul. Я хочу изменить расположение этого входа? Я искал в Google, но не повезло в этом. Я также просмотрел документы jQuery.


jquery css filtering jquery-mobile jquery-mobile-listview
person Kamran Ali    schedule 06.05.2013    source источник
comment
переопределить этот класс .ui-listview-filter, как в этом примере jsfiddle.net/Palestinian/RdFp9, вы также можете сделать это динамически .   -  person Omar    schedule 06.05.2013

Ответы (1)


arrow_upward
2
arrow_downward

Вот рабочий пример: http://jsfiddle.net/Gajotres/V3CYc/

Поскольку форма поиска не является частью списка, для этого изменения необходим jQuery.

HTML:

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." id="custom-listview">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
</ul>

CSS:

.ui-listview-filter {
    margin: 15px -15px 15px !important;
}

JavaScript:

$(document).on('pagebeforeshow', '#index', function(){ 
    var filter = $('#custom-listview').prev();
    $('#custom-listview').parent().append(filter);
});
person Gajotres    schedule 06.05.2013