上的展开和图标显示文本框，单击

问题描述：

我期待模仿此功能：http://jsbin.com/cirafujinu/edit?html,output 上的展开和图标显示文本框，单击

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>My Geocoding Map</title> 
    <meta charset="utf-8"> 
     <link rel="stylesheet" href="https://mapzen.com/js/mapzen.css"> 
     <script src="https://mapzen.com/js/mapzen.min.js"></script> 
    <style> 
     #map { 
     height: 100%; 
     width: 100%; 
     position: absolute; 
     } 
    html,body{margin: 0; padding: 0} 
    </style> 
    </head> 
    <body> 
    <div id='map'></div> 
    <script> 
     // Set the global API key 
     L.Mapzen.apiKey = "your-mapzen-api-key"; 

     // Add a map to the #map div 
     // Center on the Pigott building at Seattle University 
     var map = L.Mapzen.map("map", { 
     center: [47.61033,-122.31801], 
     zoom: 16, 
     }); 

     // Disable autocomplete and set parameters for the search query 
     var geocoderOptions = { 
     autocomplete: false, 
     params: { 
      sources: 'osm', 
      'boundary.country': 'USA', 
      layers: 'address,venue' 
     } 
     }; 

     // Add the geocoder to the map, set parameters for geocoder options 
     var geocoder = L.Mapzen.geocoder(geocoderOptions); 
     geocoder.addTo(map); 

    </script> 
    </body> 
</html>

我试图来解构的JavaScript中使用比可能更多的功能做到这一点，但其一个500+线复杂的对象我需要。

我有权访问jQuery和jQuery UI。我应该从什么方式开始？

我知道它有一个焦点事件，如果你关注文本框，它会回到最小化状态。

我打开演示/想法人们已经看到非常相似的功能，所以我可以用它作为参考。

您可以使用CSS转换并在点击时切换类。 – doutriforce

答

CSS-只

，你可以使用几个元素的去做，

一个<label>包装，以帮助注册:fucus状态
与边框样式等，以及左填充一个<input>元件以容纳图标
一个<i>图标元件（放置在输入后）
目标使用:focus，并使用下一个同级+定位的图标，当输入被聚焦：

TL;博士

.expandSearch{ 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.expandSearch i{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 8px 4px 8px 8px ; 
 
    color: #777; 
 
    cursor: pointer; 
 
    transition: 0.24s; 
 
} 
 
.expandSearch i:hover{ 
 
    color: #0bf; 
 
} 
 
.expandSearch input{ 
 
    border:none; 
 
    background: transparent; 
 
    font:14px/1.4 sans-serif; 
 
    padding-left: 26px; 
 
    background:#fff; 
 
    border: 2px solid #ddd; 
 
    border-radius: 4px; 
 
    transition: 0.24s; 
 
    width: 0px; 
 
    padding: 8px 0px 8px 34px; 
 
} 
 

 
.expandSearch input:focus{ 
 
    border-color: #aaa; 
 
    outline: none; 
 
    width:200px; 
 
    padding: 12px 12px 12px 34px; 
 
    border-color: #0bf; 
 
} 
 

 
.expandSearch input:focus + i{ 
 
    padding: 12px 4px 12px 8px ; 
 
    color: #ddd; 
 
    pointer-events: none; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
<!-- wrap into <form> if needed --> 
 

 
<label class="expandSearch"> 
 
    <input type="text" placeholder="Search..." name="search"> 
 
    <i class="material-icons">search</i> 
 
</label>

你是一位高手，如此优雅！ – CuriousDeveloper

答

基本上你要听的图标上单击，然后放大框使用jQuery UI

$("#icon").on("click",function(){ 
     animate(); 
}) 

function animate(){ 
     //many ways to do the animation, one way would be to addClass 
     $("#icon").addClass("large", 500) 

     //Or you can hide an input field inside the icon and just animate that 
     $("#input").show() 
}

答

下面是另一个例子利用两个jQuery用户界面（按钮&自动完成）和CSS。我在使用Font Awesome时也越来越多。

HTML

<div class="ui-widget ui-widget-content ui-corner-all collapsed item-wrapper"> 
    <form id="search-form"> 
    <a href="#" class="btn" title="Begin Search"><i class="fa fa-search"></i></a> 
    <input type="text" id="search" /> 
    </form> 
</div>

CSS

.no-border { 
    border-color: transparent; 
    background-color: white; 
} 

.collapsed { 
    width: 49px; 
} 

.collapsed input { 
    display: none; 
} 

.expanded { 
    width: 280px; 
} 

.expanded input { 
    border: 0; 
    width: 200px; 
}

的JavaScript

$(function() { 
    $(".btn").button({ 
    classes: { 
     "ui-button": "no-border", 
     "ui-state-default": "no-background" 
    } 
    }).click(function(e) { 
    e.preventDefault(); 
    var widg = $(this).closest(".item-wrapper"); 
    widg.toggleClass("collapsed expanded"); 
    if (widg.hasClass("collapsed")) { 
     $("#search").val(""); 
    } 
    }); 
    var availableTags = [ 
    "ActionScript", 
    "AppleScript", 
    "Asp", 
    "BASIC", 
    "C", 
    "C++", 
    "Clojure", 
    "COBOL", 
    "ColdFusion", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Haskell", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme" 
    ]; 
    $("#search").autocomplete({ 
    source: availableTags 
    }); 
    $("#search-form").submit(function(e) { 
    e.preventDefault(); 
    // Do something with the Search value 
    }) 
});

工作实例：https://jsfiddle.net/Twisty/wfqv3orm/

希望这会有所帮助。

上的展开和图标显示文本框，单击

相关推荐