Blame | Letzte Änderung | Log anzeigen | RSS feed
<!doctype html><html><head><title>jQuery MiniColors</title><meta charset="utf-8"><!-- jQuery --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><!-- Bootstrap 3 --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"><script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script><!-- MiniColors --><script src="jquery.minicolors.js"></script><link rel="stylesheet" href="jquery.minicolors.css"><style>dl {margin: 20px 0;}dt {font-size: 120%;}dd {padding: 10px 20px 20px 20px;}dd:last-child {border-bottom: none;}code {color: black;border: none;background: rgba(128, 128, 128, .1);}pre {background: #f8f8f8;border: none;color: #333;padding: 20px;}h2 {margin-top: 50px;}h3 {color: #aaa;}</style><script>$(document).ready(function(){$('.demo').each(function(){//// Dear reader, it's actually very easy to initialize MiniColors. For example://// $(selector).minicolors();//// The way I've done it below is just for the demo, so don't get confused// by it. Also, data- attributes aren't supported at this time...they're// only used for this demo.//$(this).minicolors({control: $(this).attr('data-control') || 'hue',defaultValue: $(this).attr('data-defaultValue') || '',inline: $(this).attr('data-inline') === 'true',letterCase: $(this).attr('data-letterCase') || 'lowercase',opacity: $(this).attr('data-opacity'),position: $(this).attr('data-position') || 'bottom left',change: function(hex, opacity){if (!hex) return;if (opacity) hex += ', ' + opacity;if (typeof console === 'object'){console.log(hex);}},theme: 'bootstrap'});});});</script></head><body><div class="row" style="margin: 40px 40px;"><div class="col-12"><!-- Intro --><div id="intro" class="jumbotron"><h1>jQuery MiniColors 2.1</h1><p class="text-muted"> Now with Bootstrap 3 support! </p><p> A project by<a href="http://www.abeautifulsite.net/">A Beautiful Site</a>, originally developed for<a href="http://www.surrealcms.com/">Surreal CMS</a>. </p></div><!-- Contents --><h2 id="contents">Contents</h2><ul><li><a href="#download">Download</a></li><li><a href="#demos">Demos</a></li><li><a href="#api">API</a><ul><li><a href="#instantiation">Instantiation</a></li><li><a href="#settings">Settings</a></li><li><a href="#methods">Methods</a></li><li><a href="#events">Events</a></li></ul></li><li><a href="#license">License</a></li></ul><!-- Download --><h2 id="download">Download</h2><p> This project is on GitHub. Feel free to post bug reports, feature requests, and code improvements on the official project page. </p><p><a href="https://github.com/claviska/jquery-minicolors" class="btn btn-success">Download on GitHub</a></p><!-- Demos --><h2 id="demos">Demos</h2><p> This is the main demo page, which uses<a href="http://getbootstrap.com/">Bootstrap 3</a>, but this plugin works without Bootstrap as well. </p><p><a href="without-bootstrap.html" class="btn btn-primary">View Demo Without Bootstrap</a></p><!-- Control types --><h3>Control Types</h3><div class="well"><div class="row"><div class="col-lg-4 col-sm-4 col-12"><div class="form-group"><label for="hue-demo">Hue (default)</label><input type="text" id="hue-demo" class="form-control demo" data-control="hue" value="#ff6161"> </div><div class="form-group"><label for="saturation-demo">Saturation</label><input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc"> </div></div><div class="col-lg-4 col-sm-4 col-12"><div class="form-group"><label for="brightness-demo">Brightness</label><input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff"> </div><div class="form-group"><label for="wheel-demo">Wheel</label><input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee"> </div></div></div></div><!-- Input modes --><h3>Input Modes</h3><div class="well"><div class="row"><div class="col-lg-4 col-sm-4 col-12"><div class="form-group"><label for="text-field">Text field</label><br><input type="text" id="text-field" class="form-control demo" value="#70c24a"> </div><div class="form-group"><label for="hidden-input">Hidden Input</label><br><input type="hidden" id="hidden-input" class="demo" value="#db913d"> </div></div><div class="col-lg-4 col-sm-4 col-12"><div class="form-group"><label for="inline">Inline</label><br><input type="text" id="inline" class="form-control demo" data-inline="true" value="#4fc8db"> </div></div></div></div><!-- Positions --><h3>Positions</h3><div class="well"><p> Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>topleft</code>, and <code>top right</code>. </p><div class="row"><div class="col-lg-4 col-sm-4 col-12"><div class="form-group"><label for="position-bottom-left">bottom left (default)</label><input type="text" id="position-bottom-left" class="form-control demo" data-position="bottom left" value="#0088cc"> </div><div class="form-group"><label for="position-top-left">top left</label><input type="text" id="position-top-left" class="form-control demo" data-position="top left" value="#0088cc"> </div></div><div class="col-lg-4 col-sm-4 col-12"><div class="form-group"><label for="position-bottom-right">bottom right</label><input type="text" id="position-bottom-right" class="form-control demo" data-position="bottom right" value="#0088cc"> </div><div class="form-group"><label for="position-top-right">top right</label><input type="text" id="position-top-right" class="form-control demo" data-position="top right" value="#0088cc"> </div></div><div class="col-lg-4 col-sm-4 col-12"> </div></div></div><!-- and more --><h3>…and more!</h3><div class="well"><div class="row"><div class="col-lg-4 col-sm-4 col-12"><div class="form-group"><label for="opacity">Opacity</label><br><input type="text" id="opacity" class="form-control demo" data-opacity=".5" value="#766fa8"><span class="help-block"> Opacity can be assigned by including the <code>data-opacity</code> attribute or by setting the <code>opacity</code> option to <code>true</code>. </span></div></div><div class="col-lg-4 col-sm-4 col-12"><div class="form-group"><label for="default-value">Default Value</label><br><input type="text" id="default-value" class="form-control demo" data-defaultValue="#ff6600"><span class="help-block"> This field has a default value assigned to it, so it will never be empty. </span></div></div><div class="col-lg-4 col-sm-4 col-12"><div class="form-group"><label for="letter-case">Letter Case</label><br><input type="text" id="letter-case" class="form-control demo" data-letterCase="uppercase" value="#abcdef"><span class="help-block"> This field will always be uppercase. </span></div></div></div><div class="row"><div class="col-lg-4 col-sm-4 col-12"><div class="form-group"><label for="input-group">Input Groups</label><div class="input-group"><input type="text" id="input-group" class="form-control demo" value="#ff0000" /><span class="input-group-btn"><button class="btn btn-default" type="button">Button</button></span></div><span class="help-block"> Example using Bootstrap's input groups. </span></div></div><div class="col-lg-4 col-sm-4 col-12"><div class="form-group"><label for="more-input-group">More Input Groups</label><div class="input-group"><span class="input-group-addon">Color</span><input type="text" id="more-input-group" class="form-control demo" value="#ff0000" /><span class="input-group-btn"><button class="btn btn-default" type="button">Button</button></span></div><span class="help-block"> Input group example with addon. </span></div></div></div></div><!-- API --><h2 id="api">API</h2><!-- Instantiation --><h3 id="instantiation">Instantiation</h3><p> Instantiate like any other jQuery plugin: </p> <pre>$('INPUT.minicolors').minicolors(settings);</pre><!-- Settings --><h3 id="settings">Settings</h3><p> Default settings are as follows: </p> <pre>$.minicolors = {defaults: {animationSpeed: 50,animationEasing: 'swing',change: null,changeDelay: 0,control: 'hue',dataUris: true,defaultValue: '',hide: null,hideSpeed: 100,inline: false,letterCase: 'lowercase',opacity: false,position: 'bottom left',show: null,showSpeed: 100,theme: 'default'}};</pre><p> For convenience, you can change default settings globally by assigning new values: </p> <pre>$.minicolors.defaults.changeDelay = 200;</pre><p> To change multiple properties at once, use <code>$.extend()</code>: </p> <pre>$.minicolors.defaults = $.extend($.minicolors.defaults, {changeDelay: 200,letterCase: 'uppercase',theme: 'bootstrap'});</pre><p class="alert alert-warning"><strong>Note:</strong> Changing default settings will<em>not</em> affect controls that are already initialized. </p><dl><dt>animationSpeed</dt><dd><p> The animation speed of the sliders when the user taps or clicks a new color. Set to <code>0</code> for no animation. </p></dd><dt>animationEasing</dt><dd><p> The easing to use when animating the sliders. </p></dd><dt>changeDelay</dt><dd><p> The time, in milliseconds, to defer the <code>change</code> event from firing while the user makes a selection. This is useful for preventing the <code>change</code> event from firing frequently as the user drags the color pickeraround. </p><p> The default value is <code>0</code> (no delay). If your <code>change</code> callback features something resource-intensive (such as an AJAX request), you’ll probably want to set this to at least <code>200</code>. </p></dd><dt>control</dt><dd><p> Determines the type of control. Valid options are <code>hue</code>, <code>brightness</code>, <code>saturation</code>, and <code>wheel</code>. </p></dd><dt>dataUris</dt><dd><p> Set this to <code>false</code> if you require IE7/IE8 support. This setting will force the plugin to load an external image instead of using dataURIs. </p></dd><dt>defaultValue</dt><dd><p> To force a default color, set this to a valid hex string. When the user clears the control, it will revert to this color. </p></dd><dt>hideSpeed & showSpeed</dt><dd><p> The speed at which to hide and show the color picker. </p></dd><dt>inline</dt><dd><p> Set to <code>true</code> to force the color picker to appear inline. </p></dd><dt>letterCase</dt><dd><p> Determines the letter case of the hex code value. Valid options are <code>uppercase</code> or <code>lowercase</code>. </p></dd><dt>opacity</dt><dd><p> Set to <code>true</code> to enable the opacity slider. (Use the input element's <code>data-opacity</code> attribute to set a preset value.) </p></dd><dt>position</dt><dd><p> Sets the position of the dropdown. Valid options are <code>bottom left</code>, <code>bottom right</code>, <code>top left</code>, and <code>top right</code>. </p><p class="alert alert-warning"> The <code>swatchPosition</code> setting has been removed in version 2.1. The position of the swatch is now determined by <code>position</code>. </p></dd><dt>theme</dt><dd><p> A string containing the name of the custom theme to be applied. In your CSS, prefix your selectors like this: </p> <pre>.minicolors-theme-yourThemeName { ... }</pre><p> If you are using the default theme, you will probably need to adjust the swatch styles depending on your existing stylesheet rules. Version 2.1 removes as much styling on the <code>input</code> element as possible, which meansit’s up to you to adjust your CSS to make sure the swatch aligns properly. </p><p> To adjust the swatch, override these styles: </p> <pre>.minicolors-theme-default .minicolors-swatch {top: 5px;left: 5px;width: 18px;height: 18px;}.minicolors-theme-default.minicolors-position-right .minicolors-swatch {left: auto;right: 5px;}</pre> </div></dd></dl><!-- Methods --><h3 id="methods">Methods</h3><p>Use this syntax for calling methods:</p> <pre>$(<em>selector</em>).minicolors('method', <em>[data]</em>);</pre><dl><dt>create</dt><dd><p> Initializes the control for all items matching your selector. This is the default method, so <code>data</code> may be passed in as the only argument. </p><p> To set a preset color value, populate the <code>value</code> attribute of the original input element. </p></dd><dt>destroy</dt><dd><p> Returns the<em>input</em> element to its original, uninitialized state. </p></dd><dt>opacity</dt><dd><p> Gets or sets a control's opacity level. To use this method as a setter, pass data in as a value between 0 and 1. (You can also obtain this value by checking the input element's <code>data-opacity</code> attribute.) </p><p> To set a preset opacity value, populate the <code>data-opacity</code> attribute of the original input element. </p></dd><dt>rgbObject</dt><dd><p> Returns an object containing red, green, blue, and alpha properties that correspond to the control's current value. Example: </p> <pre>{ r: 0, g: 82, b: 148, a: 0.75 }</pre> </dd><dt>rgbString & rgbaString</dt><dd><p> Returns an RGB or RGBA string suitable for use in your CSS. Examples: </p> <pre>rgb(0, 82, 148)rgba(0, 82, 148, .75)</pre> </dd><dt>settings</dt><dd><p> Gets or sets a control's settings. If new settings are passed in, the control will destroy and re-initialize itself with any new settings overriding the old ones. </p></dd><dt>value</dt><dd><p> Gets or sets a control's color value. To use this method as a setter, pass <code>data</code> in as a hex value. (You can also obtain this value by checking the input element's <code>value</code> attribute.) </p></dd></dl><!-- Events --><h3 id="events">Events</h3><dl><dt>change</dt><dd><p>Fires when the value of the color picker changes. The <code>this</code> keyword will reference the original input element. <pre>$(<em>selector</em>).minicolors({change: function(hex, opacity) {console.log(hex + ' - ' + opacity);}});</pre><p class="alert alert-warning"><strong>Warning!</strong> This event will fire a lot when the user drags the color picker around. Use the <code>changeDelay</code> setting to reduce its frequency. </p></dd><dt>hide</dt><dd><p> Fires when the color picker is hidden. The <code>this</code> keyword will reference the original input element. </p> <pre>$(<em>selector</em>).minicolors({hide: function() {console.log('Hide event triggered!');}});</pre> </dd><dt>show</dt><dd><p> Fires when the color picker is shown. The <code>this</code> keyword will reference the original input element. </p> <pre>$(<em>selector</em>).minicolors({show: function() {console.log('Show event triggered!');}});</pre> </dd></dl><h2 id="license">License</h2><p> Licensed under the<a href="http://opensource.org/licenses/MIT">MIT license</a>, same as<a href="https://jquery.org/license/">jQuery</a>. </p><p> ©2013<a href="http://www.abeautifulsite.net/">A Beautiful Site, LLC.</a></p></div></div></body></html>