星型打分插件 bootstrap-rating-input
最近帮人实现一个打分的功能,发现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的更多相关文章
- Web用户控件开发--星型评分控件
本文中分享一个实现简单,使用方便的星型评分控件. 一:贴几张测试图片先: 二.星型评分控件的实现: RatingBar.ascx: <%@ Control Language="C#&q ...
- js插件---bootstrap插件daterangepicker是什么
js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...
- js插件---Bootstrap 树控件
js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...
- 星型数据仓库olap工具kylin介绍
星型数据仓库olap工具kylin介绍 数据仓库是目前企业级BI分析的重要平台,尤其在互联网公司,每天都会产生数以百G的日志,如何从这些日志中发现数据的规律很重要. 数据仓库是数据分析的重要工具, 每 ...
- 用了星型转换的sql跑了5小时--->5mins的过程
=================START================================ BI数据仓库环境里面跑着一个crontab job,一旦sql运行超过4hours,就会接 ...
- 事务码 ListSchema:查看Cube星型结构Schema
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Fact表的星型结构
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 《BI那点儿事》数据仓库建模:星型模式、雪片模式
数据仓库建模 — 星型模式Example of Star Schema 数据仓库建模 — 雪片模式Example of Snowflake Schema 节省存储空间 一定程度上的范式 星形 vs.雪 ...
- Bootstrap File Input的简单使用
安装引入 使用前需要引入其css和js文件, 注意引入路径的问题 <link rel="stylesheet" href="/__PUB__/fileinput/c ...
随机推荐
- 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 ...
- [IC]Lithograph(1)光刻技术分析与展望
文章主体转载自: 1.zol摩尔定律全靠它 CPU光刻技术分析与展望 2.wiki:Extreme ultraviolet lithography 3.ITRS 2012 1. 光刻技术组成和关键点 ...
- POJ3422 Kaka's Matrix Travels 【费用流】*
POJ3422 Kaka's Matrix Travels Description On an N × N chessboard with a non-negative number in each ...
- BZOJ2705 SDOI2012 Longge的问题 【欧拉函数】
BZOJ2705 SDOI2012 Longge的问题 Description Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, ...
- python笔记-7(shutil/json/pickle/shelve/xml/configparser/hashlib模块)
一.shutil模块--高级的文件.文件夹.压缩包处理模块 1.通过句柄复制内容 shutil.copyfileobj(f1,f2)对文件的复制(通过句柄fdst/fsrc复制文件内容) 源码: Le ...
- Thread和Runable实现多线程
分析两种实现多线程的方式:Thread类和Runnable接口 写一个程序,模拟4个售票窗口共同卖100张火车票的程序. 1:使用继承Thread类方式实现(). 2:使用实现Runnable接口方式 ...
- Sprint第一个冲刺(第八天)
一.Sprint介绍 完善点餐界面,点击进行跳转. 实验截图: 任务进度: 二.Sprint周期 看板: 燃尽图:
- 使用npm link 创建本地模块
1. npm link 介绍 创建一个全局的符号链接,优点是方便我们进行本地node模块的开发调用,和后期发布私服,或者npm 仓库调用是一致的 以下为官方的说明: First, npm link i ...
- vault key 管理工具
Vault is a tool for securely accessing secrets. A secret is anything that you want to tightly contro ...
- 两分钟学会Android平台NDK编程(无须Eclipse和cygwin,可使用命令行打包多个so)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangbin_jxust/article/details/37389383 之前在进行cocos2d ...