要用到jquery.js
1、HG.Star.js
/*
author: 蒋与杨
blog : http://www.holygrace.cn
email : young18.j@gmail.com
method:
<span hg="star" val="40"></span>
$("span[hg='star']").Star({
img:["star1.gif","star2.gif","star3.gif","star4.gif"],
enable:false
}
)
img:四种图片路径
enable:是否可以选择;
取值方法为:$("span[hg='star']").attr("val");
*/
jQuery.fn.extend({
Star:function(options){
options = $.extend({
img:["star1.gif","star2.gif","star3.gif","star4.gif"],
enable:false
},options);
function SelectedStar(star,v)
{
if(star.children().length==0)
{
for(var i=1;i<=v;i++)
{
if(i%2==1){star.append("<img src='"+options.img[2]+"' val='"+i+"'/>"); }
else{star.append("<img src='"+options.img[3]+"' val='"+i+"'/>");}
};
for(var i=v+1;i<=10;i++)
{
if(i%2==1){ star.append("<img src='"+options.img[0]+"' val='"+i+"'/>");}
else{star.append("<img src='"+options.img[1]+"' val='"+i+"'/>");}
}
}
else
{
for(var i=1;i<=v;i++)
{
if(i%2==1){ $(star.children()[i-1]).attr("src",options.img[2]);}
else{$(star.children()[i-1]).attr("src",options.img[3]);}
};
for(var i=v+1;i<=10;i++)
{
if(i%2==1){$(star.children()[i-1]).attr("src",options.img[0]);}
else{$(star.children()[i-1]).attr("src",options.img[1]);}
}
}
};
return this.each(function(){
var star=$(this);
var starLevel=$.ToInt(star.attr("val")/10);
var i=1;
SelectedStar(star,starLevel);
if(options.enable)
{
var starImg = star.children();
starImg.mouseover(function(){
var selectVal=$.ToInt($(this).attr("val"));
SelectedStar(star,selectVal);
});
starImg.mouseout(function(){
SelectedStar(star,$.ToInt(star.attr("val")/10));
});
starImg.click(function(){
var selectVal=$.ToInt($(this).attr("val"));
SelectedStar(star,selectVal);
star.attr("val",selectVal*10);
})
}
})
}
})
2、HG.Core.js
jQuery.extend({
IsNoE:function(v){return v==null||v=="";},
ToInt:function(v){return parseInt(v);},
ToFloat:function(v){return parseFloat(v);},
Id:function(v){document.getElementById(v);}
});
3、 引用js
<script type="text/javascript" language="javascript" src="js/uncompressed/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/uncompressed/HG.Core.js"></script>
<script type="text/javascript" language="javascript" src="js/uncompressed/HG.Star.js"></script>
4、编写Html
<span id="star" val="70"></span>
这里是一个存放星控件的容器,一个特殊的地方是将该容器标签加入了一个"val"属性,HG.Star的等级为10级, 每级别的值为10,该"val"的值为确定HG.Star的初始显示值。例如val="70",则此时HG.Star有3.5颗星显示为选中状态。
5 、编写js代码
var images=["images/star/star1.gif",
"images/star/star2.gif",
"images/star/star3.gif",
"images/star/star4.gif"];
$("#star").Star({
img:images,
enable:true
});
6、 取值
$("#star").attr("val");
引用链接: http://www.cnblogs.com/young18/archive/2007/09/23/903316.html
例子 DEMO