azhai

转发一个星级控件

要用到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



posted on 2007-09-23 17:23 azhai 阅读(734) 评论(1)  编辑 收藏 引用 网摘

Feedback

# re: 转发一个星级控件 2007-11-12 12:18 <a href=http://minidx.com>minidxer</a>

比较傻的问题,星级控件是什么?  回复  更多评论   



只有注册用户登录后才能发表评论。
网站导航: