首页>>表单>>动画select下拉选择框(2015-07-25)

动画select下拉选择框

动画select下拉选择框
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <script>  
  2. function create_custom_dropdowns() {  
  3.   $('select').each(function(i, select) {  
  4.     if (!$(this).next().hasClass('dropdown')) {  
  5.       $(this).after('<div class="dropdown ' + ($(this).attr('class') || '') + '" tabindex="0"><span class="current"></span><div class="list"><ul></ul></div></div>');  
  6.       var dropdown = $(this).next();  
  7.       var options = $(select).find('option');  
  8.       var selected = $(this).find('option:selected');  
  9.       dropdown.find('.current').html(selected.data('display-text') || selected.text());  
  10.       options.each(function(j, o) {  
  11.         var display = $(o).data('display-text') || '';  
  12.         dropdown.find('ul').append('<li class="option ' + ($(o).is(':selected') ? 'selected' : '') + '" data-value="' + $(o).val() + '" data-display-text="' + display + '">' + $(o).text() + '</li>');  
  13.       });  
  14.     }  
  15.   });  
  16. }  
  17.   
  18. // Event listeners  
  19.   
  20. // Open/close  
  21. $(document).on('click', '.dropdown', function(event) {  
  22.   $('.dropdown').not($(this)).removeClass('open');  
  23.   $(this).toggleClass('open');  
  24.   if ($(this).hasClass('open')) {  
  25.     $(this).find('.option').attr('tabindex', 0);  
  26.     $(this).find('.selected').focus();  
  27.   } else {  
  28.     $(this).find('.option').removeAttr('tabindex');  
  29.     $(this).focus();  
  30.   }  
  31. });  
  32. // Close when clicking outside  
  33. $(document).on('click', function(event) {  
  34.   if ($(event.target).closest('.dropdown').length === 0) {  
  35.     $('.dropdown').removeClass('open');  
  36.     $('.dropdown .option').removeAttr('tabindex');  
  37.   }  
  38.   event.stopPropagation();  
  39. });  
  40. // Option click  
  41. $(document).on('click', '.dropdown .option', function(event) {  
  42.   $(this).closest('.list').find('.selected').removeClass('selected');  
  43.   $(this).addClass('selected');  
  44.   var text = $(this).data('display-text') || $(this).text();  
  45.   $(this).closest('.dropdown').find('.current').text(text);  
  46.   $(this).closest('.dropdown').prev('select').val($(this).data('value')).trigger('change');  
  47. });  
  48.   
  49. // Keyboard events  
  50. $(document).on('keydown', '.dropdown', function(event) {  
  51.   var focused_option = $($(this).find('.list .option:focus')[0] || $(this).find('.list .option.selected')[0]);  
  52.   // Space or Enter  
  53.   if (event.keyCode == 32 || event.keyCode == 13) {  
  54.     if ($(this).hasClass('open')) {  
  55.       focused_option.trigger('click');  
  56.     } else {  
  57.       $(this).trigger('click');  
  58.     }  
  59.     return false;  
  60.     // Down  
  61.   } else if (event.keyCode == 40) {  
  62.     if (!$(this).hasClass('open')) {  
  63.       $(this).trigger('click');  
  64.     } else {  
  65.       focused_option.next().focus();  
  66.     }  
  67.     return false;  
  68.     // Up  
  69.   } else if (event.keyCode == 38) {  
  70.     if (!$(this).hasClass('open')) {  
  71.       $(this).trigger('click');  
  72.     } else {  
  73.       var focused_option = $($(this).find('.list .option:focus')[0] || $(this).find('.list .option.selected')[0]);  
  74.       focused_option.prev().focus();  
  75.     }  
  76.     return false;  
  77.   // Esc  
  78.   } else if (event.keyCode == 27) {  
  79.     if ($(this).hasClass('open')) {  
  80.       $(this).trigger('click');  
  81.     }  
  82.     return false;  
  83.   }  
  84. });  
  85.   
  86. $(document).ready(function() {  
  87.   create_custom_dropdowns();  
  88. });  
  89. </script>  
XML/HTML Code
  1. <div class="container">  
  2.   <select class="">  
  3.     <option value="" data-display-text="JavaScript">None</option>  
  4.     <option value="CoffeeScript">CoffeeScript</option>  
  5.     <option value="Python">Python</option>  
  6.     <option value="freejs.net">freejs.net</option>  
  7.   </select>  
  8. </div>  

 


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