jQuery Mobile 搜索按钮

Question

jQuery Mobile 搜索按钮

3

我在我的项目（jQuery Mobile）中实现了一个列表视图，并添加了用于搜索的文本框。

但是我希望首先显示列表视图，只有当用户点击搜索按钮时才会在列表上方打开一个文本框。

以下是我的代码：

 <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();
});

- user2232273

你想隐藏搜索框，直到点击按钮吗？ - Omar

是的，这就是我尝试做的事情... - user2232273

我已经更新了代码...在Ishank的帮助下...但是显示加载页面错误。 - user2232273

请检查此链接：http://jsfiddle.net/Palestinian/Mt46d/ - Omar

这就是它...如何使用toogle？ - user2232273

2个回答

3

一种方法是 - 将标记设置为 -

<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">&nbsp;</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>使用inline css的方式添加了style="display:none;"。

现在，在按钮点击事件中显示/隐藏搜索表单-代码示例如下：

$(document).on("click","#BUTTON-SELECTOR",function(){
             $("searchForm").toggle();
});

- Ishank

我已经使用你的解决方案更新了我的代码，但是当我点击添加的按钮时，页面加载出错了，可能我选择了错误的类？ - user2232273

请确保您在正确的位置添加了jQuery部分，并且所有必需的jQuery和jQuery Mobile .js和.css文件都包含在HTML页面中。 - Ishank

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Omar · Accepted Answer

演示

隐藏搜索框。

$(document).on('pagebeforeshow', '#pageID', function () {    
 $('form.ui-listview-filter').hide();
});

$(document).on('click', '.search', function () {
 $('form.ui-listview-filter').show();
});