Jquery 漂亮的select成效

Jquery 漂亮的select效果

css文件比较大，请到演示页面查看源码

?

1. <div?id="page">??
2. ????<h1>选择您的产品</h1>??
3. ??
4. ????<form?method="post"?action="">??
5. ??????
6. ????????<!--?We?are?going?to?use?jQuery?to?hide?the?select?element?and?replace?it?-->??
7. ??????????
8. ????????<select?name="fancySelect"?class="makeMeFancy">??
9. ??????????
10. ????????????<!--?Notice?the?HTML5?data?attributes?-->??
11. ??????????
12. ????????????<option?value="0"?selected="selected"?data-skip="1">Choose?Your?Product</option>??
13. ????????????<option?value="1"?data-icon="img/products/iphone.png"?data-html-text="iPhone?4<i>in?stock</i>">iPhone?4</option>??
14. ????????????<option?value="2"?data-icon="img/products/ipod.png"?data-html-text="iPod?<i>in?stock</i>">iPod</option>??
15. ????????????<option?value="3"?data-icon="img/products/air.png"?data-html-text="MacBook?Air<i>out?of?stock</i>">MacBook?Air</option>??
16. ????????????<option?value="4"?data-icon="img/products/imac.png"?data-html-text="iMac?Station<i>in?stock</i>">iMac?Station</option>??
17. ????????</select>??
18. ????</form>??
19. ??????
20. </div>??

?

1. $(document).ready(function(){??
2. ??????
3. ????//?The?select?element?to?be?replaced:??
4. ????var?select?=?$('select.makeMeFancy');??
5. ??
6. ????var?selectBoxContainer?=?$('<div>',{??
7. ????????width???????:?select.outerWidth(),??
8. ????????className???:?'tzSelect',??
9. ????????html????????:?'<div?style="margin: auto;">??
10. ????var?dropDown?=?$('<ul>',{className:'dropDown'});??
11. ????var?selectBox?=?selectBoxContainer.find('.selectBox');??
12. ??????
13. ????//?Looping?though?the?options?of?the?original?select?element??
14. ??????
15. ????select.find('option').each(function(i){??
16. ????????var?option?=?$(this);??
17. ??????????
18. ????????if(i==select.attr('selectedIndex')){??
19. ????????????selectBox.html(option.text());??
20. ????????}??
21. ??????????
22. ????????//?As?of?jQuery?1.4.3?we?can?access?HTML5???
23. ????????//?data?attributes?with?the?data()?method.??
24. ??????????
25. ????????if(option.data('skip')){??
26. ????????????return?true;??
27. ????????}??
28. ??????????
29. ????????//?Creating?a?dropdown?item?according?to?the??
30. ????????//?data-icon?and?data-html-text?HTML5?attributes:??
31. ??????????
32. ????????var?li?=?$('<li>',{??
33. ????????????html:???'<img?src="'+option.data('icon')+'"?/><span>'+??
34. ????????????????????option.data('html-text')+'</span>'??
35. ????????});??
36. ??????????????????
37. ????????li.click(function(){??
38. ??????????????
39. ????????????selectBox.html(option.text());??
40. ????????????dropDown.trigger('hide');??
41. ??????????????
42. ????????????//?When?a?click?occurs,?we?are?also?reflecting??
43. ????????????//?the?change?on?the?original?select?element:??
44. ????????????select.val(option.val());??
45. ??????????????
46. ????????????return?false;??
47. ????????});??
48. ??????????
49. ????????dropDown.append(li);??
50. ????});??
51. ??????
52. ????selectBoxContainer.append(dropDown.hide());??
53. ????select.hide().after(selectBoxContainer);??
54. ??????
55. ????//?Binding?custom?show?and?hide?events?on?the?dropDown:??
56. ??????
57. ????dropDown.bind('show',function(){??
58. ??????????
59. ????????if(dropDown.is(':animated')){??
60. ????????????return?false;??
61. ????????}??
62. ??????????
63. ????????selectBox.addClass('expanded');??
64. ????????dropDown.slideDown();??
65. ??????????
66. ????}).bind('hide',function(){??
67. ??????????
68. ????????if(dropDown.is(':animated')){??
69. ????????????return?false;??
70. ????????}??
71. ??????????
72. ????????selectBox.removeClass('expanded');??
73. ????????dropDown.slideUp();??
74. ??????????
75. ????}).bind('toggle',function(){??
76. ????????if(selectBox.hasClass('expanded')){??
77. ????????????dropDown.trigger('hide');??
78. ????????}??
79. ????????else?dropDown.trigger('show');??
80. ????});??
81. ??????
82. ????selectBox.click(function(){??
83. ????????dropDown.trigger('toggle');??
84. ????????return?false;??
85. ????});??
86. ??
87. ????//?If?we?click?anywhere?on?the?page,?while?the??
88. ????//?dropdown?is?shown,?it?is?going?to?be?hidden:??
89. ??????
90. ????$(document).click(function(){??
91. ????????dropDown.trigger('hide');??
92. ????});??
93. });??

?

?

原文地址:http://www.freejs.net/article_biaodan_76.html