首页>>表单>>Jquery 漂亮的select效果(2013-10-27)

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