星星评价
-
JS方法:function InitStar(count, cur, s0, s1, ctn, txt) {
for (var i = 1; i <= count; i++) {
var p = (i <= cur) ? s1 : s0;
$("<img/>").attr({ "src": p, "flag": i }).css("cursor", "pointer")
.mouseover(function () {
var cur = parseInt($(this).attr("flag"));
$("#" + ctn).children().each(function () {
var i = parseInt($(this).attr("flag"));
var p = (i <= cur) ? s1 : s0;
$(this).attr("src", p);
});
showStar(txt, cur);
}).click(function () { //原文博客:blog.csdn.net/bluceyoung
$("#" + ctn).attr("star", $(this).attr("flag"));
}).appendTo($("#" + ctn));
}$("#" + ctn).attr("star", cur).mouseout(function () {
var cur = parseInt($(this).attr("star"));
$(this).children().each(function () {
var p = ($(this).attr("flag") <= cur) ? s1 : s0;
$(this).attr("src", p);
});
showStar(txt, cur);
});
}
function showStar(txt, cur) {
$("#" + txt).val(cur);
$("#" + txt).change();
} - 调用JS方法:
//创建星星
InitStar(5, 3, 'k.gif', 's.gif', 'lblStar1', 'txt1')
//重写评星描述
$("#txt1").change(function () {
var v = $(this).val();
switch (v) {
case "1": v = "太差了"; break;
case "2": v = "有待提高"; break;
case "3": v = "一般"; break;
case "4": v = "不错"; break;
case "5": v = "太棒了"; break;
default: v = "";
}
$(this).val(v);
}); - 页面控件:<label id="lblStar1"></label><input type="text" id="txt1">
- 函数说明:function InitStar(count, cur, s0, s1, ctn, txt) count:星星总数,cur:默认选中星星数,s0:空星星图片路径,s1:实星星图片路径,ctn:创建星星的容器,txt:显示评星描述的textbox