A-A+

Bootstrap的Color Palette颜色选择器

2016年01月11日 web前端设计 暂无评论 阅读 9 views 次

Bootstrap是一款和jquery有点像的插件了,它也是美国一家大公司出的,下面我们来看利用Bootstrap Color Palette实现一个颜色选择器效果了,具体如下。

Color Palette是一个颜色选择器,基于Bootstrap前端开发框架,适用于Bootstrap 2.3.2+以上的版本,依赖于jQuery插件库,支持自定义配置预设的颜色,轻量级的颜色选择jQuery插件。

Color Palette基于Bootstrap的颜色选择器.

依赖关系

Bootstrap 2.3.2+

jQuery 1.8.1+

安装方法:

如果你习惯使用Git,你可以使用下面的命令获取到插件的文件:

git https://github.com/extremeFE/bootstrap-colorpalette.git

如果你不知道Git是个什么鬼,那么你可以到插件的Github地址下载得到插件的源文件。

使用方法:

接下来我们为大家介绍如何使用这个插件。

1、引入插件

  1. <link rel="stylesheet" type="text/css" media="all" href="bootstrap.min.css" />  
  2. <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-colorpalette.css" />  
  3. <script type="text/javascript" src="jquery.min.js" charset="utf-8"></script>  
  4. <script type="text/javascript" src="bootstrap.min.js" charset="utf-8"></script>  
  5. <script type="text/javascript" src="js/bootstrap-colorpalette.js" charset="utf-8"></script>  

2、编写一点HTML代码,用于用户选择和操作Color Palette颜色选择插件。

  1. <div class="btn-group">  
  2.   <input id="selected-color1">  
  3.   <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Color</a>  
  4.   <ul class="dropdown-menu">  
  5.     <li><div id="colorpalette1"></div></li>  
  6.   </ul>  
  7. </div>  

3、最后初始化Color Palette颜色选择插件

  1. $('#colorpalette1').colorPalette()  
  2.   .on('selectColor', function(e) {  
  3.     $('#selected-color1').val(e.color);  
  4. });  

编辑器文字背景和颜色按钮.

上面的代码中,我们介绍了基本的使用方法,但是可能有的用户有更多的需求,比如实现类似编辑的中的文字样式编辑按钮的样子,使用Color Palette一样能达到这个效果,请看下面的代码。

  1. <div class="btn-group">  
  2.   <a id="selected-color2" class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><i>A</i></a>  
  3.   <ul class="dropdown-menu" style="width:293px;">  
  4.     <li style="display:inline-block;">  
  5.       <div> font color</div>  
  6.       <div id="colorpalette2"></div>  
  7.     </li>  
  8.     <li style="display:inline-block;">  
  9.       <div> background color</div>  
  10.       <div id="colorpalette3"></div>  
  11.     </li>  
  12.   </ul>  
  13. </div>  

初始化插件:

  1. $('#colorpalette2').colorPalette()  
  2.   .on('selectColor', function(e) {  
  3.     $('#selected-color2 i').css('color', e.color);  
  4. });  
  5. $('#colorpalette3').colorPalette()  
  6.   .on('selectColor', function(e) {  
  7.     $('#selected-color2 i').css('background-color', e.color);  
  8. });  

原理就是创建两个颜色选择控件,然后一个定义为文字的显示颜色,一个定义为文字的背景颜色,当用户选的颜色以后,使用jQuery给对应文字设置样式。

自定义预设颜色:

我们还可以预设几种颜色,让我们只能选择我们预设的颜色值,这样就能更好的控制用户的行为。

编写颜色选择HTML代码

  1. <input id="selected-color3">  
  2. <div id="colorpalette4"></div>  

通过自定义一个option的变量,变量的值为颜色组合成的一个数组

  1. var options = {  
  2.   colors:[['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#EFF7F7', '#FFFFFF']]  
  3. }  

最后在初始化插件的时候,调用这个变量

  1. $('#colorpalette4').colorPalette(options)  
  2.   .on('selectColor', function(e) {  
  3.     $('#selected-color3').val(e.color);  
  4. });  
标签:

给我留言