首页>>表单>>等级选择，星级选择 长条状比例选择等(2013-12-20)

等级选择，星级选择 长条状比例选择等

等级选择，星级选择 长条状比例选择等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="wrapper">  
  2.     <div id="content">  
  3.         
  4.         <div class="buttons">  
  5.             <button class="blue-pill deactivated rating-enable">enable</button>  
  6.             <button class="blue-pill rating-disable">disable</button>  
  7.         </div>  
  8.   
  9.         <div class="input select rating-a">  
  10.             <label for="example-a">Rating (example A):</label>  
  11.             <select id="example-a" name="rating">  
  12.                 <option value="1">1</option>  
  13.                 <option value="2">2</option>  
  14.                 <option value="3">3</option>  
  15.                 <option value="4">4</option>  
  16.                 <option value="5">5</option>  
  17.                 <option value="6">6</option>  
  18.                 <option value="7" selected="selected">7</option>  
  19.                 <option value="8">8</option>  
  20.                 <option value="9">9</option>  
  21.                 <option value="10">10</option>  
  22.             </select>  
  23.         </div>  
  24.   
  25.         <div class="input select rating-b">  
  26.             <label for="example-b">Rating (example B):</label>  
  27.             <select id="example-b" name="rating">  
  28.                 <option value="Bad">Bad</option>  
  29.                 <option value="Mediocre">Mediocre</option>  
  30.                 <option value="Quite good">Quite good</option>  
  31.                 <option value="Awesome">Awesome</option>  
  32.             </select>  
  33.         </div>  
  34.   
  35.         <div class="input select rating-c">  
  36.             <label for="example-c">Rating (example C):</label>  
  37.             <select id="example-c" name="rating">  
  38.                 <option value=""></option>  
  39.                 <option value="1">1</option>  
  40.                 <option value="2">2</option>  
  41.                 <option value="3">3</option>  
  42.                 <option value="4">4</option>  
  43.                 <option value="5">5</option>  
  44.             </select>  
  45.         </div>  
  46.   
  47.         <div class="input select rating-d">  
  48.             <label for="example-d">Rating (example D):</label>  
  49.             <select id="example-d" name="rating">  
  50.                 <option value="1">1</option>  
  51.                 <option value="2">2</option>  
  52.                 <option value="3">3</option>  
  53.                 <option value="4">4</option>  
  54.                 <option value="5">5</option>  
  55.                 <option value="6">6</option>  
  56.                 <option value="7">7</option>  
  57.                 <option value="8">8</option>  
  58.                 <option value="9">9</option>  
  59.                 <option value="10">10</option>  
  60.             </select>  
  61.         </div>  
  62.   
  63.         <div class="input select rating-e">  
  64.             <label for="example-e">Rating (example E), with a callback:</label>  
  65.             <select id="example-e" name="rating">  
  66.                 <option value="D">D</option>  
  67.                 <option value="C">C</option>  
  68.                 <option value="CC">CC</option>  
  69.                 <option value="CCC-">CCC-</option>  
  70.                 <option value="CCC">CCC</option>  
  71.                 <option value="CCC+">CCC+</option>  
  72.                 <option value="B-">B-</option>  
  73.                 <option value="B">B</option>  
  74.                 <option value="B+">B+</option>  
  75.                 <option value="BB-">BB-</option>  
  76.                 <option value="BB">BB</option>  
  77.                 <option value="BB+">BB+</option>  
  78.                 <option value="BBB-">BBB-</option>  
  79.                 <option value="BBB">BBB</option>  
  80.                 <option value="BBB+">BBB+</option>  
  81.                 <option value="A-">A-</option>  
  82.                 <option value="A" selected="selected">A</option>  
  83.                 <option value="A+">A+</option>  
  84.                 <option value="AA-">AA-</option>  
  85.                 <option value="AA">AA</option>  
  86.                 <option value="AA+">AA+</option>  
  87.                 <option value="AAA">AAA</option>  
  88.             </select>  
  89.         </div>  
  90.   
  91.         <div class="input select rating-f">  
  92.             <label for="example-f">Star rating... why not:</label>  
  93.             <select id="example-f" name="rating">  
  94.                 <option value="1">1</option>  
  95.                 <option value="2">2</option>  
  96.                 <option value="3">3</option>  
  97.                 <option value="4">4</option>  
  98.                 <option value="5">5</option>  
  99.             </select>  
  100.         </div>        
  101.   
  102.     </div>  
  103. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         $(function () {  
  3.             $('.rating-enable').click(function () {  
  4.                 $('#example-a, #example-b').barrating();  
  5.   
  6.                 $('#example-c, #example-d').barrating('show', {  
  7.                     showValues:true,  
  8.                     showSelectedRating:false  
  9.                 });  
  10.   
  11.                 $('#example-e').barrating('show', {  
  12.                     showValues:true,  
  13.                     showSelectedRating:false,  
  14.                     onSelect:function(value, text) {  
  15.                         alert('Rating: ' + value);  
  16.                     }  
  17.                 });  
  18.   
  19.                 $('#example-f').barrating({ showSelectedRating:false });  
  20.   
  21.                 $(this).addClass('deactivated');  
  22.                 $('.rating-disable').removeClass('deactivated');  
  23.             });  
  24.   
  25.             $('.rating-disable').click(function () {  
  26.                 $('select').barrating('destroy');  
  27.                 $(this).addClass('deactivated');  
  28.                 $('.rating-enable').removeClass('deactivated');  
  29.             });  
  30.   
  31.             $('.rating-enable').trigger('click');  
  32.         });  
  33.     </script>  

 


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