Jquery移动搜索按钮
jquery mobile search button
我已经实现了一个listview在我的项目(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();
});
相关文章:
- 如何使用提交按钮搜索表中的记录
- Magento上的搜索按钮损坏
- 如何在单击按钮时使用instantsearch.js启动搜索
- 搜索按钮谷歌地图在我的vf页面上不起作用
- jqgridnavgrid在搜索按钮和自定义按钮之后添加按钮
- 一页主题搜索/用下一个按钮突出显示文本
- 如何在第一次单击后禁用搜索按钮,直到结果来自服务器
- 将搜索按钮从一个站点复制到另一个站点:此搜索按钮如何工作,以及如何重现其操作
- 如何使用带有搜索按钮的Google Places API
- 如何获取ExtJs 4.1.1中的搜索按钮
- 允许在表刷新后键入数据表搜索按钮
- 按enter键不会通过p:defaultCommand点击预期的搜索按钮
- jQuery:如何创建一个带有多个单选按钮的实时搜索表单
- jQuery在多个表中搜索文本,如果找到文本,则单击按钮
- jqGrid不显示搜索按钮
- 谷歌地图如何通过点击按钮搜索地点
- 在运行时按搜索按钮突出显示文本
- 如何显示弹出窗口以在使用纯 JavaScript 从 Web 服务器获取/请求数据时禁用搜索按钮
- 点击弹出窗口中的按钮搜索结果
- Ionic 2添加页面,按钮搜索页面没有任何作用