加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

jquery rating 星星插件

(2012-02-13 15:24:44)
标签：

jquery

plugins

it

 分类： jquery那些事
src://http://www.raychou.com/labs/rater-star/


  1. <script type="text/javascript" src="jquery.rater.js"></script>  
  2. <link href="jquery.rater.css" rel="stylesheet"/>  

Demo1：不带参数

  1. $('#demo1').rater();  

Demo2：设置参数，指定默认值

  1. var options = {  
  2.     value   : 1  
  3. }  
  4. $('#demo2').rater(options);  

Demo3：默认值不可修改

  1. var options = {  
  2.     value   : 1,  
  3.     enabled : false  
  4. }  
  5. $('#demo3').rater(options);  

Demo4：自定义星星个数

  1. var options = {  
  2.     max : 10  
  3. }  
  4. $('#demo4').rater(options);  

Demo5：点击后触发事件

  1. var options = {  
  2.     after_click : function(ret) {  
  3.         $('#demo5 + input').val(ret.number);  
  4.     }  
  5. }  
  6. $('#demo5').rater(options);  

Demo6：AJAX调用，成功后触发事件

  1. var options = {  
  2.     url : 'ajax.php',  
  3.     after_ajax  : function(ret) {  
  4.         alert(ret.ajax);  
  5.     }  
  6. }  
  7. $('#demo6').rater(options);  

Demo7：自定义最大，最小值，以及递增步长

  1. var options = {  
  2.     min : 5,  
  3.     max : 10,  
  4.     step: 0.5,  
  5.     url : 'ajax.php',  
  6.     after_ajax  : function(ret) {  
  7.         alert(ret.ajax);  
  8.     }  
  9. }  
  10. $('#demo7').rater(options);  

Demo8：自定义AJAX请求方式（默认POST）

  1. var options = {  
  2.     url : 'ajax.php',  
  3.     method  :'GET',  
  4.     after_ajax  : function(ret) {  
  5.         alert(ret.ajax);  
  6.     }  
  7. }  
  8. $('#demo8').rater(options);  

Demo9：自定义图片

  1. var options = {  
  2.     image   : 'star2.gif',  
  3.     width   : 16,  
  4.     height  : 16  
  5. }  
  6. $('#demo9').rater(options);  

Demo10：点击后不可更改

  1. var options = {  
  2.     max : 10,  
  3.     after_click : function(ret) {  
  4.         this.value  = ret.value;  
  5.         this.enabled= false;  
  6.         $('#demo10').rater(this);  
  7.     }  
  8. }  
  9. $('#demo10').rater(options);  

Demo11：自定义title

  1. var options = {  
  2.     max : 10,  
  3.     title_format    : function(value) {  
  4.         var title = '';  
  5.         switch (value) {  
  6.             case 1 :   
  7.                 title   = '一';  
  8.                 break;  
  9.             case 7 :   
  10.                 title   = '七';  
  11.                 break;  
  12.             default :  
  13.                 title = value;  
  14.                 break;  
  15.         }  
  16.         return title;  
  17.     }  
  18. }  
  19. $('#demo11').rater(options); 

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有