[Pkg-javascript-commits] [jquery-minicolors] 11/15: Minor adjustments
David Prévot
taffit at moszumanska.debian.org
Wed Sep 3 16:34:48 UTC 2014
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to branch master
in repository jquery-minicolors.
commit 8c5fa018a4514a2948e63611f5816a3d13eedf34
Author: Cory LaViska <cory at abeautifulsite.net>
Date: Tue Sep 2 11:04:06 2014 -0400
Minor adjustments
---
index.html | 1068 ++++++++++++++++++++++++++++++------------------------------
1 file changed, 534 insertions(+), 534 deletions(-)
diff --git a/index.html b/index.html
index 0ed548f..80c64ce 100644
--- a/index.html
+++ b/index.html
@@ -1,54 +1,54 @@
<!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() {
+ <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() {
//
@@ -60,532 +60,532 @@
// 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'
- });
+ $(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>
+ });
+ </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>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" 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>
+ <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>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" 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',
- dataUris: true,
- defaultValue: '',
- hide: null,
- hideSpeed: 100,
- inline: false,
- letterCase: 'lowercase',
- opacity: false,
- position: 'bottom left',
- show: null,
- showSpeed: 100,
- theme: 'default'
- }
+ 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>
+ <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>
+ <p>
+ To change multiple properties at once, use <code>$.extend()</code>:
+ </p>
<pre>
$.minicolors.defaults = $.extend($.minicolors.defaults, {
- changeDelay: 200,
- letterCase: 'uppercase',
- theme: 'bootstrap'
+ 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>dataUris</dt>
- <dd>
- <p>
- This setting will force the plugin to load an external image instead of using
- dataURIs. Set this to <code>false</code> if you require IE7 support.
- </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>
+ <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>dataUris</dt>
+ <dd>
+ <p>
+ Set this to <code>false</code> if you require IE7 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 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>
+ <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;
+ top: 5px;
+ left: 5px;
+ width: 18px;
+ height: 18px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
- left: auto;
- right: 5px;
+ 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>
+ </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.
+ </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>
- <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>
+ <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!');
- }
+ 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>
+ </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>
-
- <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>
+ </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