Hi I am currently working on a Jquery mobile project. In the header I have an icon for panel on left, center is a title and right is a search icon.
The search icon currently reveals a search input, which works great. The Input is revealed above header and everything else is pushed down.
My question is how can I adjust this so the search input reveals within the header (like an overlay) as opposed to above the header. Along with a close button (X) to return to default 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>
Here is a fiddle of the CSS, HTML and JS. Click the search bar on the top right.
Been tinkering around but cant seem to figure it out. Adding data-positon="fixed" to header makes the bar (search input) appear below header.
This is somewhat of an example of what I am looking to do:
Using JQM 1.4.5 & Jquery 1.11.1.
Any help or suggestions would be great! Thanks!!!!
Aucun commentaire:
Enregistrer un commentaire