jquery评分插件jquery.raty.js
1.参考链接
2.案例1
引入文件:
<!-- 评分插件 -->
<script type="text/javascript" src="YYFramework/Public/js/raty-master/lib/jquery.raty.js"></script>
使用的 是 图片 ,只需要 引入 这个就可以了.
然后要设置 图片的 地址.
<?php
// header ( "Content-type:text/html;charset=utf-8" ); ?>
<!DOCTYPE html>
<html>
<head>
<title>组长评价组员</title> <style type="text/css">
/***1: 初始样式设置*******/
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; } ul, ol {
list-style: none;
} .hide {
display: none;
} /*******2: 清除浮动******/ /*IE6, IE7 生效*/
.floatfix{
*zoom:1;
} /*其他浏览器*/
.floatfix:after{
content:"";
display:table;
clear:both;
} /***3: 超出长度显示省略号. 还需要设置width**/ .ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} /****4: 兼容的 不继承 的透明度*****/
.rgba {
background: rgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/
background: rgba(0, 0, 0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
} /****************************内容***************************************/ /* 字体*/
/*body {
font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif,"宋体";
}*/ /*body {
background-color: #fff;
}*/ .all { width: 100%;
margin: 0px auto;
/*border: 1px solid red;*/ } .defaultHr {
border-bottom: 2px solid #DBDBDB;
margin-top: 20px;
margin-bottom: 20px;
} .button {
width: 100px;
margin: 0px auto;
text-align: center;
/*border: 1px solid red;*/
height: 40px;
line-height: 40px;
margin-top: 30px;
border-radius: 3px; background-color: #337ab7; color: #FFF;
font-size: 20px;
font-weight: 700; cursor: pointer; margin-bottom: 30px; } </style> <?php include 'YYFramework/Public/header.php';?>
<script type="text/javascript"> //声明 base
var base = null;
//如果父级存在base
if ('undefined' != typeof(window.parent.base)) {
base = window.parent.base;
} else {
base = new BASEJS();
} //初始化
$(function() {
//如果父级存在base
if ('undefined' == typeof(window.parent.base)) {
//初始化 加载
base.init();
}
//加载列表
}); </script>
</head>
<body>
<div class="all "> <div class="table-responsive" style="width: 90%; margin: 0px auto;">
<table class="table table-bordered table-hover">
<caption style="text-align: center;">组间互评</caption>
<thead>
<tr>
<th>考核项目</th>
<th>总分值</th>
<th>评价标准</th>
<th class="student" data-cname="s1" data-sid="1">学生01</th>
<th class="student" data-cname="s2" data-sid="2">学生02</th>
<th class="student" data-cname="s3" data-sid="3">学生03</th>
<th>平均分</th>
</tr>
</thead>
<tbody>
<tr>
<td>记账凭证1</td>
<td>10</td>
<td>
<div>会计科目是否准确无误（4）</div>
<div>金额及借贷方向是否准确无误（4）</div>
<div>其他项目是否准确完整（2）</div>
</td>
<td>
<div class="s1 score score10"></div>
</td>
<td>
<div class="s2 score score10"></div>
</td>
<td>
<div class="s3 score score10"></div>
</td>
<td>
<div class="pj"></div>
</td>
</tr>
<tr>
<td>记账凭证2</td>
<td>10</td>
<td>
<div>会计科目是否准确无误（4）</div>
<div>金额及借贷方向是否准确无误（4）</div>
<div>其他项目是否准确完整（2）</div>
</td>
<td>
<div class="s1 score score10"></div>
</td>
<td>
<div class="s2 score score10"></div>
</td>
<td>
<div class="s3 score score10"></div>
</td>
<td>
<div class="pj"></div>
</td>
</tr>
<tr>
<td>记账凭证3</td>
<td>10</td>
<td>
<div>会计科目是否准确无误（4）</div>
<div>金额及借贷方向是否准确无误（4）</div>
<div>其他项目填写是否准确（2）</div>
</td>
<td>
<div class="s1 score score10"></div>
</td>
<td>
<div class="s2 score score10"></div>
</td>
<td>
<div class="s3 score score10"></div>
</td>
<td>
<div class="pj"></div>
</td>
</tr>
<tr>
<td>预收账款明细账</td>
<td>6</td>
<td>
<div>金额及借贷方向是否正确（2）</div>
<div>余额及借贷方向是否正确（2）</div>
<div>其他项目填写是否准确（2）</div>
</td>
<td>
<div class="s1 score score6"></div>
</td>
<td>
<div class="s2 score score6"></div>
</td>
<td>
<div class="s3 score score6"></div>
</td>
<td>
<div class="pj"></div>
</td>
</tr>
<tr>
<td>预收账款总账</td>
<td>4</td>
<td>
<div>金额及借贷方向是否正确（2）</div>
<div>其他项目填写是否准确（2）</div>
</td>
<td>
<div class="s1 score score4"></div>
</td>
<td>
<div class="s2 score score4"></div>
</td>
<td>
<div class="s3 score score4"></div>
</td>
<td>
<div class="pj"></div>
</td>
</tr>
<tr>
<td>合计</td>
<td>40</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr> </tbody>
</table>
</div>
<div class="defaultHr"></div> <div class="button" onclick="answer(this)">提交</div> </div> <script type="text/javascript"> //10 分:
$(".score10").raty({
number: 10,
path: 'YYFramework/Public/js/raty-master/lib/images',
targetType: 'number',
click: function(score, evt) {
var total = 0;
total += score;
$(this).parent("td").siblings("td").find(".score").each(function(index, el) {
if (typeof $(el).raty('score') != "undefined") {
total += $(el).raty('score');
}
}); var average = new Number( total / 3);
var pj = average.toFixed(2);
$(this).parent("td").siblings("td").find(".pj").html(pj); }
}); //6 分:
$(".score6").raty({
number: 6,
path: 'YYFramework/Public/js/raty-master/lib/images',
targetType: 'number',
click: function(score, evt) {
var total = 0;
total += score;
$(this).parent("td").siblings("td").find(".score").each(function(index, el) {
if (typeof $(el).raty('score') != "undefined") {
total += $(el).raty('score');
}
}); var average = new Number( total / 3);
var pj = average.toFixed(2);
$(this).parent("td").siblings("td").find(".pj").html(pj);
}
}); //4分:
$(".score4").raty({
number: 4,
path: 'YYFramework/Public/js/raty-master/lib/images',
click: function(score, evt) { var total = 0;
total += score;
$(this).parent("td").siblings("td").find(".score").each(function(index, el) {
if (typeof $(el).raty('score') != "undefined") {
total += $(el).raty('score');
}
}); var average = new Number( total / 3);
var pj = average.toFixed(2);
$(this).parent("td").siblings("td").find(".pj").html(pj); }
}); //提交结果:
function answer(node)
{ //1: 必须所有的 评价项被选中:
var flag = true;
$(".score").each(function(index, el) { if (typeof $(el).raty('score') == "undefined") {
flag = false;
return false;
}
}); if (flag == false) { base.msg("warning", "必须选择所有的评价项,才可以提交!");
return;
} //2: 收集数据:
var postData = []; $(".student").each(function(index, el) { var cname = $(el).attr("data-cname");
var studentId = $(el).attr("data-sid"); var score = 0; $("."+cname).each(function(index2, el2) { score += $(el2).raty('score'); }); var cell = {};
cell.studentId = studentId;
cell.score = score; postData.push(cell); }); console.log(postData);
} </script>
</body>
</html>
效果:
获取到 的 学生id , 以及学生对应的总分;
jquery评分插件jquery.raty.js的更多相关文章
- 一款好用的jquery评分插件
一．使用说明 1.jQuery评分插件的功能: 图标显示用户评分,更美观 可实时点击,切换评分 返回用户评分,记录用户评分 实现类似下图效果 2.优点: 美观,方便 3.缺点: 只能用于jquery开 ...
- jQuery滚动条插件 – jquery.slimscroll.js
jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- jQuery 评分插件(转)
评分效果的小插件jQuery Raty.它提供的API相当丰富真的是让人爱不释手.详细文档及下载插件请移步这里. 基本使用 下面我们来实际操作,运用一下这个有爱的小插件. 需要做的事情非常简单,在页面 ...
- 一个非常棒的jQuery 评分插件--好东西要分享
现在做网页已经不仅限于实现功能了,更多的是要实现功能的同时追求更加美观的实现.比如页面上让用户评分的功能,你完全可以放5个RdioButton让用户选择分数,也可以用DropDownList来实现,但 ...
- 推荐10款 好用的 Jquery 评分插件
Raty jQuery Raty这是一个能够自动生成可定制的星级评分jQuery插件.可以自定义图标,创建各种评级组合,星星数量,每一颗星星的注释,可以在当一个星星被点击时的加回调函数. 地址: Ra ...
- jQuery遮罩插件 jquery.blockUI.js
Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DO ...
- JQuery多媒体插件jQuery Media Plugin使用详解
malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...
随机推荐
- 手动调用dubbo接口
1. 打开命令窗口,telnet IP地址 dubbo端口号 telnet 127.0.0.1 28001 2. 找到service ls 列出所有服务 dubbo>cd com.faaaaa. ...
- 2018-2019-2 网络对抗技术 20165303 Exp3 免杀原理与实践
实验内容 一. 正确使用msf编码器(0.5分),msfvenom生成如jar之类的其他文件(0.5分),veil-evasion(0.5分),加壳工具(0.5分),使用shellcode编程(1分) ...
- Linux压缩与解压缩文件
1 将tgz文件解压到指定目录. tar zxvf test.tgz -C 指定目录 比如:将 test.tgz 解压到 /home目录:tar zxvf test.tgz -C /home 2 将指 ...
- sql判断日期是否为当前季度
判断日期时候为当年: SELECT DateDiff(yy, '2018-01-02', GetDate()) 返回结果0为当年. 获取当前季度: SELECT DATEPART(QUARTER,GE ...
- 一个狗血的mysql编码错误
执行查询语句总是报错,某个查询语句字段编码错误. 各种修改那个表没用, 最后发现是创建schemas的时候没有加编码 应该由 CREATE SCHEMA new_schema;改为 CREATE SC ...
- centos7与centos6命令区别
CentOS 7 vs CentOS 6的不同 (1)桌面系统[CentOS6] GNOME 2.x[CentOS7] GNOME 3.x(GNOME Shell) (2)文件系统[CentOS ...
- Oracle单机Rman笔记[3]---RMAN脱机备份及命令基础介绍
A.NOARCHIVELOG模式下的物理备份 1.完全关闭数据库 2.备份所有的数据库文件.控制文件.联机重做日志 3.重新启动数据库 B.RMAN的体系结构概述 重新构建控制文件: 将控制文件备份为 ...
- sql server中如何修改视图中的数据？
sql server中如何修改视图中的数据? 我做个测试,视图的数据有标记字段时,如果是这种方式(0 as FlagState),是无法修改的 --创建视图语句 --- create view V_E ...
- js 实现异步上传图片+预览
两种js实现方式,一种用原生的ajax:另一种用JQuery,例子比较简单,直接上代码. <!DOCTYPE html> <html> <head> <tit ...
- Python2.7.13下载安装全过程（Windows版）
前提: 我下载的Python是windows版本的,演示过程是在win10 64位操作系统上安装的. 1.下载 进入官网https://www.python.org/,找到Dowdloads,根 ...