admin-lte

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Colorpicker for Twitter Bootstrap</title> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-85082661-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-85082661-5'); </script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="//cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css" rel="stylesheet"> <link href="dist/css/bootstrap-colorpicker.min.css" rel="stylesheet"> <link href="docs/assets/main.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="dist/js/bootstrap-colorpicker.js"></script> </head> <body> <div class="container"> <div class="page-header"> <h1><i class="glyphicon glyphicon-tint"></i> Bootstrap Colorpicker 2.5.2 <small>for Twitter Bootstrap</small> </h1> </div> <div class="row"> <article class="col-md-12"> <p> Fancy and customizable colorpicker plugin for Twitter Bootstrap. Originally written by <a href="https://twitter.com/stefanpetre/" target="_blank">Stefan Petre</a> and maintained by <a href="https://itsjavi.com/" target="_blank">Javi Aguilar</a> and the Github community. </p> <p class="alert alert-warning"> <b>NOTE</b> That this is an older version of the library documentation, please check the project <a href="https://github.com/farbelous/bootstrap-colorpicker/blob/master/README.md">README</a> to find the documentation for the newer and latest versions. </p> </article> </div> <div class="row"> <article class="col-md-12"> <hr> <div class="social"> <a href="https://github.com/farbelous/bootstrap-colorpicker/" target="_blank" class="btn btn-default btn-sm"><span class="octicon octicon-mark-github"></span> Source code </a> <a href="https://github.com/farbelous/bootstrap-colorpicker/releases" target="_blank" class="btn btn-default btn-sm"> Latest Releases </a> <a href="https://github.com/farbelous/bootstrap-colorpicker/archive/2.5.2.zip" target="_blank" class="btn btn-success btn-sm"><i class="glyphicon glyphicon-download-alt"></i> Download v2.5.2 </a> </div> <hr> </article> </div> <div class="row"> <div class="col-md-7"> <h2>Documentation</h2> <hr> <p>Call the colopicker via javascript:</p> <pre class="well">$('.sample-selector').colorpicker({ /*options...*/ });</pre> <h3>Options</h3> <p> You can set colorpicker options either as a plugin parameter or data-* attributes </p> <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> <th style="width: 50px;">Type</th> <th style="width: 100px;">Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>format</td> <td>string</td> <td>false</td> <td>If not false, forces the color format to be hex, rgb or rgba, otherwise the format is automatically detected. </td> </tr> <tr> <td>color</td> <td>string</td> <td>false</td> <td>If not false, sets the color to this value.</td> </tr> <tr> <td>container</td> <td>string or jQuery Element</td> <td>false</td> <td>If not false, the picker will be contained inside this element, otherwise it will be appended to the document body. </td> </tr> <tr> <td>component</td> <td>string or jQuery Element</td> <td>'.add-on, .input-group-addon'</td> <td>Children selector for the component or element that trigger the colorpicker and which background color will change (needs an inner <i> element). </td> </tr> <tr> <td>input</td> <td>string or jQuery Element</td> <td>'input'</td> <td>Children selector for the input that will store the picker selected value.</td> </tr> <tr> <td>hexNumberSignPrefix</td> <td>boolean</td> <td>true</td> <td>If true, put a '&num;' (number sign) before hex strings. </td> </tr> <tr> <td>horizontal</td> <td>boolean</td> <td>false</td> <td>If true, the hue and alpha channel bars will be rendered horizontally, above the saturation selector. </td> </tr> <tr> <td>inline</td> <td>boolean</td> <td>false</td> <td>If true, forces to show the colorpicker as an inline element.</td> </tr> <tr> <td>sliders</td> <td>object</td> <td><abbr title='please, read the source code to see this value'>[...]</abbr></td> <td>Vertical sliders configuration (read source code if you really need to tweak this).</td> </tr> <tr> <td>slidersHorz</td> <td>object</td> <td><abbr title='please, read the source code to see this value'>[...]</abbr></td> <td>Horizontal sliders configuration (read source code if you really need to tweak this).</td> </tr> <tr> <td>template</td> <td>string</td> <td><abbr title='please, read the source code to see this value'>[...]</abbr></td> <td>Customizes the default colorpicker HTML template.</td> </tr> <tr> <td>align</td> <td>string</td> <td>'right'</td> <td>By default, the colorpicker is aligned to the right of the input. If you need to switch it to the left, set align to 'left'. </td> </tr> <tr> <td>customClass</td> <td>string</td> <td>null</td> <td>Adds this class to the colorpicker widget.</td> </tr> <tr> <td>colorSelectors</td> <td>object</td> <td>null</td> <td>List of pre selected colors (hex format). If you choose one of these colors, the alias is returned instead of the hex code. </td> </tr> <tr> <td>fallbackColor</td> <td>string</td> <td>null</td> <td> Fallback color string that will be applied when the color failed to be parsed. If <var>null</var>, it will keep the current color if any. </td> </tr> <tr> <td>fallbackFormat</td> <td>string</td> <td>hex</td> <td> Fallback color format (e.g. when not specified or for alias mode, when selecting non aliased colors) </td> </tr> </tbody> </table> <h3>jQuery API Methods</h3> <p>General usage methods</p> <h4>.colorpicker(options)</h4> <p>Initializes an colorpicker.</p> <h4>.colorpicker('getValue', defaultValue)</h4> <p>Gets the value from the input or the data attribute (if has no input), otherwise returns the default value, which defaults to #000000 if not specified.</p> <h4>.colorpicker('setValue', value)</h4> <p>Set a new value for the color picker (also updates everything). Triggers 'changeColor' event.</p> <h4>.colorpicker('show')</h4> <p>Show the color picker</p> <h4>.colorpicker('hide')</h4> <p>Hide the color picker</p> <h4>.colorpicker('reposition')</h4> <p>Updates the color picker's position relative to the element</p> <h4>.colorpicker('update')</h4> <p>Refreshes the widget colors (this is done automatically)</p> <h4>.colorpicker('enable')</h4> <p>Enable the color picker.</p> <h4>.colorpicker('disable')</h4> <p>Disable the color picker.</p> <h4>.colorpicker('destroy')</h4> <p>Destroys the colorpicker widget and unbind all .colorpicker events from the element and component</p> <h4>.data('colorpicker')</h4> <p>Access to the colorpicker API directly</p> <h4>.data('colorpicker').color</h4> <p>Access to the colorpicker Color object information</p> <hr> <h3>Color object methods</h3> <p>Each triggered events have a color object (avaliable through event.color, see the example at the bottom) used internally by the picker. This object has several useful methods. These are the more commonly used:</p> <h4>.setColor(value)</h4> <p>Set a new color. The value is parsed and tries to do a quess on the format.</p> <h4>.setHue(value)</h4> <p>Set the HUE with a value between 0 and 1.</p> <h4>.setSaturation(value)</h4> <p>Set the saturation with a value between 0 and 1.</p> <h4>.setBrightness(value)</h4> <p>Set the brightness with a value between 0 and 1.</p> <h4>.setAlpha(value)</h4> <p>Set the transparency with a value between 0 and 1.</p> <h4>.toRGB()</h4> <p>Returns a hash with red, green, blue and alpha.</p> <h4>.toHex()</h4> <p>Returns a string with HEX format for the current color.</p> <h4>.toHSL()</h4> <p>Returns a hash with HSLA values.</p> <hr> <h3>Events</h3> <p>The colorpicker plugin exposes some events</p> <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 150px;">Event</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>create</td> <td>This event fires immediately when the color picker is created.</td> </tr> <tr> <td>showPicker</td> <td>This event fires immediately when the color picker is displayed.</td> </tr> <tr> <td>hidePicker</td> <td>This event is fired immediately when the color picker is hidden.</td> </tr> <tr> <td>changeColor</td> <td>This event is fired when the color is changed.</td> </tr> <tr> <td>disable</td> <td>This event is fired immediately when the color picker is disabled, except if it was initialized as disabled. </td> </tr> <tr> <td>enable</td> <td>This event is fired immediately when the color picker is enabled, except upon initialization. </td> </tr> <tr> <td>destroy</td> <td>This event fires immediately when the color picker is destroyed.</td> </tr> </tbody> </table> </div> <div class="col-md-5"> <h2>Examples</h2> <hr> <div class="example"> <div class="example-title">Simple input field</div> <div class="example-content well"> <div class="example-content-widget"> <input id="cp1" type="text" class="form-control" value="#5367ce"/> <script> $(function () { $('#cp1').colorpicker(); }); </script> </div> <button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button> <div class="example-code"><input id="cp1" type="text" class="form-control" value="#5367ce" /> <script> $(function() { $('#cp1').colorpicker(); }); </script></div> </div> </div> <div class="example"> <div class="example-title">As a component</div> <div class="example-content well"> <div class="example-content-widget"> <div id="cp2" class="input-group colorpicker-component"> <input type="text" value="#00AABB" class="form-control"/> <span class="input-group-addon"><i></i></span> </div> <script> $(function () { $('#cp2').colorpicker(); }); </script> </div> <button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button> <div class="example-code"><div id="cp2" class="input-group colorpicker-component"> <input type="text" value="#00AABB" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> <script> $(function() { $('#cp2').colorpicker(); }); </script></div> </div> </div> <div class="example"> <div class="example-title">With custom options</div> <div class="example-description">Sample overriding the initial color and format</div> <div class="example-content well"> <div class="example-content-widget"> <div id="cp3" class="input-group colorpicker-component"> <input type="text" value="#00AABB" class="form-control"/> <span class="input-group-addon"><i></i></span> </div> <script> $(function () { $('#cp3').colorpicker({ color: '#AA3399', format: 'rgb' }); }); </script> </div> <button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button> <div class="example-code"><div id="cp3" class="input-group colorpicker-component"> <input type="text" value="#00AABB" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> <script> $(function() { $('#cp3').colorpicker({ color: '#AA3399', format: 'rgb' }); }); </script></div> </div> </div> <div class="example"> <div class="example-title">Working with events</div> <div class="example-content well"> <div class="example-content-widget"> <a href="#" class="btn btn-default" id="cp4">Change background color</a> <script> $(function () { $('#cp4').colorpicker().on('changeColor', function (e) { $('body')[0].style.backgroundColor = e.color.toString('rgba'); }); }); </script> </div> <button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button> <div class="example-code"><a href="#" class="btn btn-default" id="cp4">Change background color</a> <script> $(function() { $('#cp4').colorpicker().on('changeColor', function(e) { $('body')[0].style.backgroundColor = e.color.toString( 'rgba'); }); }); </script></div> </div> </div> <div class="example"> <div class="example-title">Transparent color support</div> <div class="example-content well"> <div class="example-content-widget"> <input type="text" class="form-control" id="cp5"/> <script> $(function () { $('#cp5').colorpicker({ color: "transparent", format: "hex" }); }); </script> </div> <button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button> <div class="example-code"><input type="text" class="form-control" id="cp5" /> <script> $(function() { $('#cp5').colorpicker({ color: "transparent", format: "hex" }); }); </script></div> </div> </div> <div class="example"> <div class="example-title">Horizontal mode</div> <div class="example-content well"> <div class="example-content-widget"> <input type="text" class="form-control" id="cp6" /> <script> $(function () { $('#cp6').colorpicker({ color: "#88cc33", horizontal: true }); }); </script> </div> <button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button> <div class="example-code"><input type="text" class="form-control" id="cp6" /> <script> $(function() { $('#cp6').colorpicker({ color: "#88cc33", horizontal: true }); }); </script></div> </div> </div> <div class="example"> <div class="example-title">Inline mode</div> <div class="example-content well"> <div class="example-content-widget"> <div id="cp7" class="inl-bl"></div> <style> .inl-bl { display: inline-block; } </style> <script> $(function () { $('#cp7').colorpicker({ color:'#ffaa00', container: true, inline:true }); }); </script> </div> <button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button> <div class="example-code"><div id="cp7" class="inl-bl"></div> <style> .inl-bl { display: inline-block; } </style> <script> $(function() { $('#cp7').colorpicker({ color: '#ffaa00', container: true, inline: true }); }); </script></div> </div> </div> <div class="example"> <div class="example-title">Aliased color palette</div> <div class="example-content well"> <div class="example-content-widget"> <div id="cp8" data-format="alias" class="input-group colorpicker-component"> <input type="text" value="primary" class="form-control"/> <span class="input-group-addon"><i></i></span> </div> <script> $(function () { $('#cp8').colorpicker({ colorSelectors: { 'black': '#000000', 'white': '#ffffff', 'red': '#FF0000', 'default': '#777777', 'primary': '#337ab7', 'success': '#5cb85c', 'info': '#5bc0de', 'warning': '#f0ad4e', 'danger': '#d9534f' } }); }); </script> </div> <button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button> <div class="example-code"><div id="cp8" data-format="alias" class="input-group colorpicker-component"> <input type="text" value="primary" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> <script> $(function() { $('#cp8').colorpicker({ colorSelectors: { 'black': '#000000', 'white': '#ffffff', 'red': '#FF0000', 'default': '#777777', 'primary': '#337ab7', 'success': '#5cb85c', 'info': '#5bc0de', 'warning': '#f0ad4e', 'danger': '#d9534f' } }); }); </script></div> </div> </div> <div class="example"> <div class="example-title">Customized widget size</div> <div class="example-description">Also showing the support of HTML color names</div> <div class="example-content well"> <div class="example-content-widget"> <input id="cp9" type="text" class="form-control" value="pink"/> <style> .colorpicker-2x .colorpicker-saturation { width: 200px; height: 200px; } .colorpicker-2x .colorpicker-hue, .colorpicker-2x .colorpicker-alpha { width: 30px; height: 200px; } .colorpicker-2x .colorpicker-color, .colorpicker-2x .colorpicker-color div { height: 30px; } </style> <script> $(function () { $('#cp9').colorpicker({ customClass: 'colorpicker-2x', sliders: { saturation: { maxLeft: 200, maxTop: 200 }, hue: { maxTop: 200 }, alpha: { maxTop: 200 } } }); }); </script> </div> <button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button> <div class="example-code"><input id="cp9" type="text" class="form-control" value="pink" /> <style> .colorpicker-2x .colorpicker-saturation { width: 200px; height: 200px; } .colorpicker-2x .colorpicker-hue, .colorpicker-2x .colorpicker-alpha { width: 30px; height: 200px; } .colorpicker-2x .colorpicker-color, .colorpicker-2x .colorpicker-color div { height: 30px; } </style> <script> $(function() { $('#cp9').colorpicker({ customClass: 'colorpicker-2x', sliders: { saturation: { maxLeft: 200, maxTop: 200 }, hue: { maxTop: 200 }, alpha: { maxTop: 200 } } }); }); </script></div> </div> </div> <div class="example"> <div class="example-title">Disabled / enabled status</div> <div class="example-content well"> <div class="example-content-widget"> <div id="cp10" class="input-group colorpicker-component"> <input disabled type="text" value="" class="form-control"/> <span class="input-group-addon"><i></i></span> </div> <br> <p> <a class="btn btn-sm btn-default enable-button" href="#">Enable</a> <a class="btn btn-sm btn-default disable-button" href="#">Disable</a> </p> <script> $(function () { $(".disable-button").click(function(e) { e.preventDefault(); $("#cp10").colorpicker('disable'); }); $(".enable-button").click(function(e) { e.preventDefault(); $("#cp10").colorpicker('enable'); }); $('#cp10').colorpicker(); }); </script> </div> <button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button> <div class="example-code"><div id="cp10" class="input-group colorpicker-component"> <input disabled type="text" value="" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> <br> <p> <a class="btn btn-sm btn-default enable-button" href="#">Enable</a> <a class="btn btn-sm btn-default disable-button" href="#">Disable</a> </p> <script> $(function() { $(".disable-button").click(function(e) { e.preventDefault(); $("#cp10").colorpicker('disable'); }); $(".enable-button").click(function(e) { e.preventDefault(); $("#cp10").colorpicker('enable'); }); $('#cp10').colorpicker(); }); </script></div> </div> </div> <div class="example"> <div class="example-title">Inside a modal</div> <div class="example-content well"> <div class="example-content-widget"> <button class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal"> Show modal </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div id="cp11" class="input-group colorpicker-component"> <input type="text" value="" class="form-control"/> <span class="input-group-addon"><i></i></span> </div> </div> </div> </div> </div> <script> $(function () { $('#cp11').colorpicker(); }); </script> </div> <button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button> <div class="example-code"><button class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal"> Show modal </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div id="cp11" class="input-group colorpicker-component"> <input type="text" value="" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> </div> </div> </div> </div> <script> $(function() { $('#cp11').colorpicker(); }); </script></div> </div> </div> <script> $(function () { $('.example-code-toggle').on('click', function () { $(this).parent().find('.example-code').toggle(); }); }); </script> </div> </div> </div> </body> </html>