当前位置： 代码迷 >> Web前端 >> Jquery 漂亮的select成效
  详细解决方案

Jquery 漂亮的select成效

热度：423   发布时间：2013-11-09 17:06:41.0
Jquery 漂亮的select效果

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

Jquery 漂亮的select效果
演示

?

CSS Code
  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>??

?

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

?

?


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

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.