js的选择星级评分插件

需要引入jquery和raty的js，并且低版本的jquery可能会出现样式问题，或者点击没反应，可换高版本试试

raty文档及下载：

http://www.wbotelhos.com/raty/

把下载后文件夹中的lib下文件拷到自己项目下

 <script language="javascript" type="text/javascript" src="/JavaScript/jquery/jquery-2.1.0.min.js"></script>

 <script language="javascript" type="text/javascript" src="/JavaScript/star/jquery.raty.js"></script>

 <div id="star"></div><!--> 显示星级用<-->

 <div id="result" style="display:none;"></div><!--> 用户选中星级后的结果<-->

 <script>

 $("#star").raty({

     hints: ['1', '2', '3', '4', '5'],//鼠标悬浮在星星对应显示的值

     path:"<%=PropertiesConfigureTools.getRESOURCE_URL()%>/JavaScript/star/images",//可以改成你存放的图片路径

     starOff: 'star-off.png',//可以改变图片

     starOn: 'star-on.png',//可以改变图片

     size: 24,//div长度

     target: '#result',//结果位置

     targetKeep : true//属性设置为true，用户的选择值才会被保持在目标DIV中，否则只是鼠标悬停时有值，而鼠标离开后这个值就会消失。

     half:true

 });

 //将隐藏div的值发送给服务器即可

 </script>

 <!DOCTYPE html>

 <html lang="en" dir="ltr">

 <head>

 <meta charset="utf-8">

 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

 <meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport">

 <title></title>

 <link type="text/css" rel="stylesheet" href="demo/css/application.css">

 <script type="text/javascript" src="demo/js/jquery.min.js"></script>

 <script type="text/javascript" src="lib/jquery.raty.min.js"></script>

 </head>

 <body>

 <div style="width:500px; margin:100px auto;">

   <div class="demo">

     <div id="function-demo" class="target-demo"></div>

     <div id="function-hint" class="hint"></div>

   </div>

   <div class="demo">

     <div id="function-demo1" class="target-demo"></div>

     <div id="function-hint1" class="hint"></div>

   </div>

 </div>

 <script type="text/javascript">

     $(function() {

       $.fn.raty.defaults.path = 'lib/img';

       $('#function-demo').raty({

           number: 3,//多少个星星设置

         targetType: 'hint',//类型选择，number是数字值，hint，是设置的数组值

         path      : 'demo/img',

         hints     : ['差','一般','好'],

         cancelOff : 'cancel-off-big.png',

         cancelOn  : 'cancel-on-big.png',

         size      : 24,

         starHalf  : 'star-half-big.png',

         starOff   : 'star-off-big.png',

         starOn    : 'star-on-big.png',

         target    : '#function-hint',

         cancel    : false,

         targetKeep: true,

         targetText: '请选择评分',

         click: function(score, evt) {

           alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);

         }

       });    

       $('#function-demo1').raty({

           number: 10,//多少个星星设置

         score: 2,//初始值是设置

         targetType: 'number',//类型选择，number是数字值，hint，是设置的数组值

         path      : 'demo/img',

         cancelOff : 'cancel-off-big.png',

         cancelOn  : 'cancel-on-big.png',

         size      : 24,

         starHalf  : 'star-half-big.png',

         starOff   : 'star-off-big.png',

         starOn    : 'star-on-big.png',

         target    : '#function-hint1',

         cancel    : false,

         targetKeep: true,

         precision : false,//是否包含小数

         click: function(score, evt) {

           alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);

         }

       });

     });

   </script>

全局改变设置：

你可以全局更改上述提到的所有设置 $.fn.raty.defaults.OPTION = VALUE;. 该语句必须添加在插件绑定之前。

$.fn.raty.defaults.path = assets;

$.fn.raty.defaults.cancel = true;

参数：

cancel : false // Creates a cancel button to cancel the rating.

cancelClass : 'raty-cancel' // Name of cancel's class.

cancelHint : 'Cancel this rating!' // The cancel's button hint.

cancelOff : 'cancel-off.png' // Icon used on active cancel.

cancelOn : 'cancel-on.png' // Icon used inactive cancel.

cancelPlace : 'left' // Cancel's button position.

click : undefined // Callback executed on rating click.

half : false // Enables half star selection.

halfShow : true // Enables half star display.

hints : ['bad', 'poor', 'regular', 'good', 'gorgeous'] // Hints used on each star.

iconRange : undefined // Object list with position and icon on and off to do a mixed icons.

mouseout : undefined // Callback executed on mouseout.

mouseover : undefined // Callback executed on mouseover.

noRatedMsg : 'Not rated yet!' // Hint for no rated elements when it's readOnly.

number : 5 // Number of stars that will be presented.

numberMax : 20 // Max of star the option number can creates.

path : undefined // A global locate where the icon will be looked.

precision : false // Enables the selection of a precision score.

readOnly : false // Turns the rating read-only.

round : { down: .25, full: .6, up: .76 } // Included values attributes to do the score round math.

score : undefined // Initial rating.

scoreName : 'score' // Name of the hidden field that holds the score value.

single : false // Enables just a single star selection.

space : true // Puts space between the icons.

starHalf : 'star-half.png' // The name of the half star image.

starOff : 'star-off.png' // Name of the star image off.

starOn : 'star-on.png' // Name of the star image on.

target : undefined // Element selector where the score will be displayed.

targetFormat: '{score}' // Template to interpolate the score in.

targetKeep : false // If the last rating value will be keeped after mouseout.

targetScore : undefined // Element selector where the score will be filled, instead of creating a new hidden field (scoreName option).

targetText : '' // Default text setted on target.

targetType : 'hint' // Option to choose if target will receive hint o 'score' type.

starType : 'img' // Element used to represent a star.

回调函数：

$('div').raty('score'); // Get the current score.

$('div').raty('score', number); // Set the score.

$('div').raty('click', number); // Click on some star.

$('div').raty('readOnly', boolean); // Change the read-only state.

$('div').raty('cancel', boolean); // Cancel the rating. The last param force the click callback.

$('div').raty('reload'); // Reload the rating with the current configuration.

$('div').raty('set', { option: value }); // Reset the rating with new configurations.

$('div').raty('destroy'); // Destroy the bind and give you the raw element.

$('div').raty('move', number); // Move the mouse to the given score point position.

js的选择星级评分插件的更多相关文章

jQuery星级评分插件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Con ...
js实现星级评分之方法一
利用一个星级评分的小案例,来逐步封装js星级评分插件. 从最基础的js知识,通过一个小的demo,逐步学习js的面向对象知识. 从浅到深,逐步递进. 图片素材 <!DOCTYPE html> ...
jquery评分插件jquery.raty.js
1.参考链接官方地址. 教程一教程二 2.案例1 引入文件:  <script type="text/javascript" src ...
星级评分--封装成jquery插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
js星级评分点击星级评论打分效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
js星级评分点击星级评论打分效果--收藏--转载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
js实现星级评分效果（非常规5个li代码）
1. 前言此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
js 实现星级评分
最近的项目中有一个星级评分的需求, 自己就写了一下, 由于可能一个页面要用到多个,就采用了面向对象的写法. 用到的png图片也放到这里. js要用到jquery. css: .sr-star{ ...
jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

随机推荐

java List 简单使用
Student类 class Student{ String name; String pwd; public Student(){} public Student(String name, Stri ...
WM (Constants)
Create page WM (Constants) Summary WM_* Constants and their definitions or descriptions and what c ...
dtree的使用和扩展
相信用过dtree的童靴的不在少数,网络上流传的JS树有很多,例如雪花树MzTreeView,EXT.Struts2出来之后,也有自己的树控件,但是这么多风姿卓约的倩影中,我独爱,独爱dtree那一棵 ...
.scss写法及如何转化为.css
scss可视化工具:http://koala-app.com/index-zh.html scss讲解地址:http://www.cnblogs.com/adine/archive/2012/12/1 ...
夺命雷公狗ThinkPHP项目之----企业网站19之网站配置信息的修改
我们这个其实也是很简单的,思路是直接将提交过来的cf_id 改成我们自己定义好的 “1” 即可,因为1配置只能有一个,所以永久都是该id 为1的: 先来完成我们的控制器,代码如下所示: public ...
DDR3命令状态(二)
DDR3中的状态机Diagram,详见相册. ACT:Activate,表示输出行地址,和是否自动precharge控制位. PRE:Precharge,在读写后,可以根据A10来判断是否自己进行pr ...
C#和JavaScript交互（asp.net前台和后台互调）总结 (转)
http://www.cnblogs.com/poleices/archive/2011/02/24/1963727.html C#代码与javaScript函数的相互调用: 1.如何在JavaScr ...
html5游戏引擎phaser官方示例学习
首发:个人博客,更新&纠错&回复 phaser官方示例学习进行中,把官方示例调整为简明的目录结构,学习过程中加了点中文注释,代码在这里. 目前把官方的完整游戏示例看了一大半, brea ...
asp.net项目发布网上-当前自定义错误设置禁止远程查看应用程序
早上服务器的系统突然出错了,悲剧~ ==============异常信息:============================== 服务器上出现应用程序错误.此应用程序的当前自定义错误设置禁止远程 ...
systemctl 启动成功却提示没有权限（解决）
现象: systemctl 启动svnserve成功,却在提交svn时提示没有权限. systemctl 启动smb成功,却在samba访问时提示没有权限. 但手动启动svnserve和smb后,问题 ...

js的选择星级评分插件

js的选择星级评分插件的更多相关文章

随机推荐

热门专题