带有小提琴的标题中的jQuery移动搜索输入（标题的顶部/覆盖）答案

【问题标题】：jQuery mobile search input in header (overtop/overlay of header) with fiddle带有小提琴的标题中的jQuery移动搜索输入（标题的顶部/覆盖）
【发布时间】：2015-04-17 07:34:13
【问题描述】：

您好，我目前正在开发一个 jQuery 移动项目。在标题中，我在左侧有一个面板图标，中心是标题，右侧是搜索图标。

搜索图标当前显示搜索输入，效果很好。输入显示在标题上方，其他所有内容都被下推。

我的问题是如何调整它，以便搜索输入显示在标题内（如覆盖），而不是在标题上方。与关闭按钮 (X) 一起返回默认标题？

<body>


<div data-role="page" data-theme='d'>

    <div data-display="push" data-role="panel" data-theme="c" id=
    "sidebar">
        <ul data-icon="false" data-inset="false" data-role="listview">

            <li>
                <a data-ajax="false" href="index.html"><i class=
                'fa fa-home fa-fw'></i>Home</a>
            </li>

        </ul>

    </div>

    <div >
 <form data-ajax="false" action="search.html" data-theme="b" id="searchform" name="searchform">

 <input data-clear-btn="true" autocomplete="off" autocorrect="off" autocapitalize="off" data-role="none" id=
            "" name="q" placeholder="Search..." type=
            "text">
        </form>
    </div>


    <div data-role="header" data-tap-toggle="true" data-theme='b'>

         <a data-role="none" href='#sidebar'><img alt="sidebar" id="header-menu-icon" src="images/menu-icon.png"></a>

   <h1 class="header-title">Hvac Techpedia</h1>

     <a data-role="none" href='#' id="a-search"><img alt="search" id="header-search-icon" src="images/search-icon.png"></a>

这里是 CSS、HTML 和 JS 的小提琴。点击右上角的搜索栏。

http://jsfiddle.net/xstrikax/cj6nc8xa/4/

一直在修补，但似乎无法弄清楚。在标题中添加data-positon="fixed" 会使栏（搜索输入）出现在标题下方。

这是我想要做的一个例子：

http://www.style.com/magazine

使用 JQM 1.4.5 和 Jquery 1.11.1。

任何帮助或建议都会很棒！谢谢！！！！

【问题讨论】：

我似乎无法让关闭按钮在移动设备上工作。适用于所有浏览器。对备用“关闭”代码有什么建议吗？

标签： javascript jquery html css jquery-mobile

【解决方案1】：

您可以通过将搜索表单放在标题中并将其位置设置为“绝对”来做到这一点。然后使用上边距将其动画化到视图中。

<div data-role="header" data-tap-toggle="true" data-theme='b'>         
    <form data-ajax="false" action="search.html" data-theme="b" id="searchform" name="searchform">
        <input data-clear-btn="true" autocomplete="off" autocorrect="off" autocapitalize="off" data-role="none" id="" name="q" placeholder="Search..." type="text" />&nbsp;<a id="closeSearch" href="#" class="ui-btn"><i class="fa fa-times"></i></a>
    </form>
    <a data-role="none" href='#sidebar'><img alt="sidebar" id="header-menu-icon" src="images/menu-icon.png" /></a>
    <h1 class="header-title">test</h1>
    <a data-role="none" href='#' id="a-search"><img alt="search" id="header-search-icon" src="images/search-icon.png" /></a>
</div>

#searchform {
     position: absolute;
    -webkit-transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
    -moz-transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
    -ms-transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
    -o-transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
    transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
    -webkit-transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
    -moz-transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
    -ms-transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
    -o-transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
    transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
    z-index: 1000;
    height: 44px;
    width: 100%;
    border: none;
    margin-top: -44px;
    text-align: center;
}
#searchform.moved {
    margin-top: 0px;
}

更新FIDDLE

您还可以大大简化您的代码。 jQuery mobile 提供了一个名为 vclick 的事件来处理点击和触摸。代替jQuery的document.ready，使用jQM pagecreate事件，而不是保存搜索栏的状态，可以使用toggleClass()方法：

$(document).on("pagecreate", "#page1", function(){
    $('#a-search, #closeSearch').on('vclick', function (event) {
        $('#searchform').toggleClass('moved');
    });    
});

注意：我已将相同的处理程序绑定到搜索按钮和关闭按钮。

更新FIDDLE-2

【讨论】：

这是完美的。正是我想要做的。感谢 vclick 的提醒！这让我想了很多！
这可行，但在移动设备上效果不佳。单击打开搜索后，它会打开然后立即关闭。似乎是双重火灾问题或延迟。在移动设备上是否有更好的功能的另一种选择？也许在 Css 动画显示期间延迟/暂停点击？
您是否尝试过添加 e.preventDefault() 或返回 false；在按钮点击事件上？
不使用按钮，使用图像。我相信这可能是原因。我应该在哪里添加 preventdefault 或返回 false？
@JASONFOREST，也许你可以添加一些 console.log() 语句来看看它是否被触发了两次。

【解决方案2】：

有一些移动问题。添加了返回错误；到代码。在移动设备上效果更好。停止传播（）；并防止违约；工作也很好。

【讨论】：