45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:如何能够在基于jQuery的基础上实现美观星级评论打分组件代码?

如何能够在基于jQuery的基础上实现美观星级评论打分组件代码?

2016-03-05 14:34:17 来源:www.45fan.com 【

如何能够在基于jQuery的基础上实现美观星级评论打分组件代码?

本文实例讲述了基于jQuery实现的美观星级评论打分组件代码。分享给大家供大家参考,具体如下:

这款jquery星级评论打分组件,是通用打分组件,callBack打分后执行的回调,this.Index:获取当前选中值。

运行效果截图如下:

如何能够在基于jQuery的基础上实现美观星级评论打分组件代码?

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-rate-dfzj-codes/

具体代码如下:

<!DOCTYPE HTML>
<html> 
<head> 
<meta charset="utf-8">
<title>jquery星级评论打分组件</title> 
<script src="jquery-1.6.2.min.js"></script>
<script> 
var pRate = function(box,callBack){
 this.Index = null;
 var B = $("#"+box),
 rate = B.children("i"),
 w = rate.width(),
 n = rate.length,
 me = this;
 for(var i=0;i<n;i++){
 rate.eq(i).css({
  'width':w*(i+1),
  'z-index':n-i
 });
 } 
 rate.hover(function(){
 var S = B.children("i.select");
 $(this).addClass("hover").siblings().removeClass("hover");
 if($(this).index()>S.index()){
  S.addClass("hover");
 }
 },function(){
 rate.removeClass("hover");
 })
 rate.click(function(){
 rate.removeClass("select hover");
 $(this).addClass("select");
 me.Index = $(this).index() + 1;
 if(callBack){callBack();}
 })
}
</script>
<style type="text/css"> 
h1{font:26px/3 'microsoft yahei','simhei';color:#000;text-indent:2em;text-shadow:1px 1px 2px #ccc} 
.p_rate{height:14px;position:relative;width:80px;overflow:hidden;display:inline-block;background:url(images/rate.png) repeat-x;margin:40px 100px}
.p_rate i{position:absolute;top:0;left:0;cursor:pointer;height:14px;width:16px;background:url(images/rate.png) repeat-x 0 -500px}
.p_rate .select{background-position:0 -32px}
.p_rate .hover{background-position:0 -16px}
</style>
</head> 
<body>
<h1>jquery星级评论打分组件</h1> 
 <span class="p_rate" id="p_rate">
 <i title="1分"></i> 
 <i title="2分"></i> 
 <i title="3分"></i> 
 <i title="4分"></i> 
 <i title="5分"></i> 
</span>
<script> 
var Rate = new pRate("p_rate",function(){
alert(Rate.Index+'分')
});
</script>
</body> 
</html>

希望本文所述对大家jQuery程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/41354.html
Tags: 实现 jquery 基于
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部