index.html

<!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.0.0/css/bootstrap.min.css">
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/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;
						try {
							console.log(hex);
						} catch(e) {}
					},
					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="#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>top 
					left</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>&hellip;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>
			
			<!-- 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',
		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 picker around.
					</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>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 &amp; 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 means it’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 &amp; 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>
				&copy;2013 <a href="http://www.abeautifulsite.net/">A Beautiful Site, LLC.</a>
			</p>
		</div>
	</div>
</body>
</html>