zoukankan      html  css  js  c++  java
  • 星型打分插件 bootstrap-rating-input

    最近帮人实现一个打分的功能,发现bootstrap-rating-input是个简单又好用的星型打分,我对其做了些定制,添加了分值说明,并修改了样式,毕竟 bootstrap 自身的黑色五角星还是不够好看。

    效果是这样的

    打分

    样式的修改主要是将原版的 bootstrap-rating-input.js 中的样式 glyphicon-star-empty 和 glyphicon-star 分别修改为 empty-star 和 full-star,只要修改这两个就可以自定义了。

    以下是样式

    /*空心五星*/
    .empty-star {
        overflow: hidden;  19px; height: 19px; 
        background-image: url(empty_star.png);
        display: inline-block;
        line-height: inherit;
        vertical-align: top;
        margin-top: 2px;
    }
    
    /*实心五星*/
    .full-star {
        overflow: hidden;  19px; height: 19px;
        background-image: url(full_star.png); 
        display: inline-block;
        vertical-align: top;
        margin-top: 2px;
    }
    /*分值说明*/
    .rating-caption {
        margin-left: 10px;
        line-height: 25px;
         50px;
        display: inline-block;
        color: #EB6425;
        font-size: 16px;
        font-weight: 800;
    }
    

    使用方法
    跟原版一样,就是多了个 data-caption="['很差', '较差', '还行', '推荐', '力荐']"

    <input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-caption="['很差', '较差', '还行', '推荐', '力荐']" value="" data-min="1" data-max="5" />
    

    完整的代码在这里

  • 相关阅读:
    BZOJ4346 : [POI2016]Nadajniki
    BZOJ4345 : [POI2016]Korale
    BZOJ4134 : ljw和lzr的hack比赛
    BZOJ4342 : CF348 Pilgrims
    BZOJ2310 : ParkII
    BZOJ3322 : [Scoi2013]摩托车交易
    BZOJ1444 : [Jsoi2009]有趣的游戏
    Xcode8中处理打印日志的配置
    iOS开发之记录用户登录状态
    热修复
  • 原文地址:https://www.cnblogs.com/restran/p/3897411.html
Copyright © 2011-2022 走看看