使用JQM,我试图实现以下标头设计
| [首页]公司------------------------------ [搜索] [过滤器]
[项目清单]
主页按钮和公司窗口左对齐,搜索和过滤器右对齐 .
当用户点击搜索图标时,我希望以下搜索栏为 appear between the header and the list of items
<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input id="search-tickets" type="search" name="search-mini" id="search-mini" data-mini="true" />
</div>
JQM文档引导我使用可折叠 Headers . 虽然这很好,但如果它被标记为可折叠的话,它很难容纳其他图标,如家庭,公司文本和过滤器在同一 Headers 中 .
我可以使用可折叠标头的替代方案,并仍然保持标头上的现状吗?
2 回答
最棘手的部分是 Headers 按钮/文本对齐(请在所有浏览器中测试我的解决方案) . 对于搜索栏,我只是隐藏/显示搜索按钮单击上的主要元素 .
Code - :
我认为你不需要任何JS或css库,你可以只使用一些纯CSS代码(like this tutorial) -
你也可以通过这种方式使用一个小JS-