Bootstrap的Color Palette颜色选择器

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);
});

时间: 2024-12-30 18:14:40

Bootstrap的Color Palette颜色选择器的相关文章

仿google adsense颜色选择器代码,从中易广告联盟程序提取[原创]第1/2页_javascript技巧

仿google adsense颜色选择器代码css代码 复制代码 代码如下: <style type="text/css">  BODY {      PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #02418a; PADDING-TOP: 0px; FONT-FAMILY: Arial

使用HTML5技术开发一个属于自己的超酷颜色选择器

可能大家见过很多使用jquery/js开发的颜色选择器,今天这里我们将使用HTML5技术来自己实现一个更棒的颜色选择器.希望大家喜欢!   复制代码 代码如下: <!--preview element --> <div class="preview"></div> <!-- colorpicker element --> <div class="colorpicker" style="display:n

Android中颜色选择器和改变字体颜色的实例教程_Android

1.构建一张七彩图: 我们经常看到这种样子的颜色选择器吧.. 然后其实右边的亮度选择是: 这样我们的代码就可以进行啦...   // 创建七彩图片 private void init() { int[] oc = { 0xffff0000, 0xffffff00, 0xff00ff00, 0xff00ffff, 0xff0000ff, 0xffff00ff, 0xffff0000 }; float[] op = { 0, 0.16667f, 0.33333f, 0.5f, 0.66667f, 0

颜色选择器学习

说是颜色选择器,其实我本来不是用弄这个,只是想搞搞渐变的,但是在网上收集资料的时候感觉好像是一起的所以我就说都一起看看吧 其实说到颜色选择器网上的资料一大把,基本上都是基于android apiDemo做的研究,我也不例外: 代码网上很多我就直接贴了:都有注释: 主要介绍下这个: SweepGradient 颜色渐变方向非环形,而是以某点为圆心呈扇形扫过. SweepGradient的构造函数: public SweepGradient(float cx, float cy, int[] col

js 颜色选择器(兼容firefox)_页面背景

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

5款Javascript颜色选择器_javascript技巧

1. Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. 2. Color Picker Control (演示地址) Yahoo! UI Library中的颜色选择器. 3. jQuery Color Picker 一个简单的颜色选择控件.操作方式与Adobe photoshop中颜色选择操作置. 4. iColorPicker iColorPicker是一个只有6KB大小的

Jquery颜色选择器ColorPicker实现代码_javascript技巧

在CMS中通常都有给标题添加颜色的功能,但一般都比较简单,颜色支持也少,这里我要分享一个自己修改的颜色选择器.界面简洁,功能强大.在我们的日常项目中可以快速的部署. 复制代码 代码如下: $(".colorpicker").colorpicker({ target:'#title', success:function(o,color){ $("#color").val(color) }, reset:function(o){ $("#color"

js实现的简单radio背景颜色选择器代码_javascript技巧

本文实例讲述了js实现的简单radio背景颜色选择器.分享给大家供大家参考.具体如下: 这里演示的js实现radio网页背景颜色选择器,只需点击对应颜色的radio单选框,就可以改变网页的背景颜色,简单方便,实用的javaScript网页特效. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

Web版彷 Visual Studio 2003 颜色选择器_javascript技巧

演示及下载地址:http://www.never-online.net/code/js/color_picker/ 今天整理硬盘的时候发现了几个以前写的和整理的东西,发现几个东西还是不错的. Color Picker本代码为htc,本质上也是JS.代码用到了MS的一些东西, 其中也有tab Dialog(标签页)的代码.而color picker代码则是一个老外写的, 这个颜色选择器效果还是不错的.下面是我以前用文章系统时的截图,整体风格接近于winform,再加上这个color picker,