带有jQuery的搜索栏 [英] Search bar with jquery
问题描述
好的,所以我正在为一些朋友正在制作的娱乐套件编写UI.到目前为止,我有以下搜索栏:
Okay, so I'm writing a UI for an entertainment suite some friends are making. So far, I've got the following search bar:
(function($,c,b){$.map("click dblclick mousemove mousedown mouseup mouseover mouseout change select submit keydown keypress keyup".split(" "),function(d){a(d)});a("focusin","focus"+b);a("focusout","blur"+b);$.addOutsideEvent=a;function a(g,e){e=e||g+b;var d=$(),h=g+"."+e+"-special-event";$.event.special[e]={setup:function(){d=d.add(this);if(d.length===1){$(c).bind(h,f)}},teardown:function(){d=d.not(this);if(d.length===0){$(c).unbind(h)}},add:function(i){var j=i.handler;i.handler=function(l,k){l.target=k;j.apply(this,arguments)}}};function f(i){$(d).each(function(){var j=$(this);if(this!==i.target&&!j.has(i.target).length){j.triggerHandler(e,[i.target])}})}}})(jQuery,document,"outside");
var clicked;
$( document ).ready( function () {
clicked = false;
$(".search").click( function () {
if (clicked == false) {
$(".search").toggleClass("active");
clicked = true;
} else {
$(".search").bind( "clickoutside", function(event){
$(".search").toggleClass("active");
clicked = false;
});
}
});
});
.search.active {
background: rgba(0,0,0,0.4);
width: 500px;
}
.search {
margin-top: 25px;
margin-right: 25px;
background-color: #448aff;
width: 50px;
height: 50px;
border-radius: 25px;
text-align: center;
color: white;
cursor: pointer;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
transition: all 500ms ease;
}
.search > i {
line-height: 50px;
text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="search">
<i class="material-icons">search</i>
<form>
<input type="text" name="search"/>
</form>
</div>
如您所见,它是不完整的.我正在使用此库: http://benalman.com/projects/jquery-outside-events-plugin/
As you can see, it's incomplete. I'm using this library: http://benalman.com/projects/jquery-outside-events-plugin/
,但效果不是很好.我想要的是当搜索栏展开时,输入表单事物在事物内部扩展.我还发现该插件不能很好地工作.当我单击页面上不是搜索栏本身的任何位置时,我需要它返回到其原始状态.有人可以帮我吗?我有点困惑.
and it's not working too well. What I want is for when the search bar expands, the input form thing expands inside of the thing. I also found that the plugin isn't working very well. I need it to return to it's original state when I click anywhere on the page that isn't the search bar itself. Can anybody help me out? I'm a bit confused.
推荐答案
无需使用外部插件即可实现外部点击功能,您可以自己实现.
There is no need to use a external plugin to achieve the click outside functionality, you can implement it yourself.
$(document).ready(function() {
$(".search").click(function() {
$(this).addClass("active");
});
$(document).click(function(e) {
if (!$(e.target).closest(".search").length) { //another way to do this is to stop event propagation
$(".search.active").removeClass('active');
}
});
});
.search.active {
background: rgba(0, 0, 0, 0.4);
width: 500px;
}
.search.active form {
display: inline-block;
}
.search {
margin-top: 25px;
margin-right: 25px;
background-color: #448aff;
width: 50px;
height: 50px;
border-radius: 25px;
text-align: center;
color: white;
cursor: pointer;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
transition: all 500ms ease;
}
.search > i {
line-height: 50px;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="search">
<i class="material-icons">search</i>
<form>
<input type="text" name="search" />
</form>
</div>
这篇关于带有jQuery的搜索栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!