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

随机推荐

JavaScript----分层导航滚动事件
分层导航 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
树形DP（简单题）（Y HDU4705）
题意:给出一个n个节点的树形图,统计{A,B,C}的数量,其中ABC分别是树上三个不同的节点,并且这三个节点不能被一条路径覆盖分析:对于下图进行dfs深搜统计,num[u]统计回溯到当前节点u,并 ...
csu oj 1339: 最后一滴血
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1339 1339: 最后一滴血 Time Limit: 1 Sec Memory Limit: 1 ...
po line received is canceled(恢复PO被取消的余量)
1張PO已部分收貨,後來由于某種原因,將部分收貨的PO明行取消,現在要對已收料的這一部分進行退貨處理,要怎麼做才好呢? [@more@]DATA COLLECTED===============COL ...
夺命雷公狗---node.js---21之项目的构建在node+express+mongo的博客项目6之数据的遍历
首先还是来链接数据库,然后就查找,如下所示: /** * Created by leigood on 2016/8/31. */ var express = require('express'); v ...
[OrangePi] Booting from USB drive
You can also boot from USB drive partition. The file named cmdline.txt must exist on BOOT (fat) part ...
ubuntu下配置SVN服务器
自己买的阿里云服务器.可是我老感觉没有SVN上传代码下载代码太不方便!决定配置个SVN服务器! 1.安装Subversion $ sudo apt-get install subversion $ s ...
C语言初学者代码中的常见错误与瑕疵(7)
问题: 矩形的个数在一个3*2的矩形中,可以找到6个1*1的矩形,4个2*1的矩形3个1*2的矩形,2个2*2的矩形,2个3*1的矩形和1个3*2的矩形,总共18个矩形.给出A,B,计算可以从中找到 ...
Writable、WritableComparable和comparators
hadoop的序列化格式 hadoop自身的序列化存储格式就是实现了Writable接口的类,他只实现了前面两点,压缩和快速.但是不容易扩展,也不跨语言. 我们先来看下Writable接口,Writa ...
Sql Server Analysis Service 转换为UnknownMember的正确设置
在SSAS中事实表数据被归类到为UnknownMember 的时候分为两种情况: 第一种情况,在SSAS里面事实表中的外键是null,这种情况SSAS在建事实表和维度时ErrorConfigurati ...

js的选择星级评分插件

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

随机推荐

热门专题