使用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;         }     }); }); 

该效果可以运用到移动端项目中,当然你也可以添加手动滑动效果。

时间: 05-23

使用CSS3和jQuery可伸缩的搜索条的相关文章

css3 jQuery实现3d搜索框+为空判断

<!DOCTYPE html> <html> <head> <title>css3实现3d搜索框</title> <style> body{background: #eee; font: 12px 'Lucida sans', Arial, Helvetica; color: #333; text-align: center;} a{color: #2A679F;} .form-wrapper{width: 450px; paddin

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

<!DOCTYPE html> <html> <head> <title>css3实现3d搜索框</title> <style> body{background: #eee; font: 12px 'Lucida sans', Arial, Helvetica; color: #333; text-align: center;} a{color: #2A679F;} .form-wrapper{width: 450px; paddin

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

前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的BBS练练手,技术更新快,也要学的快,跟的上时代,才涨的了工资. 技术的选择 jQuery Mobile  Phone Gap  等都是比较成熟的框架为什么我不用这些框架呢? 因为我考虑到底层的技术应用和练习 . 我的选择是:Html5+css3+angularjs+jquery HTML5+CSS

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

2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <header> <nav id='cssmenu'> <div class="logo"> <a href="index.html">Responsive </a> &

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

之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="warning"> </div> </div> css3代码: .warning { posi

分享10款web前端基于css3和jquery的源码预览

1.基于jquery和css3实现的摩天轮式分享按钮 之前分享了很多css3实现的按钮.今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮.这款分享按钮页面底部有一个toggle按钮,单击该按钮,摩天轮按钮以动画的形式出现,各个分享按钮挂在摩天轮上. 在线演示 源码下载 2.纯css3实现的动画加载导航 之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现. 在线演示 源码下载 3.纯css3实现的鼠标经过图片显示

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

基于jQuery加载进度条特效代码

基于jQuery加载进度条特效代码是一款简单的加载新数据,获取数据jQuery进度条代码. 在线预览   源码下载 实现的代码. html代码: <div id="main"> <div class="demo"> <div class="bars"> <span id="bar">55</span> </div> <div class="

Select2 在jquery UI Dialog 搜索项失效且不能focus到搜索框解决方案

今天在项目到遇到一个select2插件在jquery UI Dialog 不能focus到搜索框的问题,后来在js 代码中加入(位置可以自己选 ,我选的位置是select2.min.js 后面,因为很多地方都用到,不用针对一个一个功能去修改): $.ui.dialog.prototype._allowInteraction = function(e) {     return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-