jQuery星级评分插件RatingStars

所属分类:输入-投票率

 27214  329  查看评论 (3)
分享到微信朋友圈
X
jQuery星级评分插件RatingStars ie兼容8

jQuery RatingStars

一个简单但功能强大的jQuery插件,用于评级星级。

使用方法

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

<link rel="stylesheet" href="css/font-awsome.min.css">
<script type="text/javascript" src="jquery.min.js"></script>                    
<script type="text/javascript" src="rating-stars.js"></script>

HTML结构

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

<div class="rating-stars block" id="another-rating">
    <input type="hidden" class="rating-value" name="stars-value" id="stars-value" value="2">
    <!-- set the input-value to set the default value -->
    <div class="rating-stars-container">
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
    </div>
</div>

初始化插件

在页面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
}
相关插件-投票率

星号满意度打分评价效果

星号满意度打分评价效果
  投票率
 38130  339

jQuery实现淘宝打星评价

jQuery实现淘宝打星评价直接引用即可
  投票率
 38714  347

jquery打分评星级效果

jquery打分评星级效果
  投票率
 34231  387

jQuery五角星评分

鼠标移上去能显示评分,代码简单13行搞定。
  投票率
 33289  303

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ―ㄋ才过1/3人生?の 0
    2019/8/4 10:34:57
    谢谢楼主免费分享 回复
    一朵悠哉悠哉的小花 0
    2019/1/28 14:47:32
    怎么做半颗星呢 回复
    qzuser 0
    2018/12/27 16:56:06
    是否支持移动端 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复