你的位置:首页 > Java教程

[Java教程]jQuery Drop


 

在线实例

实例演示

使用方法

  1.  <section class="main">
  2.         <div class="wrapper-demo">
  3.             <div id="dd" class="wrapper-dropdown-1" tabindex="1">
  4.                 <span>手册网</span>
  5.                 <ul class="dropdown" tabindex="1">
  6.                     <li><a href="#">jQuery特效</a></li>
  7.                     <li><a href="#">网站模板</a></li>
  8.                 </ul>
  9.             </div>
  10.             </div>
  11.     </section>
  12. </div>
  13. <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
  14. <script type="text/javascript">
  15.     function DropDown(el) {
  16.         this.dd = el;
  17.         this.placeholder = this.dd.children('span');
  18.         this.opts = this.dd.find('ul.dropdown > li');
  19.         this.val = '';
  20.         this.index = -1;
  21.         this.initEvents();
  22.     }
  23.     DropDown.prototype = {
  24.         initEvents: function() {
  25.             var obj = this;
  26.             obj.dd.on('click', function(event) {
  27.                 $(this).toggleClass('active');
  28.                 return false;
  29.             });
  30.             obj.opts.on('click', function() {
  31.                 var opt = $(this);
  32.                 obj.val = opt.text();
  33.                 obj.index = opt.index();
  34.                 obj.placeholder.text('Gender: ' + obj.val);
  35.             });
  36.         },
  37.         getValue: function() {
  38.             return this.val;
  39.         },
  40.         getIndex: function() {
  41.             return this.index;
  42.         }
  43.     }
  44.     $(function() {
  45.         var dd = new DropDown($('#dd'));
  46.         $(document).click(function() {
  47.             $('.wrapper-dropdown-1').removeClass('active');
  48.         });
  49.     });
  50. </script>
复制

 


下载