Bootstrap color palette Colour Selector

Colour palette is a color selector, based on the bootstrap front-end development framework, suitable for bootstrap 2.3.2+ above version, relies on the jquery plug-in library, supports custom configuration preset colors, and lightweight color selection jquery plug-ins.

Dependency relationships
Bootstrap 2.3.2+
JQuery 1.8.1+
Installation method
If you are accustomed to using git, you can use the following command to obtain the plugin file:

Git https://github.com/extremeFE/bootstrap-colorpalette.git
If you don't know what a git is, then you can download the plugin's source file to the plugin's GitHub address.

How to use
Next we'll show you how to use this plugin.

1, the introduction of Plug-ins

<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, write a little HTML code, for users to select and manipulate color palette colors Select Plug-ins.

<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. Finally Initialize color palette colour selection Plugin

$ (' #colorpalette1 '). ColorPalette ()
. On (' Selectcolor ', function (e) {
$ (' #selected-color1 '). Val (E.color);
});
Editor text background and color buttons
The above code, we introduced the basic usage, but perhaps some users have more requirements, such as the implementation of similar editing text style editing buttons, using color palette to achieve this effect, please see the following code.

<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" 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
Initialize Plug-ins

$ (' #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);
});
The principle is to create two color selection controls, then a display color defined as text, a background color defined as text, and, when the user chooses the color, use jquery to set the style for the corresponding text.

Custom Preset Colors
We can also preset several colors, so we can only choose our preset color values, so that we can better control the user's behavior.

Write color selection HTML code

<input id= "Selected-color3" >
<div id= "Colorpalette4" ></div>
By customizing an option variable, the value of the variable is an array of color combinations

var options = {
colors:[[' #000000 ', ' #424242 ', ' #636363 ', ' #9C9C94 ', ' #CEC6CE ', ' #EFEFEF ', ' #EFF7F7 ', ' #FFFFFF ']
}
Finally, when initializing the plugin, call this variable

$ (' #colorpalette4 '). ColorPalette (options)
 . On (' Selectcolor ', function (e) {
    $ (' # Selected-color3 '). Val (E.color);
});