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

Question

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

Cur*_*per 1 html javascript jquery jquery-ui

我希望模仿这个功能: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>

Run Code Online (Sandbox Code Playgroud)

我试图解构用于执行此操作的javascript,但它是一个500多行复杂对象,可能具有比我需要的更多功能.

我可以访问jQuery和jQuery UI.我应该从什么方法开始？

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

我愿意接受演示/想法,人们已经看到了非常相似的功能,所以我可以用它作为参考.

Answer 1

Rok*_*jan 8

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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，7 月前
查看次数：	4184 次
最近记录：	6 年，10 月前