Проблема: -
Здесь моя проблема в том, что когда я назначаю $('#ulmember').attr( 'data-filter','true');
, Даже я не получаю search-bar
в моей listview
.Even, когда я отображение listview data-filter
свойство в боевой готовности, то я получаю true
.Even этот атрибут не претендуя на listview
.И Этот атрибут Я подаю на memsearch click
.Я хочу назначить data-role="true"
кодом jquery. поэтому, если у кого-то есть представление о моей проблеме, пожалуйста, помогите мне.
Мой пример здесь
исходный код:-
<div data-role="header">
<div data-role="navbar" data-iconpos="right" >
<ul>
<li><a id="memsearch" href="#" data-icon="search" style="padding:0px"><h2 id="groupname" style="margin:8px">Member List</h2></a></li>
</ul>
</div>
</div>
<div id="memberlist">
<ul id="ulmember" data-role="listview" data-filter-placeholder="Search Member..." data-inset="true">
<li><a id="mem1"><h2>Member 1</h2></a></li>
<li><a id="mem2"><h2>Member 2</h2></a></li>
<li><a id="mem3"><h2>Member 3</h2></a></li>
<li><a id="mem4"><h2>Member 4</h2></a></li>
</ul>
</div>
Код JQuery: -
$(document).ready(function(){
$("#memsearch").click(function(){
alert($("#ulmember").attr("data-filter"));
$('#ulmember').attr( 'data-filter','true');
alert($("#ulmember").attr("data-filter"));
$("#ulmember").listview('refresh');
});
});
Его работа как ожидалось. Сделайте это так:
HTML:
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn toggle">Show/Hide Filter</a>
</div>
<ul data-role="listview" data-filter-placeholder="Search Member..." data-inset="true" id="ulmember">
<li><a href="#">Member 1</a>
</li>
<li><a href="#">Member 2</a>
</li>
<li><a href="#">Member 3</a>
</li>
<li><a href="#">Member 4</a>
</li>
<li><a href="#">Member 5</a>
</li>
<li><a href="#">Member 6</a>
</li>
</ul>
</div>
JS:
$("#ulmember").filterable({
filterReveal: false
});
$(".ui-filterable").addClass("ui-screen-hidden");
$(".toggle").on("click", function () {
$(".ui-filterable").toggleClass("ui-screen-hidden");
$("ul li").removeClass("ui-screen-hidden");
$("#ulmember").listview("refresh");
});
Вы можете проверить это: JSFIDDLE