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, ...
随机推荐
- deep learning的一些知识点
softmax loss: softmax: softmax的作用,将fc的输出映射成为(0,1)的概率,并将其差距拉大. cross entropy loss: y是样本的真实标签,为1 ...
- python下基于sokcet的tcp通信——入门篇
环境 python版本:2.7 IDE:pycharm TCP/UDP协议均为传输层的协议,绝大部分应用程序之间的通信都是使用TCP或UDP,故而在网络通信中及其重要,想详细了解他们之间的差异,可参考 ...
- 面试题3--数组中的重复数字（new数组的新写法）
总是忘了一些条件的判断,比如非空或者其他之类. #include<iostream> using namespace std; int Frepeat(int num[],int leng ...
- Java JTable视图窗口滚动并定位到某一行
java swing编程中需要和数据库打交道并用表格将数据展示出来,如果数据太多,可能显示窗口如下 这时数据太多就需要拖动垂直滚动条才能看到下面的数据,那如果我现在有这样一个需求,我希望往数据库里插入 ...
- Linux中一个快速查找文件和目录的命令
功能介绍: locate命令其实是find -name的另一种写法,但是要比后者快得多,原因在于它不搜索具体目录,而是搜索一个数据库/var/lib/locatedb,值得注意的是:版本不同,会有所不 ...
- java既然存在gc线程，为什么还存在内存泄漏？
java既然存在gc线程,为什么还存在内存泄漏? 1.既然 Java 的垃圾回收机制能够自动的回收内存,怎么还会出现内存泄漏的情况呢?这个问题,我们需要知道 GC 在什么时候回收内存对象,什么样的内存 ...
- ldap 导出、导入ldif数据
ldap 导出.导入ldif数据有如下方式: 1.dsadm(速度快,需要停止ldap实例) 2.dsconf(速度慢,需要保持ldap实例开启) windows导出.导入需要加上参数--unsecu ...
- Excel文件数据导入到后台保存倒数据库
后台代码数据解析: 方法一: (简单点) import org.apache.poi.hssf.usermodel.HSSFCell;import org.apache.poi.hssf.usermo ...
- SharePoint附加内容数据库时报错
今天遇到一个很奇怪的问题,在sharepoint管理中心中给web application添加内容数据库时报错:The SharePoint database named WSS Content al ...
- Mxnet编译安装
在安装之前请你们自行安装好cuda和cudnn,记得修改环境变量并且source一下,下面讲一下mxnet的安装 严格按照我的所有的指令 sudo apt-get update sudo apt-ge ...