Color Palette是一个颜色选择器,基于Bootstrap前端开发框架,适用于Bootstrap 2.3.2+以上的版本,依赖于jQuery插件库,支持自定义配置预设的颜色,轻量级的颜色选择jQuery插件。
依赖关系
Bootstrap 2.3.2+
jQuery 1.8.1+
安装方法
如果你习惯使用Git,你可以使用下面的命令获取到插件的文件:
git https://github.com/extremeFE/bootstrap-colorpalette.git
如果你不知道Git是个什么鬼,那么你可以到插件的Github地址下载得到插件的源文件。
使用方法
接下来我们为大家介绍如何使用这个插件。
1、引入插件
<link rel="stylesheet" type="text/css" media="all" href="bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-colorpalette.css" />
<script type="text/javascript" src="jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/bootstrap-colorpalette.js" charset="utf-8"></script>
2、编写一点HTML代码,用于用户选择和操作Color Palette颜色选择插件。
<div class="btn-group">
<input id="selected-color1">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Color</a>
<ul class="dropdown-menu">
<li><div id="colorpalette1"></div></li>
</ul>
</div>
3、最后初始化Color Palette颜色选择插件
$('#colorpalette1').colorPalette()
.on('selectColor', function(e) {
$('#selected-color1').val(e.color);
});
编辑器文字背景和颜色按钮
上面的代码中,我们介绍了基本的使用方法,但是可能有的用户有更多的需求,比如实现类似编辑的中的文字样式编辑按钮的样子,使用Color Palette一样能达到这个效果,请看下面的代码。
<div class="btn-group">
<a id="selected-color2" class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><i>A</i></a>
<ul class="dropdown-menu" style="width:293px;">
<li style="display:inline-block;">
<div> font color</div>
<div id="colorpalette2"></div>
</li>
<li style="display:inline-block;">
<div> background color</div>
<div id="colorpalette3"></div>
</li>
</ul>
</div>
初始化插件
$('#colorpalette2').colorPalette()
.on('selectColor', function(e) {
$('#selected-color2 i').css('color', e.color);
});
$('#colorpalette3').colorPalette()
.on('selectColor', function(e) {
$('#selected-color2 i').css('background-color', e.color);
});
原理就是创建两个颜色选择控件,然后一个定义为文字的显示颜色,一个定义为文字的背景颜色,当用户选的颜色以后,使用jQuery给对应文字设置样式。
自定义预设颜色
我们还可以预设几种颜色,让我们只能选择我们预设的颜色值,这样就能更好的控制用户的行为。
编写颜色选择HTML代码
<input id="selected-color3">
<div id="colorpalette4"></div>
通过自定义一个option的变量,变量的值为颜色组合成的一个数组
var options = {
colors:[['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#EFF7F7', '#FFFFFF']]
}
最后在初始化插件的时候,调用这个变量
$('#colorpalette4').colorPalette(options)
.on('selectColor', function(e) {
$('#selected-color3').val(e.color);
});