bootstrap-star-rating 星形评分插件的使用

最新推荐文章于 2022-05-05 18:55:34 发布

ayinvany

最新推荐文章于 2022-05-05 18:55:34 发布

阅读量1.1w

点赞数 6

文章标签：星形评分实现

本文链接：https://blog.csdn.net/ayinvany/article/details/51506324

版权

星形评分一般在购物网站上很常见，使用bootstap-star-rating很容易实现这个功能，实现效果如图所示：

这里写图片描述

实现方法特别简单，源代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="css/bootstrap.css" rel="stylesheet"  />
        <link href="css/star-rating.css" media="all" rel="stylesheet"  />
        <script src="js/jquery-2.2.3.min.js"></script>
        <script src="js/star-rating.js" type="text/javascript"></script>
        <style type="text/css">
            form{
                margin: 50px auto;
                width: 50%;
                height: auto;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#comment").rating();           
            });
        </script>
    </head>
    <body>

        <form>
            <label for="comment">评分</label>
            <input id="comment" name="comment" class="rating"  min="0" max="5" step="1" data-size="sm" value="2" >

        </form>
    </body>
</html>

这里我用的本地下载jquery bootstrap等文件，大家也可以用如下链接代替上面的代码：

详细步骤：

使用input标签，type属性为number ，为其增添rating类，min 和 max分别代表星星的最大最小数值，step表示增加减少的数量，value为其当前星星的数量，data-size可以设置星星的大小，有lg,sm,xl,xs；data-stars设置星星的数量，这些可以直接在input属性中设置，也可以通过jquery进行设置，如下所示：

 $('#comment').rating({
              min: 0,
              max: 5,
              step: 1,
              size: 'lg',
              showClear: false
   });

特别注意：
此时需要在文件中添加bootstrap 的字体，要不然是出现不了如上的效果的哦！不会上传文件，自己搜一下吧！
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
这个方法是看别人的，不要介意！

ayinvany

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
bootstrap-star-rating 星形评分插件的使用

星形评分一般在购物网站上很常见，使用bootstap-star-rating很容易实现这个功能，实现效果如图所示：实现方法特别简单，源代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link href="css/bootstrap.css"
复制链接

扫一扫