|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /proc/21573/task/21573/root/home/queenjbs/www/test/sound/inc/miniColors/ |
Upload File : |
<!DOCTYPE html>
<!--
~ /*******************************************************************************
~ jquery.mb.components
~ file: index.html
~
~ Copyright (c) 2001-2013. Matteo Bicocchi (Pupunzi);
~ Open lab srl, Firenze - Italy
~ email: matteo@open-lab.com
~ site: http://pupunzi.com
~ blog: http://pupunzi.open-lab.com
~ http://open-lab.com
~
~ Licences: MIT, GPL
~ http://www.opensource.org/licenses/mit-license.php
~ http://www.gnu.org/licenses/gpl.html
~
~ last modified: 10/04/13 4.42
~ ******************************************************************************/
-->
<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() {
//
// Dear reader, it's actually much easier than this 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!
//
$(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);
}
});
});
});
</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>);
</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'
}
</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'
});
</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>
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>
$(<em>selector</em>).minicolors({
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>
$(<em>selector</em>).minicolors({
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>
$(<em>selector</em>).minicolors({
show: function() {
console.log('Show event triggered!');
}
});
</pre>
</dd>
</dl>
</div>
<div id="console"></div>
</body>
</html>