首页>>表单>>星级选择器，评级选择器，自定义形状:五角星,心形,水杯等(2015-06-30)

星级选择器，评级选择器，自定义形状:五角星,心形,水杯等

星级选择器，评级选择器，自定义形状:五角星,心形,水杯等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <form>  
  2.     <input id="input-2b" type="number" class="rating" min="0" max="5" step="0.5" data-size="xl"  
  3.     data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}">  
  4.     <hr>  
  5.     <label>Font Awesome Stars</label>  
  6.     <input id="input-2c" class="rating" min="0" max="5" step="0.5" data-size="sm"  
  7.            data-symbol="" data-glyphicon="false" data-rating-class="rating-fa">  
  8.     <label>Font Awesome Beer</label>  
  9.     <input id="input-2d" class="rating" min="0" max="5" step="0.5" data-size="sm"  
  10.            data-symbol="" data-glyphicon="false" data-rating-class="rating-fa" data-default-caption="{rating} drinks" data-star-captions="{}">  
  11.     <hr>  
  12.     <input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl" >  
  13.     <hr>  
  14.     <input id="input-21b" value="4" type="number" class="rating" min=0 max=5 step=0.2 data-size="lg">  
  15.     <hr>  
  16.     <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">  
  17.     <hr>  
  18.     <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">  
  19.     <hr>  
  20.     <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >  
  21.     <hr>  
  22.     <input id="input-21f" value="0" type="number" min=0 max=5 step=0.1 data-size="md" >  
  23.     <hr>  
  24.     <input id="input-2ba" type="number" class="rating" min="0" max="5" step="0.5" data-stars=5  
  25.     data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}">  
  26.     <hr>  
  27.     <input id="input-22"  value="0" type="number" class="rating" min=0 max=5 step=0.5 data-rtl=1 data-container-class='text-right' data-glyphicon=0>  
  28.     <div class="clearfix"></div>  
  29.     <hr>       
  30.     <input class="rb-rating">  
  31.     <hr>  
  32.     <input id="rating-input" type="number" />  
  33.     <button id="btn-rating-input" type="button" class="btn btn-primary">Toggle Disable</button>  
  34.     <hr>    
  35.     <input id="kartik" class="rating" data-stars="5" data-step="0.1"/>  
  36.     <div class="form-group" style="margin-top:10px">  
  37.     <button type="submit" class="btn btn-primary">Submit</button>  
  38.     <button type="reset" class="btn btn-default">Reset</button>  
  39.     <button type="button" class="btn btn-danger">Destroy</button>  
  40.     <button type="button" class="btn btn-success">Create</button>  
  41.     </div>  
  42. </form>  

 

JavaScript Code
  1. <script>  
  2.     jQuery(document).ready(function () {  
  3.         $("#input-21f").rating({  
  4.             starCaptions: function(val) {  
  5.                 if (val < 3) {  
  6.                     return val;  
  7.                 } else {  
  8.                     return 'high';  
  9.                 }  
  10.             },  
  11.             starCaptionClasses: function(val) {  
  12.                 if (val < 3) {  
  13.                     return 'label label-danger';  
  14.                 } else {  
  15.                     return 'label label-success';  
  16.                 }  
  17.             },  
  18.             hoverOnClear: false  
  19.         });  
  20.           
  21.         $('#rating-input').rating({  
  22.               min: 0,  
  23.               max: 5,  
  24.               step: 1,  
  25.               size: 'lg',  
  26.               showClear: false  
  27.            });  
  28.              
  29.         $('#btn-rating-input').on('click', function() {  
  30.             $('#rating-input').rating('refresh', {  
  31.                 showClear:true,   
  32.                 disabled:true  
  33.             });  
  34.         });  
  35.           
  36.           
  37.         $('.btn-danger').on('click', function() {  
  38.             $("#kartik").rating('destroy');  
  39.         });  
  40.           
  41.         $('.btn-success').on('click', function() {  
  42.             $("#kartik").rating('create');  
  43.         });  
  44.           
  45.         $('#rating-input').on('rating.change', function() {  
  46.             alert($('#rating-input').val());  
  47.         });  
  48.           
  49.           
  50.         $('.rb-rating').rating({'showCaption':true, 'stars':'3', 'min':'0', 'max':'3', 'step':'1', 'size':'xs', 'starCaptions': {0:'status:nix', 1:'status:wackelt', 2:'status:geht', 3:'status:laeuft'}});  
  51.     });  
  52. </script>  

 


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