下面是一个使用jQuery五角星评分插件的简单示例。这个示例假设我们使用的是一个流行的jQuery评分插件,如`jquery-star-rating-plugin`(注意,这里是一个假设的插件名,实际使用时请替换为具体的插件名)。
首先,确保你的HTML文件中已经引入了jQuery库和评分插件的CSS及JS文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 五角星评分插件示例</title>
<!-- 引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入评分插件的CSS和JS(这里以假设的路径为例) -->
<link rel="stylesheet" href="path/to/star-rating-plugin.css">
<script src="path/to/star-rating-plugin.js"></script>
</head>
<body>
<div id="star-rating"></div>
<script>
$(document).ready(function() {
// 初始化评分插件
$('#star-rating').rating({
min: 0, // 最小分数
max: 5, // 最大分数
step: 1, // 步长
size: 'lg', // 星星大小
showClear: false, // 是否显示清除按钮
showCaption: true, // 是否显示选中的分数值
stars: 5, // 星星数量
// 其他配置...
// 监听评分变化
onRate: function(value, caption, event) {
console.log('您选择的分数是:', value);
}
});
});
</script>
</body>
</html>
在上述示例中,我们首先在HTML的`
`部分引入了jQuery库和评分插件的CSS及JS文件。然后,在``部分,我们定义了一个`div`元素,其ID为`star-rating`,这将作为评分插件的容器。在`