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

作者:admin发表时间:2012-3-20 评论:3 点击 5,612+

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

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

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

jquery也直接贴上代码

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

代码例子下载CSS版 JQuery 版

顶一下 1 踩一下 0

你可能对以下内容感兴趣！

  1. 谷歌打不开,wordpress后台反应慢
  2. wordpress免费的备份插件BackUpWor...
  3. 谈一谈让wordpress更安全
  4. wordpress添加自定义默认头像
  5. wordpress本地测试站开启伪静态
  6. 修改wordpress官方twentyeleven...
  7. 给wordpress友情链接页面添加Favicon...
  8. wordpress 自定义评论表情

3 个评论 “JQuery和CSS 版wordpress 弹性伸缩搜索框”

发表回复

*

w_0002.gif w_0009.gif w_0007.gif w_0011.gif w_0005.gif w_0008.gif w_0010.gif w_0003.gif w_0012.gif w_0001.gif w_0006.gif