Question

我希望模仿此功能：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。我应该从什么方法开始？

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

我愿意接受演示/观点，人们已经看到非常相似的功能，所以我可以将它作为参考。

Answer 1

仅限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;
  user-select: none;
  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: 8px 12px 8px 34px;
  border-color: #0bf;
}
.expandSearch input:focus + i{
  /*padding: 8px 4px 8px 8px ;*/
  color: #ddd;
  pointer-events: none;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<label class="expandSearch">
  <input type="text" placeholder="Search..." name="search">
  <i class="material-icons">search</i>
</label>

Answer 2

基本上你必须听一下图标，然后用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()
 }

Answer 3

这是另一个使用jQuery UI（Button＆amp; Autocomplete）和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/

希望这有帮助。

在图标单击上展开并显示文本框

3 个答案: