jQuery header（header 的 overtop/overlay）中的移动搜索输入 fiddle

Question

您好，我目前正在从事 jQuery 移动项目。在 header 我的左边有一个面板图标，中间是标题，右边是搜索图标。

搜索图标目前显示一个搜索输入，效果很好。输入显示在 header 上方，其他所有内容都向下推。

我的问题是如何调整它，以便搜索输入显示在 header 内（如覆盖）而不是在 header 上方。随着关闭按钮 (X) 到 return 到默认 header？

<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>

下面是fiddle的CSS、HTML和JS。点击右上角的搜索栏。

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

一直在修修补补，但似乎无法弄清楚。将 data-positon="fixed" 添加到 header 会使栏（搜索输入）显示在 header.

下方

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

http://www.style.com/magazine

使用 JQM 1.4.5 和 Jquery1.11.1.

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

Answer 1

您可以通过将搜索表单放在 header 中并将其位置设置为 'absolute' 来实现。然后使用 top-margin 将其设置为动画。

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

Updated FIDDLE

您还可以大大简化您的代码。 jQuery 手机提供和事件调用 vclick that handles both clicks and touches. Instead of jQuery's document.ready, use the jQM pagecreate event, and rather than saving the state of the search bar, you can use the toggleClass() 方法：

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

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

Updated FIDDLE-2

Answer 2

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

jQuery header（header 的 overtop/overlay）中的移动搜索输入 fiddle

jQuery mobile search input in header (overtop/overlay of header) with fiddle

html

javascript

css

jquery

jquery-mobile