标签：jquery-mobile css html javascript jquery

使用JQM,我正在尝试实现以下标头设计

| [首页]公司——————————– [搜索] [过滤器]

[项目清单]

主页按钮和公司分页左对齐,搜索和过滤器右对齐.

当用户单击搜索图标时,我希望下面的搜索栏出现在标题和项目列表之间

        <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文档将我引导至可折叠的标题.虽然这样做很好,但是如果标记为可折叠,则很难在同一标题中容纳其他图标,例如房屋,公司文本和过滤器.

除了可以使用的可折叠标头之外,还有其他替代方法,我仍然可以使用这些标头吗？

解决方法:

最棘手的部分是标题按钮/文本对齐(请在所有浏览器中测试我的解决方案).对于搜索栏,我只需单击搜索按钮即可隐藏/显示主要元素.

代码-：

$(document).on("click", "#search-button", function(event)
{
	$("#searchtickets").toggle();
});

.company
{
display: table-cell;
padding-left: 3em;
}
.spacerright
{
    margin-right: 50px !important;
}

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="page">
	<div data-role="header">
		<h1 class="company">Company</h1>
		<a class="ui-btn-left" data-iconpos="notext" href="#panel" data-role="button" data-icon="home"></a>
		<a class="ui-btn-right spacerright" href="#page-new-ticket" id="search-button" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true"></a>                         
		<a class="ui-btn-right" href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true"></a> 
    </div>
    <div data-role="content">
        <div data-role="fieldcontain" id="searchtickets" style="display:none;padding-bottom:1em;">
            <label for="search">Search Input:</label>
            <input id="search-tickets"  type="search" name="search-mini" id="search-mini" data-mini="true" />
        </div>
		
		<ul data-role="listview">
			<li>List item 1</li>
			<li>List item 2</li>
			<li>List item 3</li>
		</ul>
    </div>
</div>

标签：jquery-mobile,css,html,javascript,jquery
来源： https://codeday.me/bug/20191029/1959467.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。