jQuery模拟select实现下拉菜单功能


Posted in Javascript onJune 20, 2016

用jquery模拟一淘上面的搜索下拉的功能,利用css3做箭头的动画效果。

JS代码:

/*
 * 模拟搜索下拉select
 * 默认调用方式:$(el).setSelect({
 * optionList: [], //这里是下拉的选项,如['aa','bb']
 * hiddenInput: '#optionHidden', //隐藏的input获取选中后的值,供表单提交时传值
 * getOption: '#sOptionBtn',
 * callback: function(option){}
 * })
 *
*/
(function ($) {
 $.fn.setSelect = function(options){
   var opt = $.extend({
    optionList: [],
    getOption: '',
    hiddenInput: '',
    callback: function(){}
   }, options || {});
  return this.each(function(){
    opt._id = this;
    var _time;
    var arrow = $(this).find('i');
    $(opt._id).append('<ul id="selectList"></ul>');
    for(var i=0;i<opt.optionList.length;i++){
       $("#selectList").append('<li>'+opt.optionList[i]+'</li>')
     };
    $(opt._id).bind({
      mouseenter: function(){
        $(arrow).addClass('arrow-hover');
        $('#selectList').slideDown();
        clearTimeout(_time);
       },
      mouseleave: function(){
        _time=setTimeout(function(){
          $(arrow).removeClass('arrow-hover');
          $('#selectList').slideUp()
         },300);
       }
     });
    //获取选择的值
    $('#selectList').delegate('li','click',function(){
        var option = $(this).text();
        $(opt.getOption).text(option);
        $(opt.hiddenInput).val(option);
        $('#selectList').slideUp();
        return opt.callback(option);
      });
   });
 }
})(jQuery);

demo:(只有在高级的chrome及firefox下才能看到CSS3动画效果)

截个图:

jQuery模拟select实现下拉菜单功能

jQuery模拟select实现下拉菜单功能

代码:

<!doctype html>
<htm>
 <head>
  <meta http-equiv="Content-type" content="text/html charset=utf-8">
  <title></title>
  <style>
  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
   margin: 0;
   padding: 0
  }
  body, button, input, select, textarea {
   font: 12px Arial, Helvetica, sans-serif
  }
  h1, h2, h3, h4, h5, h6 {
   font-size: 100%
  }
  code, kbd, pre, samp {
   font-family: courier new, courier, monospace
  }
  small {
   font-size: 12px
  }
  ul, ol {
   list-style: none
  }
  a {
   text-decoration: none;
   color: #333
  }
  a:hover {
   text-decoration: underline
  }
  sup {
   vertical-align: text-top
  }
  sub {
   vertical-align: text-bottom
  }
  legend {
   color: #000
  }
  fieldset, img {
   border: 0
  }
  button, input, select, textarea {
   font-size: 100%
  }
  button {
   border: 0 none;
   cursor: pointer
  }
  table {
   border-collapse: collapse;
   border-spacing: 0
  }
  em {
   font-style: normal
  }
  address {
   font-style: normal
  }
  textarea {
   resize: vertical
  }
  html {
  zoom:expression(function(ele) {
  ele.style.zoom = "1";
  document.execCommand("BackgroundImageCache", false, true)
  }
  (this))
  }/*解决IE下express重复执行的问题*/
  article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, menu, mark, output, progress, section, source, video, address {
   display: block
  }/*html5标签向下兼容*/
  .clearfix:after {
   content: '\20';
   display: block;
   height: 0;
   clear: both;
   visibility: hidden
  }
  .clearfix {
  *zoom:1
  }
  .arrow-dn {
   display: inline-block;
   height: 0;
   width: 0;
   font-size: 0;
   overflow: hidden;
   border: 3px solid #505050;
   border-color: #505050 transparent transparent;
   _border-style: solid dotted dotted dotted
  }
  .top-search {
   width: 497px;
   height: 30px;
   _height: 33px;
   background: url(../images/bg.png) left top no-repeat;
   _padding-bottom: 0;
   margin-top: 20px;
   border: 3px solid #cd0001;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   position: relative;
   z-index: 9;
   margin: 50px auto
  }
  .top-search input {
   width: 350px;
   float: left;
   padding: 7px 0;
   _padding: 6px 0;
   border: none 0;
   background: 0;
   color: #666;
   font-size: 14px
  }
  .top-search input:focus, .area-search .search-intri input:focus {
   outline: 0
  }
  .top-search button {
   width: 77px;
   height: 30px;
   line-height: 30px;
   font-weight: bold;
   font-size: 14px;
   text-align: center;
   background: #f4ac1f;
   float: right
  }
  .top-search .select {
   float: left;
   font-size: 14px;
   width: 55px;
   padding-top: 5px;
   margin-right: 5px;
   position: relative;
   z-index: 3
  }
  .top-search .select ul {
   position: absolute;
   left: -3px;
   top: 30px;
   width: 55px;
   background: #fff;
   border: 3px solid #cd0001;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   border-top: 0;
   line-height: 1.8;
   display: none
  }
  .top-search .select ul li {
   cursor: pointer;
   padding: 2px 0;
   padding-left: 10px
  }
  .top-search .select ul li:hover {
   background: #f3f3f3
  }
  .top-search .select .s-option {
   display: inline-block;
   position: absolute;
   top: 0;
   height: 32px;
   line-height: 28px;
   width: 45px;
   padding-left: 8px
  }
  .top-search .select a:hover {
   text-decoration: none
  }
  .top-search .select .arrow-dn {
   border-width: 4px;
   border-color: #939393 transparent transparent;
   position: absolute;
   right: 7px;
   top: 11px;
   -webkit-transition: -webkit-transform .2s ease-in-out;
   -webkit-transform: translate3d(0, 0, 999px);
   -webkit-backface-visibility: visible;
   -moz-transition: -moz-transform .2s ease-in-out;
   -moz-transform: translate3d(0, 0, 999px);
   -moz-backface-visibility: visible;
  }
  .top-search .select .arrow-hover {
   -webkit-transform: rotate(-180deg);
   -moz-transform: rotate(-180deg);
   -o-transform: rotate(-180deg);
   -webkit-transform: translated3d(0, 0, 999px);
   border-color: transparent transparent #939393\9;
   top: 10px;
   top: 7px\9;
   _top: 11px
  }
  </style>
  </head>
 <body>
  <form class="top-search clearfix">
   <!--隐藏的input获取option值-->
   <input type="hidden" id="optionHidden" value="机构">
   <div class="select">
    <a id="sOptionBtn" class="s-option" href="javascript:void(0)">机构</a>
    <i class="arrow-dn"></i>
   </div>
   <input type="text" id="kw">
   <button type="submit">搜索</button>
  </form>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script>
  $(function(){
   $('.top-search .select').setSelect({
    optionList: ['机构','课程'],
    hiddenInput: '#optionHidden',
    getOption: '#sOptionBtn',
    callback: function(option){}
   });
  });
  (function ($) {
   $.fn.setSelect = function(options){
     var opt = $.extend({
      optionList: [],
      getOption: '',
      hiddenInput: '',
      callback: function(){}
     }, options || {});
    return this.each(function(){
      opt._id = this;
      var _time;
      var arrow = $(this).find('i');
      $(opt._id).append('<ul id="selectList"></ul>');
      for(var i=0;i<opt.optionList.length;i++){
         $("#selectList").append('<li>'+opt.optionList[i]+'</li>')
       };
      $(opt._id).bind({
        mouseenter: function(){
          $(arrow).addClass('arrow-hover');
          $('#selectList').slideDown();
          clearTimeout(_time);
         },
        mouseleave: function(){
          _time=setTimeout(function(){
            $(arrow).removeClass('arrow-hover');
            $('#selectList').slideUp()
           },300);
         }
       });
      //获取选择的值
      $('#selectList').delegate('li','click',function(){
          var option = $(this).text();
          $(opt.getOption).text(option);
          $(opt.hiddenInput).val(option);
          $('#selectList').slideUp();
          return opt.callback(option);
        });
     });
   }
  })(jQuery);
 </script>
 </body>
</html>

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
jQuery中extend函数详解
Jul 13 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
搭建vue开发环境
Jul 19 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
对jQuary选择器的全面总结
Jun 20 #Javascript
jQuery实现的可编辑表格完整实例
Jun 20 #Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 #Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 #Javascript
浅谈JavaScript中数组的增删改查
Jun 20 #Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 #Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 #Javascript
You might like
php实现的发送带附件邮件类实例
2014/09/22 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Python字符串处理实例详解
2017/05/18 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
Python常用的json标准库
2019/02/19 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
小学生母亲节演讲稿
2014/05/07 职场文书
给学校建议书范文
2014/05/13 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
安阳殷墟导游词
2015/02/10 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers