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

效果是这样的

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

以下是样式

/*空心五星*/
.empty-star {
overflow: hidden; width: 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; width: 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;
width: 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" />

完整的代码在这里

星型打分插件 bootstrap-rating-input的更多相关文章

  1. Web用户控件开发--星型评分控件

    本文中分享一个实现简单,使用方便的星型评分控件. 一:贴几张测试图片先: 二.星型评分控件的实现: RatingBar.ascx: <%@ Control Language="C#&q ...

  2. js插件---bootstrap插件daterangepicker是什么

    js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...

  3. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  4. 星型数据仓库olap工具kylin介绍

    星型数据仓库olap工具kylin介绍 数据仓库是目前企业级BI分析的重要平台,尤其在互联网公司,每天都会产生数以百G的日志,如何从这些日志中发现数据的规律很重要. 数据仓库是数据分析的重要工具, 每 ...

  5. 用了星型转换的sql跑了5小时--->5mins的过程

    =================START================================ BI数据仓库环境里面跑着一个crontab job,一旦sql运行超过4hours,就会接 ...

  6. 事务码 ListSchema:查看Cube星型结构Schema

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. Fact表的星型结构

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. 《BI那点儿事》数据仓库建模:星型模式、雪片模式

    数据仓库建模 — 星型模式Example of Star Schema 数据仓库建模 — 雪片模式Example of Snowflake Schema 节省存储空间 一定程度上的范式 星形 vs.雪 ...

  9. Bootstrap File Input的简单使用

    安装引入 使用前需要引入其css和js文件, 注意引入路径的问题 <link rel="stylesheet" href="/__PUB__/fileinput/c ...

随机推荐

  1. Xcode5.1.1支持低版本和image not found和Couldn't register XXXX with the bootstrap server. Error: unknown error code.

    一:问题  targets中证书的设置 1.项目支持多设备(Xcode5.1.1支持低版本) 2.真机测试要确保Code Siging 设置没问题 支持的最低版本 二 :问题:image  not f ...

  2. [IC]Lithograph(1)光刻技术分析与展望

    文章主体转载自: 1.zol摩尔定律全靠它 CPU光刻技术分析与展望 2.wiki:Extreme ultraviolet lithography 3.ITRS 2012 1. 光刻技术组成和关键点 ...

  3. POJ3422 Kaka's Matrix Travels 【费用流】*

    POJ3422 Kaka's Matrix Travels Description On an N × N chessboard with a non-negative number in each ...

  4. BZOJ2705 SDOI2012 Longge的问题 【欧拉函数】

    BZOJ2705 SDOI2012 Longge的问题 Description Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, ...

  5. python笔记-7(shutil/json/pickle/shelve/xml/configparser/hashlib模块)

    一.shutil模块--高级的文件.文件夹.压缩包处理模块 1.通过句柄复制内容 shutil.copyfileobj(f1,f2)对文件的复制(通过句柄fdst/fsrc复制文件内容) 源码: Le ...

  6. Thread和Runable实现多线程

    分析两种实现多线程的方式:Thread类和Runnable接口 写一个程序,模拟4个售票窗口共同卖100张火车票的程序. 1:使用继承Thread类方式实现(). 2:使用实现Runnable接口方式 ...

  7. Sprint第一个冲刺(第八天)

    一.Sprint介绍 完善点餐界面,点击进行跳转. 实验截图: 任务进度: 二.Sprint周期 看板: 燃尽图:

  8. 使用npm link 创建本地模块

    1. npm link 介绍 创建一个全局的符号链接,优点是方便我们进行本地node模块的开发调用,和后期发布私服,或者npm 仓库调用是一致的 以下为官方的说明: First, npm link i ...

  9. vault key 管理工具

    Vault is a tool for securely accessing secrets. A secret is anything that you want to tightly contro ...

  10. 两分钟学会Android平台NDK编程(无须Eclipse和cygwin,可使用命令行打包多个so)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangbin_jxust/article/details/37389383 之前在进行cocos2d ...