至顶网›软件频道 ›应用软件›Jquery 评星效果Rating精华版

Jquery 评星效果Rating精华版

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

Jquery 评星效果Rating精华版，参数说明： count:星星总数，cur：默认选中第几颗，s0:空星星的图片路径，s1：实星星的图片路径，ctn：创建星星的容器，txt：显示评星描述的textbox。

来源：中国IT实验室 2013年3月5日

关键字： Jquery

实现功能：

同一页面可以使用多个评星，相互不干扰

星星数量可自定义

可设置默认的星级

在选择星级之后，仍有悬停效果

可自定义评星描述

rating.js代码：

[javascript]

function InitStar（count,cur,s0,s1,ctn,txt）{

$（"#"+ctn）。attr（"star",cur）；

for（var i=1;i<=count;i++）{

var p=（i<=cur）？s1:s0;

$（"<img/>"）。addClass（"star"）。css（"cursor","pointer"）。attr（{"src":p,"flag":i}）。appendTo（$（"#"+ctn））；

}

$（"img.star"）。mouseover（function（）{

var cur=parseInt（$（this）。attr（"flag"））；

$（"img.star"）。each（function（）{

var i=parseInt（$（this）。attr（"flag"））；

var p=（i<=cur）？s1:s0;

$（this）。attr（"src",p）；

}）；

showStar（txt,cur）；

}）；

$（"img.star"）。click（function（）{

$（"#"+ctn）。attr（"star",$（this）。attr（"flag"））；

}）；

$（"#"+ctn）。mouseout（function（）{

var cur=parseInt（$（this）。attr（"star"））；

$（"img.star"）。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（）；

}

参数说明：

count:星星总数

cur：默认选中第几颗

s0:空星星的图片路径

s1：实星星的图片路径

ctn：创建星星的容器

txt：显示评星描述的textbox

页面代码：

[html]

<html>

</script>

$（document）。ready（function（）{

//创建星星

InitStar（5,3,'k.gif','s.gif','lblStar1','txt'）

//重写评星描述

$（"#txt"）。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）；

}）；

</script>

<body>

<br>

</body>

</html>

默认在评星描述的textbox里显示的只是评星的等级数，若想自定义评级描述，则加一个change事件，在里面替换值即可

VIP专区

VIP用户

普通用户

邮件订阅

如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

重磅专题

往期文章

Jquery 评星效果Rating精华版

业界热点: