[Pkg-javascript-commits] [jquery-minicolors] 03/28: Updated demo and docs for 2.1
David Prévot
taffit at alioth.debian.org
Sun Sep 8 14:57:20 UTC 2013
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to branch master
in repository jquery-minicolors.
commit 0bed067a02111b6f5c76f8236e4dfc5ead62a1e6
Author: Cory LaViska <cory at abeautifulsite.net>
Date: Thu Aug 8 12:53:09 2013 -0400
Updated demo and docs for 2.1
---
index.html | 996 +++++++++++++++++++++++++++++++-----------------------------
1 file changed, 516 insertions(+), 480 deletions(-)
diff --git a/index.html b/index.html
index 4fce2d8..a9901b1 100644
--- a/index.html
+++ b/index.html
@@ -1,509 +1,545 @@
-<!DOCTYPE html>
-
+<!doctype html>
<html>
<head>
- <title>jQuery MiniColors</title>
- <meta content="A tiny color picker built on jQuery" name="description">
- <meta charset="utf-8">
- <meta content="initial-scale=1.0" name="viewport">
- <link href="jquery.minicolors.css" rel="stylesheet">
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
- <script src="jquery.minicolors.js"></script>
- <style>
-
- HTML,
- BODY {
- padding: 0;
- margin: 0;
- }
-
- BODY {
- font: 14px sans-serif;
- color: #666;
- line-height: 1.7;
- background: #F8F8F8;
- padding: 0 20px;
- padding-bottom: 32px;
- }
-
- H1, H2, H3 {
- font-family: Georgia, serif;
- font-weight: normal;
- color: black;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- H1, H2, H3, P {
- margin: 20px 0;
- }
-
- H3 {
- color: gray;
- }
-
- A {
- color: #08C;
- }
-
- A:hover {
- color: #0BE;
- }
-
- PRE,
- CODE {
- background: #F8F8F8;
- padding: 2px;
- }
-
- PRE {
- overflow: hidden;
- text-overflow: ellipsis;
- padding: 10px;
- margin: 30px 0;
- }
-
- DL {
- border: solid 1px #EEE;
- padding: 20px;
- }
-
- .alert {
- background: #FFFCCC;
- color: black;
- padding: 1px 10px;
- margin: 30px 0;
- }
-
- #main {
- max-width: 800px;
- background: white;
- border: solid 1px #DDD;
- box-shadow: 0 0 30px rgba(0, 0, 0, .05);
- padding: 30px;
- margin: 20px auto;
- }
-
- .example {
- background: #F8F8F8;
- padding: 10px;
- margin: 30px 0;
- }
-
- #console {
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- height: 32px;
- font-family: monospace;
- line-height: 32px;
- text-align: center;
- background: black;
- color: white;
- z-index: 100;
- -moz-transition: all .5s;
- -ms-transition: all .5s;
- -webkit-transition: all .5s;
- transition: all .5s;
- opacity: 0;
- }
-
- #console.busy {
- opacity: .85;
- }
-
- </style>
- <script>
-
- $(document).ready( function() {
-
- var consoleTimeout;
-
- $('.minicolors').each( function() {
+ <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-rc1/css/bootstrap.min.css">
+ <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
+
+ <!-- MiniColors -->
+ <script src="jquery.minicolors.js"></script>
+ <link rel="stylesheet" href="jquery.minicolors.css">
+
+ <style>
+ body {
+ line-height: 1.8;
+ }
+ 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 much easier than this to initialize
- // miniColors. For example:
+ // Dear reader, it's actually very easy to initialize MiniColors. For example:
//
// $(selector).minicolors();
//
- // The way I've done it below is just to make it easier for me
- // when developing the plugin. It keeps me sane, but it may not
- // have the same effect on you!
+ // 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. Again,
+ // they're only used for the purposes of this demo.
//
- $(this).minicolors({
- control: $(this).attr('data-control') || 'hue',
- defaultValue: $(this).attr('data-default-value') || '',
- inline: $(this).hasClass('inline'),
- letterCase: $(this).hasClass('uppercase') ? 'uppercase' : 'lowercase',
- opacity: $(this).hasClass('opacity'),
- position: $(this).attr('data-position') || 'default',
- styles: $(this).attr('data-style') || '',
- swatchPosition: $(this).attr('data-swatch-position') || 'left',
- textfield: !$(this).hasClass('no-textfield'),
- theme: $(this).attr('data-theme') || 'default',
- change: function(hex, opacity) {
-
- // Generate text to show in console
- text = hex ? hex : 'transparent';
- if( opacity ) text += ', ' + opacity;
- text += ' / ' + $(this).minicolors('rgbaString');
-
- // Show text in console; disappear after a few seconds
- $('#console').text(text).addClass('busy');
- clearTimeout(consoleTimeout);
- consoleTimeout = setTimeout( function() {
- $('#console').removeClass('busy');
- }, 3000);
-
- }
- });
+ $(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) {
+ var log;
+ try {
+ log = hex ? hex : 'transparent';
+ if( opacity ) log += ', ' + opacity;
+ console.log(log);
+ } catch(e) {}
+ },
+ theme: 'bootstrap'
+ });
});
-
- });
-
- </script>
+
+ });
+ </script>
</head>
-
<body>
- <div id="main">
- <h1>jQuery MiniColors 2.0</h1>
-
- <p>A project by Cory LaViska of <a href="http://www.abeautifulsite.net/">A Beautiful Site</a>.</p>
-
- <p>MiniColors is a tiny color picker built on jQuery. It's easy to use and works well on touch-enabled devices.
- Completely re-written for 2.0.</p>
-
- <div class="alert">
- <p>The MiniColors API was completely overhauled in 2.0. You will need to change your code if you are
- upgrading from a previous version!</p>
- </div>
-
- <h2>Demo</h2>
-
- <h3>Standard Controls</h3>
-
- <p>Hue <input class="minicolors" type="text" value="#3b98bd"> Saturation
- <input class="minicolors" data-control="saturation" type="text" value="#50c900"> Brightness <input class=
- "minicolors" data-control="brightness" type="text" value="#7745ff"> Wheel <input class="minicolors"
- data-control="wheel" type="text" value="#ffb987"></p>
-
- <h3>Inline Controls</h3>
-
- <p><input class="minicolors inline" type="text" value="#3b98bd"> <input class="minicolors inline" data-control=
- "saturation" type="text" value="#50c900"> <input class="minicolors inline" data-control="brightness" type=
- "text" value="#7745ff"> <input class="minicolors inline" data-control="wheel" type="text" value="#ffb987"></p>
-
- <h2 id="download">Download</h2>
-
- <p>You can <a href="https://github.com/claviska/jquery-miniColors">download the source</a> on GitHub. Help
- contribute to this project by posting bug reports, feature requests, and code improvements!</p>
-
- <h2 id="usage">Usage</h2>
- <pre>
-$('INPUT.minicolors').minicolors(<em>settings</em>);
+ <div class="row" style="margin: 40px 20px;">
+ <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 Cory LaViska of <a href="http://www.abeautifulsite.net/">A Beautiful Site</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>
+ Contribute to this project by posting bug reports, feature requests, and code improvements on GitHub.
+ </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>
+ <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>…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">
+ <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>
-
- <h2 id="settings">Settings</h2>
-
- <p>All available settings are shown below with default values:</p>
- <pre>
-{
- animationSpeed: 100,
- animationEasing: 'swing',
- change: null,
- changeDelay: 0,
- control: 'hue',
- defaultValue: '',
- hide: null,
- hideSpeed: 100,
- inline: false,
- letterCase: 'lowercase',
- opacity: false,
- position: 'default',
- show: null,
- showSpeed: 100,
- swatchPosition: 'left',
- textfield: true,
- theme: 'default'
-}
+ <p>
+ For convenience, you can change default settings globally by assigning new values:
+ </p>
+<pre>
+$.minicolors.defaults.changeDelay = 200;
</pre>
-
- <dl>
- <dt><code>animationSpeed</code></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><code>animationEasing</code></dt>
-
- <dd>
- <p>The easing to use when animating the sliders.</p>
- </dd>
-
- <dt><code>changeDelay</code></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 an
- AJAX request, you’ll probably want to set this to at least <code>200</code>.</p>
- </dd>
-
- <dt><code>control</code></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><code>defaultValue</code></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>
-
- <div class="example">
- Default value: #ffcc00 <input class="minicolors" data-default-value="#ffcc00" type="text" value=
- "#ffb987">
- </div>
- </dd>
-
- <dt><code>hideSpeed</code> & <code>showSpeed</code></dt>
-
- <dd>
- <p>The speed at which to hide and show the color picker.</p>
- </dd>
-
- <dt><code>inline</code></dt>
-
- <dd>
- <p>Set to <code>true</code> to force the color picker to appear inline.</p>
- </dd>
-
- <dt><code>letterCase</code></dt>
-
- <dd>
- <p>Determines the letter case of the hex code value. Valid options are <code>uppercase</code> or
- <code>lowercase</code>.</p>
-
- <div class="example">
- Uppercase <input class="minicolors uppercase" type="text" value="#abc"> Lowercase <input class=
- "minicolors lowercase" type="text" value="#abc">
- </div>
- </dd>
-
- <dt><code>opacity</code></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>
-
- <div class="example">
- <input class="minicolors opacity" type="text" value="#ffb987">
- </div>
- </dd>
-
- <dt><code>position</code></dt>
-
- <dd>
- <p>Sets the position of the dropdown. Valid options are <code>default</code>, <code>top</code>,
- <code>left</code>, and <code>top left</code>.</p>
-
- <div class="example">
- <code>default</code> <input class="minicolors" data-position="default" type="text" value="#3b98bd">
- <code>top</code> <input class="minicolors" data-position="top" type="text" value="#50c900">
- <code>left</code> <input class="minicolors" data-position="left" type="text" value="#7745ff">
- <code>top left</code> <input class="minicolors" data-position="top left" type="text" value=
- "#ffb987">
- </div>
- </dd>
-
- <dt><code>swatchPosition</code></dt>
-
- <dd>
- <p>Determines which side of the textfield the color swatch will appear. Valid options are
- <code>left</code> and <code>right</code>.</p>
-
- <div class="example">
- <code>left</code> <input class="minicolors" data-swatch-position="left" type="text" value=
- "#3b98bd"> <code>right</code> <input class="minicolors" data-swatch-position="right" type="text"
- value="#50c900">
- </div>
- </dd>
-
- <dt><code>textfield</code></dt>
-
- <dd>
- <p>Whether or not to show the textfield. Set to <code>false</code> for a swatch-only control:</p>
-
- <div class="example">
- <input class="minicolors no-textfield" type="text" value="#3b98bd">
- </div>
- </dd>
-
- <dt><code>theme</code></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>Then set your theme like this:</p>
- <pre>
-$(<em>selector</em>).minicolors({
- theme: 'yourThemeName'
+ <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>Here are a few examples:</p>
-
- <div class="example">
- Default theme (<code>default</code>)<br>
- <input class="minicolors" type="text" value="#7ad674"><br>
- <br>
- Bootstrap theme (<code>bootstrap</code>)<br>
- <input class="minicolors" data-theme="bootstrap" type="text" value=
- "#2eb2e6"><br>
- <br>
- No theme (<code>none</code>)<br>
- <input class="minicolors" data-theme="none" type="text" value="#d96464">
- </div>
-
- <h3>A note about writing themes</h3>
-
- <p>When writing a theme, please make sure it supports both swatch positions
- (<code>swatchPosition</code>) and all panel positions (<code>position</code>). If you've written a
- theme and would like to have it included with MiniColors, feel free to <a href=
- "https://github.com/claviska/jquery-miniColors/">submit it to the project</a> on GitHub.</p>
- </dd>
- </dl>
-
- <h2 id="methods">Methods</h2>
-
- <p>Use this syntax for calling methods:</p>
- <pre>
-$(<em>selector</em>).minicolors('method', <em>[data]</em>);
-</pre>
-
- <dl>
- <dt><code>create</code></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><code>destroy</code></dt>
-
- <dd>
- <p>Returns the <em>input</em> element to its original, uninitialized state.</p>
- </dd>
-
- <dt><code>opacity</code></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><code>rgbObject</code></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><code>rgbString</code> & <code>rgbaString</code></dt>
-
- <dd>
- <p>Returns an RGB or RGBA string suitable for use in your CSS. Examples:</p>
- <pre>
+ <p class="alert">
+ <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 & 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">
+ 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: <code>.minicolors-theme-yourThemeName { ... }</code>
+ </p>
+ </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><code>settings</code></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><code>value</code></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>
-
- <h2 id="events">Events</h2>
-
- <dl>
- <dt><code>change</code></dt>
-
- <dd>
- <p>Fires when the value of the color picker changes. The <code>this</code> keyword will reference the
- original input element. <strong>Warning:</strong> This event will fire a lot if the user drags the
- color picker around.</p>
- <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);
- }
+ change: function(hex, opacity) {
+ console.log(hex + ' - ' + opacity);
+ }
});
</pre>
- </dd>
-
- <dt><code>hide</code></dt>
-
- <dd>
- <p>Fires when the color picker is hidden. The <code>this</code> keyword will reference the original
- input element.</p>
- <pre>
+ <p class="alert">
+ <strong>Warning!</strong> This event will fire a lot when the user drags the
+ color picker around. Using 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!');
- }
+ hide: function() {
+ console.log('Hide event triggered!');
+ }
});
</pre>
- </dd>
-
- <dt><code>show</code></dt>
-
- <dd>
- <p>Fires when the color picker is shown. The <code>this</code> keyword will reference the original
- input element.</p>
- <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!');
- }
+ show: function() {
+ console.log('Show event triggered!');
+ }
});
</pre>
- </dd>
- </dl>
- </div>
-
- <div id="console"></div>
+ </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>
\ No newline at end of file
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/jquery-minicolors.git
More information about the Pkg-javascript-commits
mailing list