需要引入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的选择星级评分插件的更多相关文章

  1. jQuery星级评分插件

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Con ...

  2. js实现星级评分之方法一

    利用一个星级评分的小案例,来逐步封装js星级评分插件. 从最基础的js知识,通过一个小的demo,逐步学习js的面向对象知识. 从浅到深,逐步递进. 图片素材 <!DOCTYPE html> ...

  3. jquery评分插件jquery.raty.js

    1.参考链接 官方地址. 教程一 教程二 2.案例1 引入文件: <!-- 评分插件 --> <script type="text/javascript" src ...

  4. 星级评分--封装成jquery插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. js星级评分点击星级评论打分效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. js星级评分点击星级评论打分效果--收藏--转载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js实现星级评分效果（非常规5个li代码）

    1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...

  8. js 实现星级评分

    最近的项目中有一个星级评分的需求,  自己就写了一下, 由于可能一个页面要用到多个,就采用了面向对象的写法. 用到的png图片也放到这里.    js要用到jquery. css: .sr-star{ ...

  9. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

随机推荐

  1. Codeforce Round #213 Div2

    哎,弄了半天这次的C还是没出,真是捉急!,还TM的以为前几次只是运气不好!太逗了!

  2. Appium的理念

    1.Appium的架构:C/S模式 Appium的核心是暴漏REST API的WebServer,appium接收来自客户端的连接请求,监听由客户端发起的命令,在移动设备上执行这些命令,这些命令的执行 ...

  3. C++之路起航——标准模板库（queue）

    queue: FIFO队列:先进先出队列. 优先队列:对队列中的元素按优先级的大小输出. 定义: FIFO队列: queue<数据类性>变量名. 优先队列:priority_queue&l ...

  4. php正则表达式and数组

    <?php //正则表达式 //斜杠代表定界符 /^$/ /* $str="abcde123fg456h"; $reg="/\d/"; echo preg ...

  5. dbo与db_owner区别

    dbo 是具有在数据库中执行所有活动的暗示性权限的用户.将固定服务器角色 sysadmin 的任何成员都映射到每个数据库内称为 dbo 的一个特殊用户上.另外,由固定服务器角色 sysadmin 的任 ...

  6. c#中 ==与equals有什么区别【转】

    转至http://www.zybang.com/question/2263895f201ffec6c68b6c304ac4cd61.html 对于值类型.引用类型来说比较过程怎样的?using Sys ...

  7. 关于 MySQL LEFT JOIN 你可能需要了解的三点

    即使你认为自己已对 MySQL 的 LEFT JOIN 理解深刻,但我敢打赌,这篇文章肯定能让你学会点东西! ON 子句与 WHERE 子句的不同 一种更好地理解带有 WHERE ... IS NUL ...

  8. 【python cookbook】【数据结构与算法】11.对切片命名

    问题:如何清理掉到处都是硬编码的切片索引 解决方案:对切片命名 假设有一些代码用来从字符串的固定位置中取出具体的数据(比如从一个平面文件或类似的格式:平面文件flat file是一种包含没有相对关系结 ...

  9. 160921、React入门教程第一课--从零开始构建项目

    工欲善其事必先利其器,现在的node环境下,有太多好用的工具能够帮助我们更好的开发和维护管理项目. 我本人不建议什么功能都自己写,我比较喜欢代码复用.只要能找到npm包来实现的功能,坚决不自己敲代码. ...

  10. 如何杀掉D状态的进程？[zt]【转】

    转自:http://blog.csdn.net/chinalinuxzend/article/details/4288791 [-] 如何杀掉D状态的进程zt 相关博文   原贴:http://www ...