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>

复制