使用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可伸缩的搜索条的更多相关文章

  1. css3 jQuery实现3d搜索框+为空推断

    <!DOCTYPE html> <html> <head> <title>css3实现3d搜索框</title> <style> ...

  2. Html5+css3+angularjs+jquery+webAPi 开发手机web(一)

    前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的 ...

  3. 一款纯css3实现的条纹加载条

    之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...

  4. 一款由css3和jquery实现的响应式设计导航

    2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览    ...

  5. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

  6. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  7. 一个漂亮的DIV搜索条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Swift - 搜索条(UISearchBar)的用法

    1,搜索条Options属性还可设置如下功能样式: Shows Search Results Button:勾选后,搜索框右边显示一个圆形向下的按钮,单击会发送特殊事件. Shows Bookmark ...

  9. 利用js和JQuery定义一个导航条菜单

    利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...

随机推荐

  1. SQL 2008 R2 启动失败 提示 请求失败或服务未及时响应

    为什么启动sql server 配置管理器出现请求失败或服务未及时响应_百度知道 http://zhidao.baidu.com/link?url=ElemzIan6I2CqJsd7-7uk5TV25 ...

  2. 启动C:\Windows\System32\logiLDA.DLL时出现问题,找不到指定模块

    环境:windows8.1专业版 问题:启动C:\Windows\System32\logiLDA.DLL时出现问题,找不到指定模块 每次开机都会弹出上图所示的信息. 经过查找是罗技鼠标驱动的问题:而 ...

  3. CF196 D2 D

    Book of Evil,有一颗树,n个节点,有m个节点被标记,问n个节点中,有多少个节点,这些节点与这m个节点的最远的距离小于等于d. 用down[i], up[i]分别标记只考虑以i为root的子 ...

  4. VLAN是什么

    VLAN是什么?VLAN,是英文Virtual Local Area Network的缩写,中文名为"虚拟局域网", VLAN是一种将局域网(LAN)设备从逻辑上划分(注意,不是从 ...

  5. Django用户认证系统(二)Web请求中的认证

    在每个Web请求中都提供一个 request.user 属性来表示当前用户.如果当前用户未登录,则该属性为AnonymousUser的一个实例,反之,则是一个User实例. 你可以通过is_authe ...

  6. 各种不会。。。。编译和安装hadoop过程中好多命令和工具不会

    http://blog.csdn.net/bamuta/article/details/13506893  64位下解决方法(重新编译~~) http://zhidao.baidu.com/link? ...

  7. Call to undefined function pg_

    网上普遍的解决方案: 1.修改php.ini文件, 添加php_pgsql.dll扩展 2.如果是wamp这样类似的软件,可以直接通过图形化操作 这样操作后,大部分RD都是没有问的...但是为什么还提 ...

  8. Java更新XML的四种常用方法简介

    本文简要的讨论了Java语言编程中更新XML文档的四种常用方法,并且分析这四种方法的优劣.其次,本文还对如何控制Java程序输出的XML文档的格式做了展开论述. JAXP是Java API for X ...

  9. java学习面向对象之匿名内部类

    之前我们提到“匿名”这个字眼的时候,是在学习new对象的时候,创建匿名对象的时候用到的,之所以说是匿名,是因为直接创建对象,而没有把这个对象赋值给某个值,才称之为匿名. 匿名对象回顾: class N ...

  10. centos 搭建 darwin calendar 服务器

    方法一(官网方法): useradd caluser ----为日历服务器建立一个新用户,方便管理 passwd caluser -----新用户更改密码 su caluser mkdir ~/Cal ...