JQuery和CSS 版wordpress 弹性伸缩搜索框

发表于 更新于 分类于 本文字数： 931 阅读时长 ≈ 3 分钟

我们知道wordpress 官方主题采用了H5，还有就是那个弹性的搜索框非常好看，我就来说说怎么么用JQuery和CSS 来实习wordpress弹性搜索框，官方是用css实现的，但在IE内核下显示就不好了，用JQuery 来做就可以兼容主流浏览器。

css版我就直接贴上代码吧供大家参考

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1
<html xmlns="http://www.w3.org/1999/xhtml">
1
<head>
1
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
1
<title>wordpress CSS搜索伸缩菜单</title>
1
<style>
1
/*search*/
1
input, select {
1
padding:6px;
1
border:1px solid;
1
border-color:#CCC #EEE #EEE #CCC;
1
-moz-border-radius:4px;
1
-webkit-border-radius:4px;
1
border-radius:4px;
1
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2);
1
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2);
1
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2);
1
background-color:#fafafa;
1
font-size:12px;
1
color:#555;
1
outline:none;
1
behavior:url(/wp-content/themes/EchoWeb/lib/PIE.htc);
1
-moz-transition:all linear .5s;
1
-webkit-transition:all linear .5s;
1
-o-transition:all linear .5s;
1
transition:all linear .5s
1
}
1
input:hover, select:hover, textarea:hover {
1
color:#333;
1
background-color:#fff
1
}
1
input:focus {
1
border-color: rgba(82, 168, 236, .75);
1
box-shadow: 0 0 8px rgba(82, 168, 236, .5);
1
-moz-box-shadow: 0 0 8px rgba(82, 168, 236, .5);
1
-webkit-box-shadow: 0 0 8px rgba(82, 168, 236, .5);
1
background-color:#fff
1
}
1
#searchform {
1
right: 12%;
1
padding-top: 2px;
1
text-align: right;
1
}
1
.assistive-text {
1
clip: rect(1px, 1px, 1px, 1px);
1
position: absolute !important;
1
}
1
#s {
1
-moz-transition-duration: 400ms;
1
-moz-transition-property: width, background;
1
-moz-transition-timing-function: ease;
1
float: right;
1
width: 72px;
1
}
1
input#s {
1
background: url(img/search.png) no-repeat scroll 5px 6px transparent;
1
border-radius: 2px 2px 2px 2px;
1
font-size: 14px;
1
height: 22px;
1
line-height: 1.2em;
1
padding: 4px 10px 4px 28px;
1
}
1
#searchsubmit {
1
display: none;
1
}
1
input#searchsubmit {
1
display: none;
1
}
1
#s {
1
float: right;
1
-webkit-transition-duration: 400ms;
1
-webkit-transition-property: width, background;
1
-webkit-transition-timing-function: ease;
1
-moz-transition-duration: 400ms;
1
-moz-transition-property: width, background;
1
-moz-transition-timing-function: ease;
1
-o-transition-duration: 400ms;
1
-o-transition-property: width, background;
1
-o-transition-timing-function: ease;
1
width: 72px;
1
}
1
#s:focus {
1
background-color: #f9f9f9;
1
width: 175px;
1
}
1
</style>
1
</head>
1
<body>
1
<form method="get" id="searchform" action="&lt;?php bloginfo('url'); ?>/">
1
<label for="s" class="assistive-text">
1
<?php _e( 'Search' ); ?>
1
</label>
1
<input type="text" class="field" id="s" name="s" value="&lt;?php the_search_query(); ?>" placeholder="关键字" required="required" autofocus="autofocus">
1
<input type="submit" class="submit" name="submit" id="searchsubmit" value="Search">
1
</form>
1
</body>
1
</html>

jquery也直接贴上代码

1
<;!DOCTYPE HTML>
1
<;html>
1
<;head>
1
<;meta http-equiv="Content-Type" content="text/html; charset=utf-8">
1
<;title>wordpress 弹性搜索框</title>
1
<;script type="text/javascript" src="js/jquery.min.js"></script>
1
<;style>
1
/*search*/
1
input, select {
1
padding:6px;
1
border:1px solid;
1
border-color:#CCC #EEE #EEE #CCC;
1
-moz-border-radius:4px;
1
-webkit-border-radius:4px;
1
border-radius:4px;
1
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2);
1
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2);
1
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2);
1
background-color:#fafafa;
1
font-size:12px;
1
color:#555;
1
outline:none;
1
behavior:url(/wp-content/themes/EchoWeb/lib/PIE.htc);
1
-moz-transition:all linear .5s;
1
-webkit-transition:all linear .5s;
1
-o-transition:all linear .5s;
1
transition:all linear .5s
1
}
1
input:hover, select:hover, textarea:hover {
1
color:#333;
1
background-color:#fff
1
}
1
input:focus {
1
border-color: rgba(82, 168, 236, .75);
1
box-shadow: 0 0 8px rgba(82, 168, 236, .5);
1
-moz-box-shadow: 0 0 8px rgba(82, 168, 236, .5);
1
-webkit-box-shadow: 0 0 8px rgba(82, 168, 236, .5);
1
background-color:#fff
1
}
1
#searchform {
1
right: 12%;
1
padding-top: 2px;
1
text-align: right;
1
}
1
.assistive-text {
1
clip: rect(1px, 1px, 1px, 1px);
1
position: absolute !important;
1
}
1
#s {
1
-moz-transition-duration: 400ms;
1
-moz-transition-property: width, background;
1
-moz-transition-timing-function: ease;
1
float: right;
1
width: 72px;
1
}
1
input#s {
1
background: url(img/search.png) no-repeat scroll 5px 6px transparent;
1
border-radius: 2px 2px 2px 2px;
1
font-size: 14px;
1
height: 22px;
1
line-height: 1.2em;
1
padding: 4px 10px 4px 28px;
1
}
1
#searchsubmit {
1
display: none;
1
}
1
input#searchsubmit {
1
display: none;
1
}
1
#s {
1
float: right;
1
-webkit-transition-duration: 400ms;
1
-webkit-transition-property: width, background;
1
-webkit-transition-timing-function: ease;
1
-moz-transition-duration: 400ms;
1
-moz-transition-property: width, background;
1
-moz-transition-timing-function: ease;
1
-o-transition-duration: 400ms;
1
-o-transition-property: width, background;
1
-o-transition-timing-function: ease;
1
width: 72px;
1
}
1
<;/style>
1
<;!--搜索弹性菜单-->
1
<;script type="text/javascript">
1
$(document).ready(function(){
1
$(".field").focus(function(){
1
$(this).stop(true,false).animate({width:"175px"},"slow");
1
})
1
//移动后还原
1
.blur(function(){
1
$(this).animate({width:"72px"},"slow");
1
});
1
});
1
</script>
1
<;/head>
1
<;body>
1
<;form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
1
<;label for="s" class="assistive-text"></label>
1
<;input type="text" class="field" id="s" name="s" value="<?php the_search_query(); ?>" placeholder="关键字" required="required" autofocus="autofocus">
1
<;input type="submit" class="submit" name="submit" id="searchsubmit" value="Search">
1
<;/form>
1
<;/body>
1
</html>

代码例子下载CSS版 JQuery 版