QQ 1640076782

2014年07月31日

Jquery 可以自动伸缩的搜索框

Filed under: 英语网站设计 — 标签:, — lifengwu @ 4:06 上午

通常情况下,外贸网站中的搜索功能都是由搜索框各一个搜索按钮组成,我们做的最多的就是给搜索框或按钮一个不同的CSS样式,让其与整个网站的风格匹配。便有时候为了让网站整体风格匹配,默认情况下会将搜索框隐藏,只出现搜索按钮,在浏览者需要搜索的时候搜索框才会出现,那么这样的功能该如何实现呢,下面我们来看看实现这个效果的方法,当然Jquery是肯定会用到的:

默认情况下搜索框和搜索按钮肯定都是必不可少的:

<div>
<div id=”sb-search”>
<form>
<input placeholder=”Enter your search term…” type=”text” value=”" name=”search” id=”search”>
<input type=”submit” value=”">
<span></span>
</form>
</div>
</div>
此外我们还需要引入三个JS
<script src=”js/modernizr.custom.js”></script>
<script src=”js/classie.js”></script>
<script src=”js/uisearch.js”></script>
至于JS里面具体的内容可以直接在网上搜索相关JS即可
最后就是调用了:<script>
new UISearch( document.getElementById( ‘sb-search’ ) );
</script>
默认效果:

点击搜索按钮之后的效果:

如果你有更好的方法,欢迎留言分享!