我正在探索jQuery Mobile,以开发带有ordertracking信息的仪表板的移动版本.计划的目的是使用包含所有订单的简单无序列表,人们可以点击他们想要了解的更多链接.
因为这个列表可能变得非常大,所以很容易拥有一个过滤功能,使用jQuery Mobile很容易.
因为这个列表可能变得非常大,所以很容易拥有一个过滤功能,使用jQuery Mobile很容易.
就像这样：
<ul data-role="listview" data-filter="true">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
data-filter =“true”负责显示搜索栏,它实际上非常好用.
但我唯一的问题是,当什么都没找到时,它什么都没显示,我希望有一些文字说“对不起,找不到订单”.
有没有人知道这是否可以使用jQuery Mobile,还是必须从头开始编码？
解决方法
//wait to do event binding until the page is being initialized
$(document).delegate('[data-role="page"]','pageinit',function () {
//cache the list-view element for later use
var $listview = $(this).find('[data-role="listview"]');
//delegate event binding since the search widget is added dynamically
//bind to the `keyup` event so we can check the value of the input after the user types
$(this).delegate('input[data-type="search"]','keyup',function () {
//check to see if there are any visible list-items that are not the `#no-results` element
if ($listview.children(':visible').not('#no-results').length === 0) {
//if none are found then fadeIn the `#no-results` element
$('#no-results').fadeIn(500);
} else {
//if results are found then fadeOut the `#no-results` element which has no effect if it's already hidden
$('#no-results').fadeOut(250);
}
});
});
这是一个演示：http://jsfiddle.net/6Vu4r/1/
