首页 文章

可折叠搜索按钮,不使用可折叠标头

提问于
浏览
3

使用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 回答

  • 3

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

    Code -

    $(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>
    
  • 0

    我认为你不需要任何JS或css库,你可以只使用一些纯CSS代码(like this tutorial) -

    body {
    	background: #fff;
    	color: #666;
    	font: 85%/140% Arial, Helvetica, sans-serif;
    	width: 800px;
    	max-width: 96%;
    	margin: 0 auto;
    }
    a {
    	color: #69C;
    	text-decoration: none;
    }
    a:hover {
    	color: #F60;
    }
    h1 {
    	font: 1.7em;
    	line-height: 110%;
    	color: #000;
    }
    p {
    	margin: 0 0 20px;
    }
    
    /* reset webkit search input browser style */
    input {
    	outline: none;
    }
    input[type=search] {
    	-webkit-appearance: textfield;
    	-webkit-box-sizing: content-box;
    	font-family: inherit;
    	font-size: 100%;
    }
    input::-webkit-search-decoration,
    input::-webkit-search-cancel-button {
    	display: none; /* remove the search and cancel icon */
    }
    
    /* search input field */
    input[type=search] {
    	background: #ededed url(http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px center;
    	border: solid 1px #ccc;
    	padding: 9px 10px 9px 32px;
    	width: 55px;
    	
    	-webkit-border-radius: 10em;
    	-moz-border-radius: 10em;
    	border-radius: 10em;
    	
    	-webkit-transition: all .5s;
    	-moz-transition: all .5s;
    	transition: all .5s;
    }
    input[type=search]:focus {
    	width: 130px;
    	background-color: #fff;
    	border-color: #6dcff6;
    	
    	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    	box-shadow: 0 0 5px rgba(109,207,246,.5);
    }
    
    /* placeholder */
    input:-moz-placeholder {
    	color: #999;
    }
    input::-webkit-input-placeholder {
    	color: #999;
    }
    
    /* demo B */
    #demo-b input[type=search] {
    	width: 15px;
    	padding-left: 10px;
    	color: transparent;
    	cursor: pointer;
    }
    #demo-b input[type=search]:hover {
    	background-color: #fff;
    }
    #demo-b input[type=search]:focus {
    	width: 130px;
    	padding-left: 32px;
    	color: #000;
    	background-color: #fff;
    	cursor: auto;
    }
    #demo-b input:-moz-placeholder {
    	color: transparent;
    }
    #demo-b input::-webkit-input-placeholder {
    	color: transparent;
    }
    
    <h3>Try this</h3>
    <form> <input type="search" placeholder="Search"> </form> <h3>Or this</h3> <form id="demo-b"> <input type="search" placeholder="Search"> </form>

    你也可以通过这种方式使用一个小JS-

    $(function() {
      $('.srch-button').click(function(){
        var $wrapper = $('.srch-wrapper'), 
            isOpen = $wrapper.hasClass('open');
        $wrapper.toggleClass('open')
          .find('.srch-input')[isOpen ? 'blur' : 'focus']();
        // remove this - onyl for demo
        return false;
      });
      
    })
    
    body {
      padding: 10px 20px;
      background-color: #343434;
      color: #fff;
    }
    
    .center {
      padding: 60px;
      max-width: 400px;
      margin-left: 200px;
    }
    
    .srch-form {
      position: relative;
      width: 44px;
    }
    
    .srch-wrapper {
      position: absolute;
      top: 0;
      right: 0;
      width: 44px;
      height: 40px;
      -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      -webkit-transition: all 0.3s linear;
      transition: all 0.3s linear;
    }
    .srch-wrapper.open {
      width: 200px;
    }
    
    .srch-input {
      position: relative;
      background-color: transparent;
      height: 44px;
      line-height: 26px;
      padding: 5px 10px 5px 32px;
      box-sizing: border-box;
      border: 2px solid #ddd;
      border-radius: 100px;
      margin: 0;
      width: 100%;
    }
    .srch-input:focus {
      outline: none;
      border-color: #aaa;
    }
    
    .srch-button {
      position: absolute;
      top: 0;
      left: 0;
      border: 0;
      padding: 0;
      margin: 0;
      background-color: transparent;
      color: #ddd;
      width: 44px;
      height: 44px;
      text-align: center;
    }
    .srch-button:focus {
      outline: none;
    }
    
    .srch-input:focus + .srch-button,
    .srch-button:hover {
      color: #aaa;
    }
    
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
    
    <div class="center">
      <form action="" class="srch-form">
        <div class="srch-wrapper open">
          <input type="text" class="srch-input" placeholder="Search..." />
          <button class="srch-button" type="submit">
          <em class="icon-search"></em>
        </button>
        </div>
      </form>
    </div>
    

相关问题