使用CSS3和jQuery可伸缩的搜索条
使用CSS3和jQuery可伸缩的搜索条
helloweba.com 作者:月光光 时间:2013-12-09 21:23 标签: CSS3 jquery
搜索条在我们网站是必不可少的,尤其是在有限的页面空间里,放置一个重要的搜索条是个难题,今天我将结合实例给大家介绍一下如何使用CSS3和jQuery来实现一个可伸缩功能的搜索条。
查看演示 下载源码
在实例中,我们只展示一个搜索按钮,当点击搜索按钮时,输入框由右向左滑动展开,输入搜索内容后,点击搜索按钮则跳到搜索结果页,搜索输入框收起。
HTML
在需要放置搜索条的页面中放置如下html代码,搜索条#search_bar包含一个form#myform表单,表单中放置一个搜索输入框#search,一个搜索按钮.search_btn以及搜索按钮图标.search_ico。
<div id="search_bar" class="search_bar">
<form id="myform">
<input class="input" placeholder="想搜点什么呢..." type="text" name="key" id="search">
<input class="search_btn" type="submit" value="">
<span class="search_ico"></span>
</form>
</div>
CSS
我们通过CSS来将整个搜索条布局美化,其中我们使用了CSS3代码。
.search_bar{position: relative;margin-top: 10px;
width: 0%;min-width: 60px;height: 60px;
float: right;overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
background:#162934;
} .input{
position: absolute;top: 0;right: 0;
border: none;outline: none;
width: 98%;height: 60px; line-height:60px;z-index: 10;
font-size: 20px;color: #f9f9f9;background:transparent
} .search_ico,.search_btn {
width: 60px;height: 60px;display: block;
position: absolute;right: 0;top: 0;
padding: 0;margin: 0;line-height: 60px;cursor: pointer;
} .search_ico{background: #e67e22 url(icon.png) no-repeat 18px 20px;z-index:90;}
.search_open{width: 100% !important; z-index:1002}
#show{position:absolute; padding:20px}
上述代码中关键的是transition: width 0.3s;可以实现CSS3的动画效果,width由0变成100%,具体大家可以去看下CSS3手册相关介绍,这里不多描述,你可以直接复制和修改代码应用到你的项目中去。
jQuery
当点击搜索按钮时,搜索条.search_bar通过toggleClass()切换样式.search_open,这就实现了搜索条收缩和伸展功能。另外我们还需要判断输入情况,当输入满足条件时,提交搜索表单实现搜索功能,请看代码:
$(function(){
$(".search_ico").click(function(){
$(".search_bar").toggleClass('search_open');
var keys = $("#search").val();
if(keys.length>2){
$("#search").val('');
$("#myform").submit();
}else{
return false;
}
});
});
该效果可以运用到移动端项目中,当然你也可以添加手动滑动效果。
使用CSS3和jQuery可伸缩的搜索条的更多相关文章
- css3 jQuery实现3d搜索框+为空推断
<!DOCTYPE html> <html> <head> <title>css3实现3d搜索框</title> <style> ...
- Html5+css3+angularjs+jquery+webAPi 开发手机web(一)
前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的 ...
- 一款纯css3实现的条纹加载条
之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...
- 一款由css3和jquery实现的响应式设计导航
2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览 ...
- 纯css3实现的动画加载条
之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...
- 模仿京东顶部搜索条效果制作的一个小demo
最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...
- 一个漂亮的DIV搜索条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Swift - 搜索条(UISearchBar)的用法
1,搜索条Options属性还可设置如下功能样式: Shows Search Results Button:勾选后,搜索框右边显示一个圆形向下的按钮,单击会发送特殊事件. Shows Bookmark ...
- 利用js和JQuery定义一个导航条菜单
利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...
随机推荐
- 深入理解ob_flush和flush的区别
ob_flush/flush在手册中的描述, 都是刷新输出缓冲区, 并且还需要配套使用, 所以会导致很多人迷惑… 其实, 他们俩的操作对象不同, 有些情况下, flush根本不做什么事情.. ob_* ...
- GPS(1)核心API及3种列出LocationProvider的方法
GPS的常用API Android SDK为GPS提供了很多API,其中LocationManager类是这些API的核心.所有与GPS相关的操作都由LocationManager对象及其派生的对象完 ...
- 【HDOJ】4089 Activation
1. 题目描述长度为n的等待队列,tomato处于第m个,有如下四种可能:(1)激活失败,概率为$p_1$,队列中的顺序不变:(2)连接失败,概率为$p_2$,队头玩家重新排在队尾:(3)激活成功,概 ...
- 【POJ】2104 K-th Number
区间第K大数.主席树可解. /* 2104 */ #include <iostream> #include <sstream> #include <string> ...
- linux根目录下的文件夹
http://wenku.baidu.com/link?url=PDpw0nuLm71kihyYWdGY2niJhQEsJXfu8NVbjy9RxLa-Zur3aoG4NkCFpD-GQKM_sQWN ...
- The Impact of Garbage Collection on Application Performance
As we’ve seen, the performance of the garbage collector is not determined by the number of dead obje ...
- windows ping RPi 2B
/************************************************************************* * windows ping RPi 2B * 声 ...
- vtiger 支持 物业收费功能 微信收费
谁要?需要什么功能? 直接在下面留言,博主会整理大家的需求,形成产品,发出来.
- 手把手教你WEB套打程序开发
WEB套打可选方案不多,理想的更少,利用免费控件Lodop+JavaScript实现精确套打,算是较为经典的选择.这种方案其实比较简单,利用一个htm文件就可以实现模板设计过程,几乎是“空手套”式的开 ...
- ZOJ 2283 Challenge of Wisdom
题意:在一个n * m的地图里,有p个宝藏,每次只能向横纵坐标增加的方向走,问最少走几次能把宝藏都拿走. 解法:按横坐标排序,纵坐标的一个不下降子序列就是一条合法路径,要求多少条不下降子序列可以覆盖所 ...