插件:
http://www.jq22.com/jquery-info460
网上有很多,基于原生JS和DOM的五星评分案例,今天我们看一个评分插件,基于bootstrap和jquery
css,js文件引入:
star.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<link href="/${base}/css/star/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
<script src="/${base}/js/star/star-rating.js" type="text/javascript"></script>
</head>
</html>
打分页面:
score.html
...
<body>
<!-- 引入css,js->
[#include "../star.html"/]
评分:
<input id="score" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">
<input type="submit" value="评分" class="search_btn" name="submit" onclick="gradeScored()">
<script type="text/javascript">
jQuery(document).ready(function () {
$(".rating-kv").rating();
});
function gradeScored(){
var score = $("#score").val();
//alert(score);
$.post("${base}/test/gradeScore.jspx",{id:id,score:score},
function(data){
alert("评分成功");
},
"html");
}
</script>
</body>
页面如下:
下面所讲的是css和js是经过修改后的,原插件,会贴在附件中
在star-rating.css中
需要注意点
.rating-container {
position: relative;
vertical-align: middle;
display: inline-block;
/*打分容器颜色*/
color: #e3e3e3;
overflow: hidden;
}
.rating-container .rating-stars {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
/* #FFFF00 为打分星星的颜色 */
color: #FFFF00;
transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
}
在star-rating.js中,需要注意的点:
init: function (options) {
var self = this;
self.options = options;
self.initSlider(options);
self.checkDisabled();
$element = self.$element;
self.containerClass = options.containerClass;
self.glyphicon = options.glyphicon;
//默认星星图表,\ue006为方框,\u2605★,
var defaultStar = (self.glyphicon) ? '\ue006' : '\u2605';
...,
renderCaption: function () {
var self = this, val = self.$element.val();
if (!self.showCaption) {
return '';
}
var html = self.fetchCaption(val);
if (!isEmpty(self.$captionElement)) {
self.$captionElement.removeClass('caption').addClass('caption').attr({"title": self.clearCaption});
self.$captionElement.html(html);
return '';
}
//去掉后面的打分信息显示
return ;
//显示打分信息
//return '<div class="caption">' + html + '</div>';
},
//清除打分按钮
//clearButton: '<i class="glyphicon glyphicon-minus-sign"></i>',
//无打分按钮
clearButton: '' ,
...
};
至此五星评分结束;
下面给出插件的应用实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Krajee JQuery Plugins - © Kartik</title>
<link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
<script src="js/star-rating.js" type="text/javascript"></script>
<body>
<h1>Bootstrap Star Rating Example</h1>
<div class="container">
<form>
<input id="input-2b" type="number" class="rating" min="0" max="5" step="0.5" data-size="xl"
data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}">
<br>
<input id="input-21a" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xl" >
<br>
<input id="input-21b" value="3" type="number" class="rating" min=0 max=5 step=0.5 data-size="lg">
<br>
<input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">
<br>
<input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">
<br>
<input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >
<br>
<input id="input-21f" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="md" >
<br>
<input id="input-2ba" type="number" class="rating" min="0" max="5" step="0.5" data-stars=5
data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}">
<br>
<input id="input-22" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-rtl=1 data-container-class='text-right' data-glyphicon=0>
<div class="clearfix"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary" onclick="getScore()">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</form>
<br>
<script>
$(function() {
var score = $("#input-21b").val();
alert(score);
});
function getScore(){
var score = $("#input-21b").val();
alert(score);
}
jQuery(document).ready(function () {
$(".rating-kv").rating();
});
</script>
</div>
</body>
</html>
data-stars为星星的个数,data-size为星星的大小,min=0 max=5 step=0.5,为最小值,最大值,步长;
data-symbol为评分图表,如星星
页面如下:
本年度,最后一片文章,感谢各位陪伴,你们的访问,是对我最大的动力,今天要回家结婚了,来年再战...浪里个浪
- 大小: 7.1 KB
- 大小: 30.6 KB
分享到:
相关推荐
类似淘宝中的 五星级评价。
最近使用了bootstrap提供的星级评价插件:bootstrap-star-rating,很好用的插件
Bootstrap双日历插件使用演示 Bootstrap双日历插件使用演示 Bootstrap双日历插件使用演示 Bootstrap双日历插件使用演示
Bootstrap 响应式jquery星星评分插件,具体用法看说明.txt
插件描述:基于bootstrap的进度插件。参见实例:http://www.jq22.com/jquery-info4654
bootstrap上传下载插件,20190218更新。
bootstrap-table插件包,包括完整的css定义文件,js文件等。
Twitter bootstrap模糊查询插件
bootstrap fileinput完整插件 fileinput.min.css fileinput.min.js zh.js等等
bootstrap垂直时间轴插件,方便好用,操作便捷,值得拥有
主要为大家详细介绍了bootstrap table表格插件使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
插件描述:支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能. 参考示例:http://www.jq22.com/jquery-info5231
主要为大家详细介绍了Bootstrap模态框插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这是个根据bootstrap翻页css样式开发的插件,是写公司业务时自己弄的,样式几乎用的bootstrap原版,配置还算灵活,源代码量少,更改方便,使用时请阅读readme
AxureRP9 Bootstrap4 插件
Bootstrap柱状图插件
bootstrap导出table插件,非常好用
bootstrap分页插件,亲自测过,很实用哟