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>
  • 相关阅读:
    windows server2016设置关闭自动更新
    ubuntu20/mac 安装php8.0
    Linux / Python 打印花式字符串
    Linux 增加 DNS 域名解析服务器
    挺不错的一个开源国产上线部署平台:walle
    Python 定时任务实现只执行一次的方法
    JavaScript 正则入门
    grid布局详解
    flex布局详解
    CSS3 入门指南(二)
  • 原文地址:https://www.cnblogs.com/xiaoyang002/p/4109158.html
Copyright © 2011-2022 走看看