好记忆不如烂笔头... ...
最近被拉去做前端,接了个活,特别的恶心、真的是砖呀、、、
言归正传,说说怎么实现:多维度的星级评论,下面代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>评价老师</title>
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/common.js"></script>
</head>
<style type="text/css">
*{margin:0;padding:0;}
.wrapper{height:20px;padding:5px;width:200px;margin:10px auto 10px;}
.li{float:left;width:26px;height:20px;background:url(images/star.png) 0 -20px no-repeat;}
span{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;}
</style>
<script type="text/javascript">
var uid = decodeURI(request("uid"));
if (uid==null || uid=='') {
uid = 5740;
}
function saveCommont(){
var demeanor = $("#attitude").val();
var skill = $("#way").val();
var atmosphere = $("#atmosphere").val();
var achievement = $("#gains").val();
var timeM = $("#rhythm").val();
var pronunciation = $("#pronunciation").val();
var corrections = $("#error").val();
console.log("demeanor="+demeanor+",skill="+skill+",atmosphere="+atmosphere+",achievement="+achievement+",timeM="+timeM+",pronunciation="+pronunciation+",corrections="+corrections);
if (demeanor==null || demeanor=='') {
alert("行为不允许为空!");
return false;
}
if (skill==null || skill=='') {
alert("技能不允许为空!");
return false;
}
if (atmosphere==null || atmosphere=='') {
alert("气氛不允许为空!");
return false;
}
if (achievement==null || achievement=='') {
alert("完成度不允许为空!");
return false;
}
if (timeM==null || timeM=='') {
alert("时间控制不允许为空!");
return false;
}
if (pronunciation==null || pronunciation=='') {
alert("发音不允许为空!");
return false;
}
if (corrections==null || corrections=='') {
alert("纠错不允许为空!");
return false;
}
$.ajax({
url:"http://api.121learn.com/api/v1/teacher/rate",
type: "POST",
dataType:"json",
data:{"uid":uid,"demeanor":demeanor,"skill":skill,"atmosphere":atmosphere,"achievement":achievement,"timeM":timeM,"pronunciation":pronunciation,"corrections":corrections},
async: false,
headers: {
"Authorization":"Token a9baf4e0fc59d29a203fd7cb8ced23a3cbb5d78a",
"Content-Type":"application/x-www-form-urlencoded"
},
success:function(object){
if (object.success==true) {
alert("评论成功!");
return true;
}else{
alert(object.msg);
return false;
}
},
error: function() {
alert(" bad request!");
return false;
}
});
return false;
};
//onload.
$(function(){
var array = ["attitude","way","atmosphere","gains","rhythm","pronunciation","error"];
for (var i = 0; i <array.length; i++) {
var instance = array[i];
console.log(instance);
var star = $("#teacher_"+instance+" > ul > li");
var oDiv = $("#teacher_"+instance+" > ul")[0];
showStar(star,oDiv,instance);
}
});
//show style.
function showStar(star,oDiv,instance){
var temp = 0;
for(var i = 0, len = star.length; i < len; i++){
star[i].index = i;
star[i].onmouseover = function(){
clear();
for(var j = 0; j < this.index + 1; j++){
star[j].style.backgroundPosition = '0 0';
}
}
star[i].onmouseout = function(){
for(var j = 0; j < this.index + 1; j++){
star[j].style.backgroundPosition = '0 -20px';
}
current(temp);
}
star[i].onclick = function(){
temp = this.index + 1;
$("#"+instance).val(temp);
current(temp);
}
}
//清除所有
function clear(){
for(var i = 0, len = star.length; i < len; i++){
star[i].style.backgroundPosition = '0 -20px';
}
}
//显示当前第几颗星
function current(temp){
for(var i = 0; i < temp; i++){
star[i].style.backgroundPosition = '0 0';
}
}
};
</script>
<div class="nav">
<div class="title">
<a href="javascript:" id="OK" οnclick="return saveCommont()">
评价
</a>
</div>
</div>
<body class="mainbg">
<div class="evaluating">
<div class="tab">
<div class="col-50">
<a href="javascript:" id="OK" οnclick="javascript:location.href='commont_class.htm'">
课堂反馈
</a>
</div>
<div class="col-50 current">
<a href="javascript:" id="OK" οnclick="javascript:location.href='commont_teacher.htm'">
评价老师
</a>
</div>
</div>
<div class="tabcon">
<div class="">
<p class="ftsty-6"> 我们致力于提供优质的在线英语教育服务,为了评估老师的教学质量,为了给您提供更好的服务,请您评价一下老师这堂课的表现吧!
</p>
</div>
<div class="row choses margin-top-20">
<div class="col-30 title">授课态度</div>
<div class="col-70">
<div class="row">
<div class="col-50" id="teacher_attitude">
<ul class="wrapper">
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
</ul>
<span id="attitude"></span>
</div>
</div>
</div>
</div>
<div class="row choses margin-top-20">
<div class="col-30 title">授课方式</div>
<div class="col-70">
<div class="row">
<div class="col-50" id="teacher_way">
<ul class="wrapper">
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
</ul>
<span id="way"></span>
</div>
</div>
</div>
</div>
<div class="row choses margin-top-20">
<div class="col-30 title">课堂氛围</div>
<div class="col-70">
<div class="row">
<div class="col-50" id="teacher_atmosphere">
<ul class="wrapper">
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
</ul>
<span id="atmosphere"></span>
</div>
</div>
</div>
</div>
<div class="row choses margin-top-20">
<div class="col-30 title">课堂收获</div>
<div class="col-70">
<div class="row">
<div class="col-50" id="teacher_gains">
<ul class="wrapper">
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
</ul>
<span id="gains"></span>
</div>
</div>
</div>
</div>
<div class="row choses margin-top-20">
<div class="col-30 title">上课节奏</div>
<div class="col-70">
<div class="row">
<div class="col-50" id="teacher_rhythm">
<ul class="wrapper">
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
</ul>
<span id="rhythm"></span>
</div>
</div>
</div>
</div>
<div class="row choses margin-top-20">
<div class="col-30 title">老师发音</div>
<div class="col-70">
<div class="row">
<div class="col-50" id="teacher_pronunciation">
<ul class="wrapper">
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
</ul>
<span id="pronunciation"></span>
</div>
</div>
</div>
</div>
<div class="row choses margin-top-20">
<div class="col-30 title">适时纠错</div>
<div class="col-70">
<div class="row">
<div class="col-50" id="teacher_error">
<ul class="wrapper">
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
</ul>
<span id="error"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tabcon">
</div>
</div>
<div class="subimt">
<a href="javascript:" id="OK" οnclick="return saveCommont()">
提交评价
</a>
</div>
</body>
</html>
需要的是一个图片和jquery的文件就OK了。
其实说起来也容易就是控制显示和隐藏的事情、
不多说、、、
记下,方便下次使用的时候直接拿来用。
实例下载:http://download.csdn.net/detail/supingemail/9117197
可以直接拿来使用。。。