jQuery评分插件 星星和心型两种外观

2020-01-16 11:06:00 其它

该评分插件不仅提供各种尺寸的评分按钮,而且评分按钮还提供星星和心型两种外观。
在评分过程中,可以实时显示当前你评的分数,你也可以点击左侧的减号来取消当前的评分。

使用方法:
头部引入代码

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>

<link href="css/star-rating.css" rel="stylesheet"/>
<script src="js/star-rating.js" type="text/javascript"></script>

默认

调用HTML
给input添加rating类时,自动变成评分插件

<input  value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xl" >

自定义

调用HTML

<input value="0" type="number" class="rating-ts" >

调用js

jQuery(document).ready(function () {
    $(".rating-ts").rating({
        stars: 5,// 数量
        glyphicon: true,
        symbol: null,
        disabled: false,
        readonly: false,
        rtl: false,
        size: 'md',// 尺寸
        showClear: true,
        showCaption: true,
        defaultCaption: '{rating} 星',
        starCaptions: {
            0.5: '半星',
            1: '一星',
            1.5: '一星半',
            2: '两星',
            2.5: '两星半',
            3: '三星',
            3.5: '三星半',
            4: '四星',
            4.5: '四星半',
            5: '五星'
        },

        starCaptionClasses: {
            0.5: 'label label-danger',
            1: 'label label-danger',
            1.5: 'label label-warning',
            2: 'label label-warning',
            2.5: 'label label-info',
            3: 'label label-info',
            3.5: 'label label-primary',
            4: 'label label-primary',
            4.5: 'label label-success',
            5: 'label label-success'
        },
        clearButton: '<i class="glyphicon glyphicon-minus-sign"></i>',
        clearButtonTitle: '清空',
        clearButtonBaseClass: 'clear-rating',
        clearButtonActiveClass: 'clear-rating-active',
        clearCaption: '无评分',
        clearCaptionClass: 'label label-default',
        clearValue: 0,
        captionElement: null,
        clearElement: null,
        containerClass: null
    });
});

评论