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, ...
随机推荐
- Keepalive配置说明
配置文件 [root@lb01 keepalived]# cat keepalived.conf ! Configuration File for keepalived global_defs { n ...
- 『Python进阶』专题汇总
基础知识 Python3内置函数 『Python』库安装 『流畅的Python』第1~4章_数据结构.编码 『Python』基础数据结构常见使用方法 『Python CoolBook』数据结构和算法_ ...
- 教你函数如何传参更加方便 ----python 传参 *args **kwargs
*args 和 **kwargs 可以将不定数量的参数传递给函数 *args 和 **kwargs,前者适用于 传入非键值对的可变数量的参数列表,后者适用于 传入不定长度的键值对, 作为参数传递给函 ...
- linux添加本地yum源
增加一块硬盘 然后格式化成btrfs格式的文件 mkfs.btrfs /dev/sde 永久挂载 echo "/dev/sde /mnt btrfs defaults 0 0" & ...
- 使用 requests 模块
官网:http://docs.python-requests.org/en/master/ 请求方式 requests.get() requests.post() requests.put() req ...
- PHP反射学习总结
反射(Reflection) PHP的反射机制提供了一套反射API,用来访问和使用类.方法.属性.参数和注释等,比如可以通过一个对象知道这个对象所属的类,这个类包含哪些方法,这些方法需要传入什么参数, ...
- WinForm界面设计优化过程
以在做的项目为例,记录一下界面美化过程中遇到的问题,由于项目是先做出来之后,又请美工进行稍微调整设计界面,所以会又些限制 1. TabControl的问题----在添加了背景图片后,TabContro ...
- python 变量之小整数池跟大整数池
在python中定义变量会有:id,type,value.对于==比较的是value,对于is比较的是id. 因此,对于相同value的变量,它的type相同,但是它的id值可能不一样.对于相同id的 ...
- vue2.0项目 calendar.js(日历组件封装)
最近一直闲来无事,便寻思着做一下自己的个人项目,也想说能使用现在比较流行的一些mvvm框架来做,于是就选用了这样的一个技术栈vue2.0+vue-router+vuex+webpack来做,做得也是多 ...
- 前端必备之Node+mysql+ejs模版如何写接口
前端必备之Node+mysql+ejs模版如何写接口 这星期公司要做一个视频的后台管理系统, 让我用Node+mysql+ejs配合写接口, 周末在家研究了一下, 趁还没来具体需求把研究内容在这里分享 ...