实用的漂亮的下拉框-CUSTOM DROP-DOWN LIST STYLING

实用的漂亮的下拉框-CUSTOM DROP-DOWN LIST STYLING
 点击预览  点击下载

今天我给大家介绍一款下拉选择框,有5种漂亮的样式可供我们选择,真的蛮实用的

使用步骤

该插件有5种表现形式,下面我就介绍一下第一种样式的实现,其它的大概一致,大家可以参考 Demo
1、引入以下的js和css文件

  1. <link rel="stylesheet" type="text/css" href="css/style.css"> 
  2. <script type="text/javascript" src="/download/jquery/jquery-1.9.1.min.js"></script> 

2、在head标签中加入以下js代码

  1. <script type="text/javascript"
  2.     function DropDown(el) { 
  3.         this.dd = el; 
  4.         this.placeholder = this.dd.children('span'); 
  5.         this.opts = this.dd.find('ul.dropdown > li'); 
  6.         this.val = ''
  7.         this.index = -1; 
  8.         this.initEvents(); 
  9.     } 
  10.     DropDown.prototype = { 
  11.         initEvents: function() { 
  12.             var obj = this
  13.             obj.dd.on('click'
  14.             function(event) { 
  15.                 $(this).toggleClass('active'); 
  16.                 return false
  17.             }); 
  18.             obj.opts.on('click'
  19.             function() { 
  20.                 var opt = $(this); 
  21.                 obj.val = opt.text(); 
  22.                 obj.index = opt.index(); 
  23.                 obj.placeholder.text('Gender: ' + obj.val); 
  24.             }); 
  25.         }, 
  26.         getValue: function() { 
  27.             return this.val; 
  28.         }, 
  29.         getIndex: function() { 
  30.             return this.index; 
  31.         } 
  32.     } 
  33.   
  34.     $(function() { 
  35.         var dd = new DropDown($('#dd')); 
  36.   
  37.         $(document).click(function() { 
  38.             // all dropdowns 
  39.             $('.wrapper-dropdown-1').removeClass('active'); 
  40.         }); 
  41.   
  42.     }); 
  43. </script> 

3、在body标签中加入以下格式的html代码

  1. <div id="dd" class="wrapper-dropdown-1" tabindex="1"> 
  2.     <span>Gender</span> 
  3.     <ul class="dropdown" tabindex="1">      
  4.         <li> 
  5.             <a href="#">Male</a> 
  6.         </li> 
  7.         <li> 
  8.             <a href="#">Female</a> 
  9.         </li> 
  10.     </ul> 
  11. </div> 

转载请注明:代码家园 » 实用的漂亮的下拉框-CUSTOM DROP-DOWN LIST STYLING

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)