BootStrap五星评分插件使用详解

Donald_Draper

浏览: 972056 次

最近访客更多访客>>

lyndon.lin

yyltty

pengranxiang

qinjingkai

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

html bootstrap jquery

插件：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 - &copy; 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="&#xe005;" 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="&#xe005;" 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为评分图表，如星星
页面如下：