当前位置:JS特效 » 评分星级 » jQuery星级评分插件RatingStars
 jQuery星级评分插件RatingStars
如果您觉得内容不错,请分享:

插件介绍

RatingStars是一款jQuery星级评分插件。该jQuery星级评分插件体积小,速度快。你还可以自定义星星的图案和效果。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:101
简要教程

RatingStars是一款jQuery星级评分插件。该jQuery星级评分插件体积小,速度快。你还可以自定义星星的图案和效果。

使用方法

在页面中引入jQuery和jquery.rating-stars.js、font-awsome.css文件。


                    
                    
                
HTML结构

通过font-awsome字体图标来构建星星,基本的HTML结构如下:

初始化插件

在页面DOM元素加载完毕之后,通过ratingStars()方法来初始化该jquery星级评分插件。

$(".rating-stars").ratingStars();
                

事件

1、选择星星的事件。

$(".rating-stars").ratingStars(ratingOptions);

$(".rating-stars").on("ratingChanged", function (ev, data) {
    // dome something
});
                

返回的data对象结构如下:

{
    ratingValue: 4
}
                

2、鼠标hover星星事件。

$(".rating-stars").ratingStars(ratingOptions);

$(".rating-stars").on("ratingOnEnter", function (ev, data) {
    // dome something
});
                

返回的data对象结构如下:

{
    ratingValue: 4
}
                

3、鼠标离开星星时触发的事件。

$(".rating-stars").ratingStars(ratingOptions);

$(".rating-stars").on("ratingOnLeave", function (ev, data) {
    // dome something
});
                

返回的data对象结构如下:

{
    ratingValue: 4
}
                

该jQuery星级评分插件的github地址为:https://github.com/lk-code/jquery-rating-stars

Top