[英]jquery mobile search button
我在我的項目( jQuery Mobile )中實現了一個listview,並為搜索添加了一個文本框。
但我想先顯示列表視圖,並且只有當用戶點擊按鈕搜索列表上的文本框時才會顯示。
這是我的代碼:
<a data-role="button" href="#" class="search">Show Search box</a>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Pesquisa Contacto..." data-theme="d" data-divider-theme="d" style="padding:10px 10px 10px 10px;top:10px">
<li>
<a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
</li>
</ul>
JAVASCRIPT:
$(document).on('pagebeforeshow', '#p33', function () {
$('form.ui-listview-filter').hide();
});
$(document).on('click', '.search', function () {
$('form.ui-listview-filter').show();
});
隱藏搜索框。
$(document).on('pagebeforeshow', '#pageID', function () {
$('form.ui-listview-filter').hide();
});
按下按鈕顯示它。 該按鈕具有類search
。
$(document).on('click', '.search', function () {
$('form.ui-listview-filter').show();
});
一種方法是 - 將標記作為 -
<form id ="searchForm"class="ui-listview-filter ui-bar-c" role="search" style="display:none;"><div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c"><input placeholder="Filter items..." data-type="search" class="ui-input-text ui-body-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></span></a></div></form>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Pesquisa Contacto..." data-theme="d" data-divider-theme="d"
style="padding:10px 10px 10px 10px;top:10px">
<li><a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a></li>
</ul>
請注意, <form>
style="display:none;"
作為inline css
。
現在,取消隱藏/隱藏按鈕點擊操作上的搜索表單 - 類似於 -
$(document).on("click","#BUTTON-SELECTOR",function(){
$("searchForm").toggle();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.