<!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" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery评分</title>
<load href="__PUBLIC__/Js/jquery.js" />
<style>
/*评分*/
.starsBg{
background:url("/App/Tpl/default/Admin/Public/images/start.gif") 0 -22px; top:0; left:0; height:22px; padding:0px; cursor:pointer;
}
.starsovering{
background:url("/App/Tpl/default/Admin/Public/images/start.gif"); height:22px; position:absolute; top:0; left:0;
}
.starsON{
position:absolute; top:0; left:0;height:22px;
}
</style>
</head>
<body>
<script type="text/javascript">
//jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
jQuery.fn.stars = function(options,callback){
//默认设置
var settings = { MaxStar:20,StarWidth:23,CurrentStar:5,Enabled:true};
if(options) {
jQuery.extend(settings, options);
};
var container = jQuery(this);
container.css({"position":"relative"})
.html('<ul class="starsBg"></ul>')
.find('.starsBg').width(settings.MaxStar*settings.StarWidth)
.html('<li class="starsovering" id="starid"></li>');
if(settings.Enabled){
var ListArray = "";
for(k=1;k<settings.MaxStar+1;k++){
ListArray +='<li class="starsON" ></li>';
}
container.find('.starsBg').append(ListArray)
.find('.starsON').hover(
function(){
$("#starid").hide();
$(this).removeClass('starsON').addClass("starsovering");
},
function(){
$(this).removeClass('starsovering').addClass("starsON");
$("#starid").show();
})
.click(function(){
var star_count = settings.MaxStar - $(this).css("z-index")+1;
$("#starid").width(star_count*settings.StarWidth)
//回调函数
if (typeof callback == 'function') {
callback(star_count);
return ;
}
})
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var star = {$vo.star}; $("#star").stars({MaxStar:5,CurrentStar:star,Enabled:true},function(value){
var postStar = value;
$.post("__URL__/starStatus","id="+$(".id").val()+"&star="+postStar,function(date) {
if (date == 1) {
alert("评分成功！");
}else {
alert("评分失败！");
}
});
});
});
</script>
<tr>
<td class="tRight" width="10%">评分:</td>
<td class="tLeft">
<input type="hidden" value="{$id}" class="id">
<div id="star"></div>
</td>
<td>备注：满分5颗星</td>
</tr>
</body>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
