文章/答案/技术大牛

发布

社区首页 >问答首页 >在图标上展开并显示文本框

问在图标上展开并显示文本框
EN

Stack Overflow用户

提问于 2017-05-30 18:39:18

回答 3查看 6.6K关注 0票数 1

我想模仿这个功能：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。我应该从什么着手呢？

我知道它有一个焦点事件，如果您将焦点从文本框中移开，它将回到最小化状态。

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

javascript

jquery

html

jquery-ui

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-05-30 19:24:14

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>

票数 8

Stack Overflow用户

发布于 2017-05-30 18:41:31

基本上，您必须听一听点击图标，然后用jQuery用户界面放大框。

 $("#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()
 }

票数 0

Stack Overflow用户

发布于 2017-05-30 21:10:10

下面是使用jQuery UI (Button & Autocomplete)和CSS的另一个示例。我对字型的使用也越来越多。

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

希望这能有所帮助。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44269572

复制

相似问题

问在图标上展开并显示文本框
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在图标上展开并显示文本框EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在图标上展开并显示文本框
EN