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

随机推荐

转：Jmeter之Bean shell使用(一)
一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法; BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanS ...
Java基础(9):Java生成随机数一定范围内的数的一个典型例子
题目:编写一个JAVA程序,创建指定长度的 int 型数组,并生成 100 以内随机数为数组中的每个元素赋值,然后输出数组 note: 通过 (int)(Math.random() * 100) 生成 ...
认真学习shell的第一天-数学运算
shell中的数学运算有三种方式: (1)let,用let的时候,变量名称前不用添加$ (2)[],[]中变量可使用也可不使用$ (3)(())变量名之前必须添加$
ZOJ 3645 BiliBili（高斯消元）
Shirai Kuroko is a Senior One student. Almost everyone in Academy City have super powers, and Kuroko ...
Linux centOS7 下安装mysql5.7.10
1:下载二进制安装包 http://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.10-linux-glibc2.5-x86_64.tar.gz 2:解压到 ...
夺命雷公狗jquery---2层级选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
基于UP-CUP6410点灯实验完成
远程点灯实验实验目的: 实现远程点灯,通过gprs 自带调试软件发送信息,完成智能家具远程点灯实验. 1.定制arm系统使用uboot资料自带的!在内核中添加pl2303串口驱动,进行u口转串口的 ...
yii2的windows下安装及前期步骤
Yii2的安装(以生成basic目录为例) 第一步:服务器安装好后生成www目录,在该目录下新建yii2目录,把下载的compser.phar包放在该目录下第二步:dos命令下进入项目目录第三步: ...
什么是BI【转】
产品与服务 - 商务智能目前,商业智能产品及解决方案大致可分为数据仓库产品.数据抽取产品.OLAP产品.展示产品.和集成以上几种产品的针对某个应用的整体解决方案商业智能是什么? 简而言之, ...
不错的linux下通用的java程序启动脚本（转载）
转自:http://www.cnblogs.com/langtianya/p/4164151.html 虽然写起动shell的频率非常不高...但是每次要写都要对付一大堆的jar文件路径,新加jar包 ...

js的选择星级评分插件

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

随机推荐

热门专题