/**
* 星星打分组件
*
* @author Yunsd
* @date 2010-7-5
*/
var Stars = Class.create();
Stars.prototype = {
initialize: function(star,options) {
this.SetOptions(options); //默认属性
var flag = 999; //定义全局指针
var isIE = (document.all) ? true : false; //IE?
var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表
var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果
var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示
var nowClass = " " + this.options.nowClass; // 定义选中星星样式名
var tipsTxt = this.options.tipsTxt; // 定义提示文案
var len = starlist.length; //星星数量
for(i=0;i<len;i++){ // 绑定事件 点击 鼠标滑过
starlist[i].value = i;
starlist[i].onclick = function(e){
stopDefault(e);
this.className = this.className + nowClass;
flag = this.value;
input.value = this.getAttribute("star:value");
tips.innerHTML = tipsTxt[this.value]
}
starlist[i].onmouseover = function(){
if (flag< 999){
var reg = RegExp(nowClass,"g");
starlist[flag].className = starlist[flag].className.replace(reg,"")
}
}
starlist[i].onmouseout = function(){
if (flag< 999){
starlist[flag].className = starlist[flag].className + nowClass;
}
}
};
if (isIE){ //FIX IE下样式错误
var li = document.getElementById(star).getElementsByTagName('li');
for (var i = 0, len = li.length; i < len; i++) {
var c = li[i];
if (c) {
c.className = c.getElementsByTagName('a')[0].className;
}
}
}
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Input: "",//设置触保存分数的INPUT
Tips: "",//设置提示文案容器
nowClass: "current-rating",//选中的样式名
tipsTxt: ["1分-严重不合格","2分-不合格","3分-合格","4分-优秀","5分-完美"]//提示文案
};
Extend(this.options, options || {});
}
}
/* For TEST */
function teststars(){
alert(document.getElementById("stars1-input").value + "|" + document.getElementById("stars2-input").value)
}
var Stars1 = new Stars("stars1",{nowClass:"current-rating",tipsTxt:["100分-严重不合格","200分-不合格","300分-合格","400分-优秀","500分-完美"]})
var Stars2 = new Stars("stars2")
</script>
</body>
</html>
- 大小: 1.8 KB
分享到:
相关推荐
wpf实现简单的星级评分
jQuery+PHP实现星级评分代码 星级评分效果,让用户可以对正在浏览的文章、电影、资源等进行评分,让网站增添了几分互动效果。本文将讲解如何使用jQuery和PHP来实现星级评分效果
这款php+mysql星星评分效果我本人用了非长好,而且代码修改成非常简单,任何垃圾多余代码都去掉,下载后可以直接使用,如果你本人有更高的水平也可以在上面修改,希望有兴趣的朋友可以下载,或者收藏以后备用,谢谢!
js评分效果 星级评分 js星级评分效果
javascript+html星级评分(支持半星),通过一个下拉选择框控制星星的多少。
web端星星评分,封装了js代码,可重复利用。没有html和css,需要自己写
jQuery星星评分插件鼠标滑动星星打分代码jQuery星星评分插件鼠标滑动星星打分代码
Android星星评分控件SimpleRatingBar的使用(可点击和滑动星星)
原生js星星评分
PHP+AJAX,星级评分,百度文库评分,评分 评分原代码
jq星星评分打分
jQuery星级评分插件。该jQuery星级评分插件体积小,速度快。你还可以自定义星星的图案和效果。
很好的实现星星点击打分。星星的数量可以自己添加或减少。
收集8个星星评分源码 收集8个星星评分源码
php评分星星代码全php评分星星代码全php评分星星代码全php评分星星代码全php评分星星代码全
星星评分效果。鼠标滑过星星变色,点击时评分成功。
jquery做的星级评分可以利用AJAX来操作, jquery AJAX 星级 评分
Raty这是一个能够自动生成可定制的星级评分jQuery插件。可以自定义图标,创建各种评级组合,星星数量,每一颗星星的注释,可以在当一个星星被点击时的加回调函数。
JS星级评分系统 非常好用 用于开发商城项目
通过点击星星来评价,模仿淘宝的宝贝评价。