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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
canvas绘制的直线动画
Jan 23 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
vue搜索和vue模糊搜索代码实例
May 07 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
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php统计数组元素个数的方法
2015/07/02 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
网页自动跳转代码收集
2009/09/27 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
Vue实现购物车功能
2017/04/27 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
深入浅析Python中的yield关键字
2018/01/24 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
python实现三维拟合的方法
2018/12/29 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
学校联谊活动方案
2014/02/15 职场文书
结婚周年感言
2014/02/24 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
手机被没收的检讨书
2014/10/04 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2014年标准化工作总结
2014/12/17 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
Python绘画好看的星空图
2022/03/17 Python