首页>>表单>>jquery的select美化(2013-11-01)

jquery的select美化

 一个简单的css配合jq美化select

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

 

XML/HTML Code
  1. <div id="main">  
  2.             <section id="basic-usage">  
  3.                 <select id="basic-usage-demo">  
  4.                     <option value="">请选择…</option>  
  5.                     <option>1</option>  
  6.                     <option>2</option>  
  7.                     <option>3</option>  
  8.                 </select>  
  9.   
  10.                   
  11.             </section>  
  12.     </div>  

 

JavaScript Code
  1. <script>  
  2.             $(document).ready(function() {  
  3.                 $('#basic-usage-demo').fancySelect();  
  4.   
  5.                 // Boilerplate  
  6.                 var repoName = 'fancyselect'  
  7.   
  8.                 $.get('' + repoName, function(repo) {  
  9.                     var el = $('#top').find('.repo');  
  10.   
  11.                     el.find('.stars').text(repo.watchers_count);  
  12.                     el.find('.forks').text(repo.forks_count);  
  13.                 });  
  14.   
  15.                 var menu = $('#top').find('menu');  
  16.   
  17.                 function positionMenuArrow() {  
  18.                     var current = menu.find('.current');  
  19.   
  20.                     menu.find('.arrow').css('left', current.offset().left + (current.outerWidth() / 2));  
  21.                 }  
  22.   
  23.                 $(window).on('resize', positionMenuArrow);  
  24.   
  25.                 menu.on('click', 'a', function(e) {  
  26.                     var el = $(this),  
  27.                         href = el.attr('href'),  
  28.                         currentSection = $('#main').find('.current');  
  29.   
  30.                     e.preventDefault();  
  31.   
  32.                     menu.find('.current').removeClass('current');  
  33.   
  34.                     el.addClass('current');  
  35.   
  36.                     positionMenuArrow();  
  37.   
  38.                     if (currentSection.length) {  
  39.                         currentSection.fadeOut(300).promise().done(function() {  
  40.                             $(href).addClass('current').fadeIn(300);  
  41.                         });  
  42.                     } else {  
  43.                         $(href).addClass('current').fadeIn(300);  
  44.                     }  
  45.                 });  
  46.   
  47.                 menu.find('a:first').trigger('click')  
  48.             });  
  49.         </script>  

 

CSS Code
  1. <style type="text/css">  
  2.   
  3.             div#main { font-size: 16px; line-height: 26px; color: #fff; }  
  4.             div#main div.fancy-select { margin: 0 auto 60px; width: 200px; }  
  5.   
  6.               
  7.         </style>  

 


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