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)存在样式冲突,导致下拉框的样式发生 ...

随机推荐

Where does beauty come from?
One more question, rational beauty should come from a dedicated brain and mind. Should there be more ...
java一般要点
1.String是引用类型. 2.char, short, byte在进行运算的时候会自动转换成int类型数据., 3.数据A 异或同一个数两次,得到的还是A 4.java的for循环,可以在前面加一 ...
android复习第二天------布局
1,在4,0版本前一共有五种布局,且都是ViewGroup的子类分别是 RelativeLayout(相对),AbsoluteLayout(绝对),LinearLayout(线性),FrameLayo ...
opscenter dashboard排错
系统环境 opscenter 5.2 centOS 6.6 cassandra 2.0.x 问题 opscenter上的dashboard监控cassandra集群一段时间(大约1天)后总会停止显示. ...
RMAN基础知识补充
一.FORMAT字符串替代变量使用FORMAT参数时可使用的各种替换变量,如下: %c :备份片的拷贝数(从1开始编号): %d :数据库名称: %D :位于该月中的天数 (DD): %M :位于该 ...
oracle的散列聚簇表
在簇表中,Oracle使用存储在索引中的键值来定位表中的行, 而在散列聚簇表中,使用了散列函数代替了簇索引,先通过内部函数或者自定义的函数进行散列计算,然后再将计算得到的码值用于定位表中的行. 创建散 ...
android 三种定位方式
http://www.cnblogs.com/oudi/archive/2012/03/22/2411509.html 最近在看android关于定位的方式,查了很多资料,也做了相关实验,在手机上做了 ...
windows下gvim与gcc的一键环境的搭建
此处略去在windows中配置gcc的方法.默认你已经能够在命令提示符下直接使用gcc了. 其实就是写了一个vimscript的.vim文件,然后在 _vimrc 中使用source命令引用进来. 以 ...
RobotFrameWork接口报文测试-----（三）demo的加强版（数据驱动测试）
在上一篇RobotFrameWork接口报文测试-----(二)demo的升级版基础上,将接口的xml的格式保存在xml文件中,然后程序如果增加一个接口,在xml文件里添加即可,无需修改自动化测试里的 ...
关于事件触发的一个小tips
今天看到如下代码 window.globalEvent.bind('hotelHotTableRendered', function () { $('#hotelHotTd a').each(func ...

js的选择星级评分插件

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

随机推荐

热门专题