Question

您好我正在开发一个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＆amp; Jquery 1.11.1。

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

Answer 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 的事件，可以处理点击和触摸。使用jQM pagecreate事件代替jQuery的document.ready，而不是保存搜索栏的状态，您可以使用 toggleClass() 方法：

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

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

更新了 FIDDLE-2

Answer 2

有一些移动问题。添加返回false;到代码。在移动设备上运行得更好。 stopPropagation（）;并防止违约;工作也很好。

jQuery移动搜索输入标题（topop / overlay of header）与小提琴

2 个答案: