星型打分插件 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 ...
随机推荐
- 获取SQL Server数据库表的列名
SELECT syscolumns.name,systypes.name,syscolumns.isnullable,syscolumns.length FROM syscolumns, systyp ...
- Percona 工具 pt-query-digest的使用
pt-query-digest说明 pt-query-digest 用来格式化分析MySQL产生的日志,如:慢查询日志.二进制日志.通用日志,根据不同的条件进行分析并生成报告. pt-query-di ...
- BZOJ1345 Baltic2007 序列问题Sequence 【思维题】*
BZOJ1345 Baltic2007 序列问题Sequence Description 对于一个给定的序列a1,…,an,我们对它进行一个操作reduce(i),该操作将数列中的元素ai和ai+1用 ...
- BZOJ2821 作诗(Poetize) 【分块】
BZOJ2821 作诗(Poetize) Description 神犇SJY虐完HEOI之后给傻×LYD出了一题: SHY是T国的公主,平时的一大爱好是作诗. 由于时间紧迫,SHY作完诗之后还要虐OI ...
- idea 创建Java WEB 项目
第一步 FILE - New Project 写上名字,然后 点 Finish 这里特别注意,不懂路径 那么 就点上 inherit 再点下面 让他默认 加载你的 web 路径 选择 Jar包 , ...
- Making Genome in Berland (DFS+思维)
个人心得:被这周的专题名坑了,一直用字典树,明明题目看得很清楚了,不存在相同的字母,即每个字母最多只有一个直接后驱,那么只要用DFS走开头就好了, 思想很巧妙,用vector,记录后驱,同时用visi ...
- Ambari HDP集群搭建文档
一.配置主机和节点机器之间SSH无密登录 多台外网服务器配置时,需要在/etc/hosts中把本机的IP地址设置为内网IP地址 http://2d67df38.wiz02.com/share/s/0J ...
- python string 之 format, join, split
功能太强大. 经常看到很多简洁, 高级的用法. 但是基本思路是{}代替了以前的%. In [1]: '{0},{1}'.format('kzc',18) Out[1]: 'kzc,18' In [2] ...
- ORM 查询
ORM版学员管理系统 班级表 表结构 class Class(models.Model): id = models.AutoField(primary_key=True) # 主键 cname = m ...
- Java 实现 RSA 非对称加密
非对称加密算法:用两个密钥(公钥/私钥)对数据进行加密和解密. 一.原理 非对称加密算法实现机密信息交换的基本过程是: 1)甲方生成一对密钥并将其中的一把作为公用密钥向其它方公开; 2)得到该公用密钥 ...