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 自定义下拉框

原文：http://zaixianshouce.iteye.com/blog/2312775