zoukankan      html  css  js  c++  java
  • 推荐一款JQuery星形评级插件

    jRating 是一个非常灵活的jQuery插件用于快速创建一个Ajax星型投票系统。可以设置星型数量和小数支持。功能很强大,具体大家可以看一下这个插件的js代码就知道了,下面这里演示一下这个插件有哪些功能与具体如何实现。

    Exemple 1 (Basic exemple without options) :
     
    <!-- JS to add -->
    <script type="text/javascript">
      $(document).ready(function(){
        $(".basic").jRating();
      });
    </script>
    Exemple 2 (type : small - average 10 - id 2 - 40 stars) :
     
    <!-- JS to add -->
    <script type="text/javascript">
      $(document).ready(function(){
        $(".exemple2").jRating({
    	  type:'small', // type of the rate.. can be set to 'small' or 'big'
    	  length : 40, // nb of stars
    	  decimalLength : 1 // number of decimal in the rate
        });
      });
    </script>
    
    Exemple 3 (step : true - average 18 - id 2 - 15 stars) :
     
    <!-- JS to add -->
    <script type="text/javascript">
      $(document).ready(function(){
        $(".exemple3").jRating({
    	  step:true,
    	  length : 20, // nb of stars
    	  decimalLength:0 // number of decimal in the rate
        });
      });
    </script>
    
    Exemple 4 (Rate is disabled) :
     
    <!-- JS to add -->
    <script type="text/javascript">
      $(document).ready(function(){
        $(".exemple4").jRating({
    	  isDisabled : true
    	});
      });
    </script>
    
    Exemple 5 (With onSuccess & onError methods) :
     
    <!-- JS to add -->
    <script type="text/javascript">
      $(document).ready(function(){
        $(".exemple5").jRating({
    	  length:10,
    	  decimalLength:1,
    	  onSuccess : function(){
    	    alert('Success : your rate has been saved :)');
    	  },
    	  onError : function(){
    	    alert('Error : please retry');
    	  }
    	});
      });
    </script>
    
    Exemple 6 (jRating & jNotify plugins !!) :
     
    <!-- JS to add -->
    <script type="text/javascript">
      $(document).ready(function(){
        $(".exemple6").jRating({
    	  onSuccess : function(){
    	    jSuccess('Success : your rate has been saved :)',{
    		  HorizontalPosition:'center',
    		  VerticalPosition:'top'
    		});
    	  },
    	  onError : function(){
    	    jError('Error : please retry');
    	  }
    	});
      });
    </script>
    
    Exemple 7 (Rate infos disabled) :
     
    <!-- JS to add -->
    <script type="text/javascript">
      $(document).ready(function(){
        $(".exemple7").jRating({
    	  showRateInfo:false
    	});
      });
    </script>
  • 相关阅读:
    GCD 信号量使用记录
    使用AFNetWorking 上传文件/图片
    iOS 13 使用LaunchScreen.storyboard设置启动图注意事项
    clipsToBounds和masksToBounds的区别?
    react-native 单页面界面横屏(带导航栏的V5.0不支持,V4.0,V3.0支持)
    react-native 5.0导航栏配置
    使用SSZipArchive 注意事项
    iOS 相册照片heic (实况)
    react-native 集成Code-Push的常用命令
    Java基础知识学习02-运算符、循环语句、break、continue
  • 原文地址:https://www.cnblogs.com/xiaoyang002/p/4109158.html
Copyright © 2011-2022 走看看