首页>>表单>>select美化(2015-10-25)

select美化

select美化
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. /*  jQuery Nice Select - v1.0 
  2.     http://hernansartorio.github.io/jquery-nice-select 
  3.     Made by Hernán Sartorio  */  
  4.    
  5. (function($) {  
  6.   
  7.   $.fn.niceSelect = function() {  
  8.   
  9.     // Create custom markup  
  10.     this.each(function() {  
  11.       var select = $(this);  
  12.         
  13.       if (!select.next().hasClass('nice-select')) {  
  14.         select.after('<div class="nice-select ' + (select.attr('class') || '') + (select.attr('disabled') ? 'disabled' : '" tabindex="0') +   
  15.           '"><span class="current"></span><ul class="list"></ul></div>');  
  16.           
  17.         var dropdown = select.next();  
  18.         var options = select.find('option');  
  19.         var selected = select.find('option:selected');  
  20.           
  21.         dropdown.find('.current').html(selected.data('display') || selected.text());  
  22.           
  23.         options.each(function() {  
  24.           var display = $(this).data('display');  
  25.           dropdown.find('ul').append('<li class="option ' + ($(this).is(':selected') ? 'selected' : '') +   
  26.             '" data-value="' + $(this).val() + (display ? '" data-display="' + display : '') + '">' +   
  27.             $(this).text() + '</li>');  
  28.         });  
  29.       }  
  30.     });  
  31.       
  32.     /* Event listeners */  
  33.       
  34.     // Unbind existing events in case that the plugin has been initialized before  
  35.     $(document).off('.nice_select');  
  36.       
  37.     // Open/close  
  38.     $(document).on('click.nice_select', '.nice-select', function(event) {  
  39.       var dropdown = $(this);  
  40.         
  41.       $('.nice-select').not(dropdown).removeClass('open');  
  42.       dropdown.toggleClass('open');  
  43.         
  44.       if (dropdown.hasClass('open')) {  
  45.         dropdown.find('.option');    
  46.         dropdown.find('.focus').removeClass('focus');  
  47.         dropdown.find('.selected').addClass('focus');  
  48.       } else {  
  49.         dropdown.focus();  
  50.       }  
  51.     });  
  52.       
  53.     // Close when clicking outside  
  54.     $(document).on('click.nice_select', function(event) {  
  55.       if ($(event.target).closest('.nice-select').length === 0) {  
  56.         $('.nice-select').removeClass('open').find('.option');    
  57.       }  
  58.     });  
  59.       
  60.     // Option click  
  61.     $(document).on('click.nice_select', '.nice-select .option', function(event) {  
  62.       var option = $(this);  
  63.       var dropdown = option.closest('.nice-select');  
  64.         
  65.       dropdown.find('.selected').removeClass('selected');  
  66.       option.addClass('selected');  
  67.         
  68.       var text = option.data('display') || option.text();  
  69.       dropdown.find('.current').text(text);  
  70.         
  71.       dropdown.prev('select').val(option.data('value')).trigger('change');  
  72.     });  
  73.   
  74.     // Keyboard events  
  75.     $(document).on('keydown.nice_select', '.nice-select', function(event) {      
  76.       var dropdown = $(this);  
  77.       var focused_option = $(dropdown.find('.focus') || dropdown.find('.list .option.selected'));  
  78.         
  79.       // Space or Enter  
  80.       if (event.keyCode == 32 || event.keyCode == 13) {  
  81.         if (dropdown.hasClass('open')) {  
  82.           focused_option.trigger('click');  
  83.         } else {  
  84.           dropdown.trigger('click');  
  85.         }  
  86.         return false;  
  87.       // Down  
  88.       } else if (event.keyCode == 40) {  
  89.         if (!dropdown.hasClass('open')) {  
  90.           dropdown.trigger('click');  
  91.         } else {  
  92.           if (focused_option.next().length > 0) {  
  93.             dropdown.find('.focus').removeClass('focus');  
  94.             focused_option.next().addClass('focus');  
  95.           }  
  96.         }  
  97.         return false;  
  98.       // Up  
  99.       } else if (event.keyCode == 38) {  
  100.         if (!dropdown.hasClass('open')) {  
  101.           dropdown.trigger('click');  
  102.         } else {  
  103.           if (focused_option.prev().length > 0) {  
  104.             dropdown.find('.focus').removeClass('focus');  
  105.             focused_option.prev().addClass('focus');  
  106.           }  
  107.         }  
  108.         return false;  
  109.       // Esc  
  110.       } else if (event.keyCode == 27) {  
  111.         if (dropdown.hasClass('open')) {  
  112.           dropdown.trigger('click');  
  113.         }  
  114.       // Tab  
  115.       } else if (event.keyCode == 9) {  
  116.         if (dropdown.hasClass('open')) {  
  117.           return false;  
  118.         }  
  119.       }  
  120.     });  
  121.   
  122.   };  
  123.   
  124. }(jQuery));  
XML/HTML Code
  1. <select id="demo-4" class="small">  
  2.         <option value="1">JavaScript</option>  
  3.         <option value="2">jQuery Library</option>  
  4.         <option value="3">jQuery UI</option>  
  5.         <option value="4">jQuery Mobile</option>  
  6.         <option value="5">Object C</option>  
  7.         <option value="6">More Languages ... </option>  
  8.       </select>  

 


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