需要引入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. for循环、for循环嵌套

    循环:反复执行某段代码. 循环四要素:初始条件,循环条件,循环体,状态改变. 循环的最后一句:循环条件不再满足. 1.找出100以内与7有关的数并打印:(1).从1找到100(2).找出与7有关的数 ...

  2. 求树的重心（POJ1655）

    题意:给出一颗n(n<=2000)个结点的树,删除其中的一个结点,会形成一棵树,或者多棵树,定义删除任意一个结点的平衡度为最大的那棵树的结点个数,问删除哪个结点后,可以让平衡度最小,即求树的重心 ...

  3. Python学习总结8：文件模式及操作方法汇总

    文件操作之前需要文件保证文件存在,并且将文件open os.mknod("test.txt")        创建空文件 fp = open("test.txt" ...

  4. UML：组件图

    要搞清楚组件图,必须先搞清楚什么是组件? 组件有以下特点:1.能实现一定功能,或者提供一些服务.2.不能单独运行,要作为系统的一部分来发挥作用.3.在物理上独立的,不是逻辑上的概念.4.可单独维护.可 ...

  5. URAL 1001 Reverse Root（水题？）

    The problem is so easy, that the authors were lazy to write a statement for it! Input The input stre ...

  6. opscenter dashboard排错

    系统环境 opscenter 5.2 centOS 6.6 cassandra 2.0.x 问题 opscenter上的dashboard监控cassandra集群一段时间(大约1天)后总会停止显示. ...

  7. redis数据库使用测试

    注:java spring data redis内置了几种redis序列化机制.JdkSerializationRedisSerializer最高效.有关序列化更详细的介绍-http://www.my ...

  8. oracle的表空间

    创建表空间 1:创建单个文件的表空间 CREATE TABLESPACE SAMPLE LOGGING DATAFILE 'D:\11.dbf' SIZE 5M REUSE EXTENT MANAGE ...

  9. css 文字换行控制

    强制不换行 white-space:nowrap 强制不换行,并显示省略号 word-wrap: normal; text-overflow: ellipsis; white-space: nowra ...

  10. [记录]使用openGL显示点云的一个程序

    #include <GL/glut.h> #include <stdio.h> #include <iostream> using namespace std; v ...