jQuery Drop-Down 自訂下拉框

標籤：

 線上執行個體

執行個體示範

使用方法

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>

複製

 

下載

 

jQuery Drop-Down 自訂下拉框