jquery - 如何更改 JQuery Mobile 列表过滤器(输入)的位置

Question

我正在使用 jQUery Mobile 列表控件及其过滤器功能。默认情况下，jQuery Mobile 将搜索输入置于 list ul 之上。我想更改此输入的位置？我一直在谷歌上搜索，但没有运气。我也浏览了 jQuery 文档。

Answer 1

这是一个工作示例:http://jsfiddle.net/Gajotres/V3CYc/

因为搜索表单不是 listvew 的一部分，所以此更改需要 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);
});