评分插件 jQuery raty的使用
http://www.wbotelhos.com/raty/
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
<script src="js/jquery-1.5.1.js" type="text/javascript"></script>
<script src="js/jquery.raty.js" type="text/javascript"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0; border-style: none;-webkit-tap-highlight-color:rgba(255,255,255,0);}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
p{margin:20px 0 10px 0;}
</style>
</head>
<body class="um-vp bc-bg" ontouchstart>
<div style="width:300px;margin:50px auto">
<p style="font-size:20px">请给出评分</p>
<div id="star"></div>
<div id="result"></div>
<div id="display"></div>
</div>
<p style="font-size:20px">只读评分</p>
<div id="fixed"></div>
<p style="font-size:20px">小数评分(0.25到0.75之间显示一半,其他舍入)</p>
<div id="half"></div>
</body>
<script>
rat("star","result",1);
function rat(star,result,m){
star= '#' + star;
result= '#' + result;
$(result).hide();//将结果DIV隐藏
$(star).raty({
hints: ['1','2', '3', '4', '5','60', '70', '80', '90', '100'],
path: "css/img",
starOff: 'star-off-big.png',
starOn: 'star-on-big.png',
size: 24,
start: 40,
showHalf: true,
target: result,
targetKeep : true,//targetKeep 属性设置为true,用户的选择值才会被保持在目标DIV中,否则只是鼠标悬停时有值,而鼠标离开后这个值就会消失
click: function (score, evt) {
//第一种方式:直接取值
$("#display").html(score)
alert('你的评分是'+score*m+'分');
}
});
}
var test=2;
$('#fixed').raty({
readOnly:true,
path: "css/img",
starOff: 'star-off-big.png',
starOn: 'star-on-big.png',
size: 24,
start: 40,
showHalf: true,
score: test
});
$('#half').raty({
readOnly:true,
path: "css/img",
starOff: 'star-off-big.png',
starOn: 'star-on-big.png',
size: 24,
start: 40,
showHalf: true,
score: 3.56
});
</script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?