我目前正在探索 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/ http://jsfiddle.net/6Vu4r/1/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
