上的展開和圖標顯示文本框，單擊

我期待模仿此功能：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。我應該從什麼方式開始？

我知道它有一個焦點事件，如果你關注文本框，它會回到最小化狀態。

我打開演示/想法人們已經看到非常相似的功能，所以我可以用它作爲參考。

來源

2017-05-30 CuriousDeveloper

您可以使用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>

來源

2017-05-30 19:24:14

你是一位高手，如此優雅！ – 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() 
}

來源

2017-05-30 18:41:31 Quartal

下面是另一個例子利用兩個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/

希望這會有所幫助。

來源

2017-05-30 21:10:10 Twisty

上的展開和圖標顯示文本框，單擊

回答

相關問題