642 lines
22 KiB
HTML
642 lines
22 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>jQuery Colorpicker</title>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
|
|
<!-- jQuery/jQueryUI (hosted) -->
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
|
||
|
|
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
|
||
|
|
font-size: 62.5%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script src="jquery.colorpicker.js"></script>
|
||
|
|
<link href="jquery.colorpicker.css" rel="stylesheet" type="text/css"/>
|
||
|
|
<script src="i18n/jquery.ui.colorpicker-nl.js"></script>
|
||
|
|
<script src="swatches/jquery.ui.colorpicker-pantone.js"></script>
|
||
|
|
<script src="swatches/jquery.ui.colorpicker-crayola.js"></script>
|
||
|
|
<script src="swatches/jquery.ui.colorpicker-ral-classic.js"></script>
|
||
|
|
<script src="swatches/jquery.ui.colorpicker-x11.js"></script>
|
||
|
|
<script src="swatches/jquery.ui.colorpicker-copic.js"></script>
|
||
|
|
<script src="swatches/jquery.ui.colorpicker-prismacolor.js"></script>
|
||
|
|
<script src="swatches/jquery.ui.colorpicker-isccnbs.js"></script>
|
||
|
|
<script src="swatches/jquery.ui.colorpicker-din6164.js"></script>
|
||
|
|
<script src="parts/jquery.ui.colorpicker-rgbslider.js"></script>
|
||
|
|
<script src="parts/jquery.ui.colorpicker-memory.js"></script>
|
||
|
|
<script src="parts/jquery.ui.colorpicker-swatchesswitcher.js"></script>
|
||
|
|
<script src="parsers/jquery.ui.colorpicker-cmyk-parser.js"></script>
|
||
|
|
<script src="parsers/jquery.ui.colorpicker-cmyk-percentage-parser.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('#tabs').tabs();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>jQuery ColorPicker - Demo page</h1>
|
||
|
|
|
||
|
|
<div id="tabs">
|
||
|
|
<ul>
|
||
|
|
<li><a href="#tab-input">Basic <input></a></li>
|
||
|
|
<li><a href="#tab-element">Basic element</a></li>
|
||
|
|
<li><a href="#tab-full">All features</a></li>
|
||
|
|
<li><a href="#tab-i18n">Localization</a></li>
|
||
|
|
<li><a href="#tab-websafe">Websafe colors</a></li>
|
||
|
|
<li><a href="#tab-alt">Alternative display field</a></li>
|
||
|
|
<li><a href="#tab-events">Events</a></li>
|
||
|
|
<li><a href="#tab-input-format">Input formatting</a></li>
|
||
|
|
<li><a href="#tab-format">Output formatting</a></li>
|
||
|
|
<li><a href="#tab-format-list">Output format list</a></li>
|
||
|
|
<li><a href="#tab-dialog">In a dialog</a></li>
|
||
|
|
<li><a href="#tab-modal">Modal</a></li>
|
||
|
|
<li><a href="#tab-no-inline">Any element to popup</a></li>
|
||
|
|
<li><a href="#tab-layout">Custom layout</a></li>
|
||
|
|
<li><a href="#tab-pantone">Custom swatches</a></li>
|
||
|
|
<li><a href="#tab-swatches-array">Custom swatches - array</a></li>
|
||
|
|
<li><a href="#tab-hidden-input">Hidden input</a></li>
|
||
|
|
<li><a href="#tab-plugins">Plugins</a></li>
|
||
|
|
<li><a href="#tab-buttonImageOnly">buttonImageOnly</a></li>
|
||
|
|
<li><a href="#tab-revert">Revert</a></li>
|
||
|
|
<li><a href="#tab-okonenter">Close on enter</a></li>
|
||
|
|
<li><a href="#tab-128">128-pixel map and bar</a></li>
|
||
|
|
<li><a href="#tab-customcolor">Custom color format</a></li>
|
||
|
|
<li><a href="#tab-position">Centered in window</a></li>
|
||
|
|
<li><a href="#tab-disable">Disable/enable</a></li>
|
||
|
|
<li><a href="#tab-noanim">No show animation</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div id="tab-input">
|
||
|
|
<h2>Basic <input> example, without any options</h2>
|
||
|
|
<input type="text" class="cp-basic" value="fe9810"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-element">
|
||
|
|
<h2>Basic element (<span>> example, without any options</h2>
|
||
|
|
<span class="cp-basic" style="display: inline-block; vertical-align: top;"></span>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-basic').colorpicker();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-full">
|
||
|
|
<h2>Fully-featured example</h2>
|
||
|
|
<input type="text" class="cp-full" value="186aa7"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-full').colorpicker({
|
||
|
|
parts: 'full',
|
||
|
|
showOn: 'both',
|
||
|
|
buttonColorize: true,
|
||
|
|
showNoneButton: true,
|
||
|
|
alpha: true,
|
||
|
|
colorFormat: 'RGBA'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-i18n">
|
||
|
|
<h2>Localized to Dutch (nl)</h2>
|
||
|
|
<input type="text" class="cp-i18n" value="ccea73"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-i18n').colorpicker({
|
||
|
|
regional: 'nl',
|
||
|
|
showNoneButton: true,
|
||
|
|
alpha: true
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-websafe">
|
||
|
|
<h2>Limit to websafe colors</h2>
|
||
|
|
<input type="text" class="cp-websafe" value="0fa7c2"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-websafe').colorpicker({
|
||
|
|
limit: 'websafe'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-alt">
|
||
|
|
<h2>Alternative field class</h2>
|
||
|
|
<input type="text" class="cp-alt" value="b762ae"/>
|
||
|
|
<span class="cp-alt-target" style="display: inline-block; border: thin solid black; padding: .5em 4em;">
|
||
|
|
<div style=" background-color: white; border: thin solid black; padding: .25em 2em; font-size: 1.25em; font-weight: bold;">Background-color on outside, text color here</div>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-alt').colorpicker({
|
||
|
|
altField: '.cp-alt-target',
|
||
|
|
altProperties: 'background-color,color',
|
||
|
|
altAlpha: true,
|
||
|
|
alpha: true
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-events">
|
||
|
|
<h2>Events</h2>
|
||
|
|
<input type="text" class="cp-events" value="92b64a"/>
|
||
|
|
<div class="cp-events-log" style="vertical-align: top; display: inline-block; border: thin solid black; height: 10em; overflow-y: scroll; width: 50em;"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
var count = 0;
|
||
|
|
|
||
|
|
function addToEventLog(label, message) {
|
||
|
|
var line = '<div>#'+(++count)+' '+label+': '+message+'</div>',
|
||
|
|
log = $('.cp-events-log');
|
||
|
|
log.append(line).scrollTop(log[0].scrollHeight);
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.cp-events').colorpicker({
|
||
|
|
init: function(event, color) {
|
||
|
|
addToEventLog('Init', color.formatted, color.colorPicker.color.toCSS());
|
||
|
|
},
|
||
|
|
select: function(event, color) {
|
||
|
|
addToEventLog('Select', color.formatted);
|
||
|
|
},
|
||
|
|
stop: function(event, color) {
|
||
|
|
addToEventLog('Stop', color.formatted);
|
||
|
|
},
|
||
|
|
close: function(event, color) {
|
||
|
|
addToEventLog('Close', color.formatted + ' r:' + color.rgb.r + ' g:' + color.rgb.g + ' b:' + color.rgb.b + ' a:' + color.a);
|
||
|
|
},
|
||
|
|
ok: function(event, color) {
|
||
|
|
addToEventLog('Ok', color.formatted + ' r:' + color.rgb.r + ' g:' + color.rgb.g + ' b:' + color.rgb.b + ' a:' + color.a);
|
||
|
|
},
|
||
|
|
open: function(event, color) {
|
||
|
|
addToEventLog('Open', color.formatted + ' r:' + color.rgb.r + ' g:' + color.rgb.g + ' b:' + color.rgb.b + ' a:' + color.a);
|
||
|
|
},
|
||
|
|
cancel: function(event, color) {
|
||
|
|
addToEventLog('Cancel', color.formatted + ' r:' + color.rgb.r + ' g:' + color.rgb.g + ' b:' + color.rgb.b + ' a:' + color.a);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-format">
|
||
|
|
<h2>Output formatting HSLA</h2>
|
||
|
|
<input type="text" class="cp-format" value="918237"/>
|
||
|
|
<span class="cp-format-output"></span>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-format').colorpicker({
|
||
|
|
colorFormat: 'HSLA',
|
||
|
|
alpha: true,
|
||
|
|
init: function(event, color) {
|
||
|
|
$('.cp-format-output').text(color.formatted);
|
||
|
|
},
|
||
|
|
select: function(event, color) {
|
||
|
|
$('.cp-format-output').text(color.formatted);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-format-list">
|
||
|
|
<h2>Output format list</h2>
|
||
|
|
You can specify a list of output formats, the first perfect match for the color is output.<br/>
|
||
|
|
<input type="text" class="cp-name" value="a92fb4"/>
|
||
|
|
<span class="cp-name-output"></span>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-name').colorpicker({
|
||
|
|
parts: 'full',
|
||
|
|
colorFormat: ['EXACT', '#HEX3', 'RGB', 'RGBA'],
|
||
|
|
init: function(event, color) {
|
||
|
|
$('.cp-name-output').text(color.formatted);
|
||
|
|
},
|
||
|
|
select: function(event, color) {
|
||
|
|
$('.cp-name-output').text(color.formatted);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-dialog">
|
||
|
|
<h2>Dialog with Colorpicker popup (demonstrates z-index)</h2>
|
||
|
|
<button id="cp-dialog-open">Open dialog</button>
|
||
|
|
<div id="cp-dialog-modal" title="Basic modal dialog">
|
||
|
|
Basic <input> example, without any options: <input type="text" class="cp-onclick" value="fe9810"/>
|
||
|
|
<br/>
|
||
|
|
Basic element example, without any options: <span class="cp-onclick" style="display: inline-block; vertical-align: top;"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
var dialogModal = $('#cp-dialog-modal').dialog({
|
||
|
|
autoOpen: false,
|
||
|
|
minWidth: 500,
|
||
|
|
modal: true,
|
||
|
|
buttons: { 'Close': function() {
|
||
|
|
$(this).dialog('close');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('.cp-onclick').colorpicker({
|
||
|
|
showOn: 'click',
|
||
|
|
inlineFrame: false
|
||
|
|
});
|
||
|
|
$('#cp-dialog-open').click(function() {
|
||
|
|
dialogModal.dialog('open');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-modal">
|
||
|
|
<h2>Modal (and showCancelButton, closeOnEscape, showCloseButton)</h2>
|
||
|
|
<input type="text" class="cp-modal" value="9ba73f"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-modal').colorpicker({
|
||
|
|
parts: 'draggable',
|
||
|
|
showCloseButton: false,
|
||
|
|
modal: true,
|
||
|
|
showCancelButton: false,
|
||
|
|
closeOnEscape: false
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-input-format">
|
||
|
|
<h2>Input formatting</h2>
|
||
|
|
Demonstrates the ability to parse common color formats as input.<br/>
|
||
|
|
<input type="text" class="cp-input" value="rgb(123,42,87)"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-input').colorpicker({
|
||
|
|
colorFormat: ['RGBA']
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-no-inline">
|
||
|
|
<h2>Popup from any element (<em>)</h2>
|
||
|
|
Just click on this <em>Emphasized</em> word to show the colorpicker.
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('em').colorpicker({
|
||
|
|
inline: false
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-layout">
|
||
|
|
<h2>Custom layout</h2>
|
||
|
|
It's easy to arrange a new layout for the dialog. Especially handy when used in a sidebar.<br/>
|
||
|
|
<input type="text" class="cp-layout" value="92b7a5"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-layout').colorpicker({
|
||
|
|
parts: ['header', 'map', 'bar', 'hex', 'hsv', 'rgb', 'alpha', 'preview', 'swatches', 'footer'],
|
||
|
|
alpha: true,
|
||
|
|
layout: {
|
||
|
|
hex: [0, 0, 2, 1],
|
||
|
|
preview: [2, 0, 1, 1],
|
||
|
|
map: [0, 1, 3, 1], // Left, Top, Width, Height (in table cells).
|
||
|
|
bar: [0, 2, 1, 4],
|
||
|
|
swatches: [2, 2, 1, 4],
|
||
|
|
rgb: [1, 2, 1, 1],
|
||
|
|
hsv: [1, 3, 1, 1],
|
||
|
|
alpha: [1, 4, 1, 1],
|
||
|
|
lab: [0, 5, 1, 1],
|
||
|
|
cmyk: [1, 5, 1, 2]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-pantone">
|
||
|
|
<h2>Custom swatches</h2>
|
||
|
|
Use the Pantone PMS colors as swatches<br/>
|
||
|
|
<input type="text" class="cp-pantone" value="242"/>
|
||
|
|
<span class="cp-pantone-output"></span>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-pantone').colorpicker({
|
||
|
|
parts: 'full',
|
||
|
|
swatches: 'pantone',
|
||
|
|
colorFormat: 'NAME',
|
||
|
|
swatchesWidth: 173,
|
||
|
|
limit: 'name',
|
||
|
|
init: function(event, color) {
|
||
|
|
$('.cp-pantone-output').text(color.formatted);
|
||
|
|
},
|
||
|
|
select: function(event, color) {
|
||
|
|
$('.cp-pantone-output').text(color.formatted);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-swatches-array">
|
||
|
|
<h2>Custom swatches - array</h2>
|
||
|
|
Use an array of swatches<br/>
|
||
|
|
<input type="text" class="cp-custom-array" value="666666"/>
|
||
|
|
<span class="cp-custom-array-output"></span>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
/** Correctly handles the order of swatches.
|
||
|
|
*/
|
||
|
|
jQuery.colorpicker.swatches.custom_array = [
|
||
|
|
{name: '000000', r: 0, g: 0, b: 0},
|
||
|
|
{name: '444444', r: 0.266666666666667, g: 0.266666666666667, b:
|
||
|
|
0.266666666666667},
|
||
|
|
{name: '666666', r: 0.4, g: 0.4, b: 0.4},
|
||
|
|
{name: '999999', r: 0.6, g: 0.6, b: 0.6}
|
||
|
|
];
|
||
|
|
/** This is supported, but does not respect the order in chrome.
|
||
|
|
Black appears at the end of the list of swatches. */
|
||
|
|
jQuery.colorpicker.swatches.custom = {
|
||
|
|
'000000': {r: 0, g: 0, b: 0},
|
||
|
|
'444444': {r: 0.266666666666667, g: 0.266666666666667, b:
|
||
|
|
0.266666666666667},
|
||
|
|
'666666': {r: 0.4, g: 0.4, b: 0.4},
|
||
|
|
'999999': {r: 0.6, g: 0.6, b: 0.6}
|
||
|
|
};
|
||
|
|
|
||
|
|
$('.cp-custom-array').colorpicker({
|
||
|
|
parts: 'full',
|
||
|
|
swatches: 'custom_array',
|
||
|
|
colorFormat: 'NAME',
|
||
|
|
swatchesWidth: 173,
|
||
|
|
limit: 'name',
|
||
|
|
init: function(event, color) {
|
||
|
|
$('.cp-custom-array-output').text(color.formatted);
|
||
|
|
},
|
||
|
|
select: function(event, color) {
|
||
|
|
$('.cp-custom-array-output').text(color.formatted);
|
||
|
|
},
|
||
|
|
containment: 'body'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-hidden-input">
|
||
|
|
<h2>Hidden input</h2>
|
||
|
|
Uses a hidden input and buttons to pop open the colorpicker<br/>
|
||
|
|
<input type="hidden" class="cp-hidden-input" value="#abc123"/>
|
||
|
|
<button id="cp-hidden-input-open">Open</button>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
var dialogHidden = $('.cp-hidden-input').colorpicker();
|
||
|
|
$('#cp-hidden-input-open').click(function(e) {
|
||
|
|
e.stopPropagation();
|
||
|
|
dialogHidden.colorpicker('open');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-plugins">
|
||
|
|
<h2>Plugins</h2>
|
||
|
|
Demonstrates how to extend the set of parts with plugins.<br/>
|
||
|
|
<ol>
|
||
|
|
<li>RGB Slider - Individual RGB sliders</li>
|
||
|
|
<li>Memory - Store and retrieve colors with cookies</li>
|
||
|
|
<li>Swatches Switcher - Switch between different sets of swatches</li>
|
||
|
|
</ol>
|
||
|
|
<input type="text" class="cp-plugins" value="#18b7af"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-plugins').colorpicker({
|
||
|
|
parts: ['header', 'preview', 'hex', 'rgbslider', 'memory', 'swatches', 'swatchesswitcher', 'footer'],
|
||
|
|
layout: {
|
||
|
|
preview: [0, 0, 1, 1],
|
||
|
|
hex: [1, 0, 1, 1],
|
||
|
|
rgbslider: [0, 1, 2, 1],
|
||
|
|
memory: [0, 2, 2, 1],
|
||
|
|
|
||
|
|
swatchesswitcher: [2, 0, 1, 1],
|
||
|
|
swatches: [2, 1, 1, 2]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-buttonImageOnly">
|
||
|
|
<h2>Only a button image</h2>
|
||
|
|
<input type="text" class="cp-buttonImageOnly" value="#18b7af"/>
|
||
|
|
<br/>
|
||
|
|
<label for="toggle-cp-buttonImageOnly-disable">Enabled: <input type="checkbox" id="toggle-cp-buttonImageOnly-disable" checked="checked"/></label>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-buttonImageOnly').colorpicker({
|
||
|
|
showOn: 'both',
|
||
|
|
buttonImageOnly: true
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#toggle-cp-buttonImageOnly-disable').click(function() {
|
||
|
|
$('.cp-buttonImageOnly').colorpicker($(this).is(':checked') ? 'enable' : 'disable');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-revert">
|
||
|
|
<h2>Revert color on non-button exit.</h2>
|
||
|
|
<p>Reverts the color on escape, clickOnOutside or close window
|
||
|
|
using the [X] button.</p>
|
||
|
|
<p>Open the Colorpicker, change color and click outside window,
|
||
|
|
press ESC key or click the [X] button in the header. The dialog
|
||
|
|
should now close and the previous color restored in the
|
||
|
|
input.</p>
|
||
|
|
<input type="text" class="cp-revert" value=""/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-revert').colorpicker({
|
||
|
|
revert: true,
|
||
|
|
parts: 'full',
|
||
|
|
showNoneButton: true
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-okonenter">
|
||
|
|
<h2>Close OK on enter</h2>
|
||
|
|
Close the popup by pressing the enter key, keeping the selected color.
|
||
|
|
<input type="text" class="cp-okonenter" value="a83b19"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-okonenter').colorpicker({
|
||
|
|
okOnEnter: true
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-128">
|
||
|
|
<h2>128-pixel map and bar</h2>
|
||
|
|
<span class="cp-128" style="display: inline-block; vertical-align: top;"></span>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-128').colorpicker({
|
||
|
|
parts: ['map', 'bar'],
|
||
|
|
layout: {
|
||
|
|
map: [0, 0, 1, 1], // Left, Top, Width, Height (in table cells).
|
||
|
|
bar: [1, 0, 1, 1]
|
||
|
|
},
|
||
|
|
part: {
|
||
|
|
map: { size: 128 },
|
||
|
|
bar: { size: 128 }
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-customcolor">
|
||
|
|
<h2>Custom color format</h2>
|
||
|
|
<input type="text" size="80" class="cp-customcolor" value="0;83.782958984375;83.782958984375;4.736328125" style="display: inline-block; vertical-align: top;"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$.colorpicker.parsers['csv-cmyk'] = function (color) {
|
||
|
|
var m = /^(\d+(?:\.\d+)?)\s*[,;]\s*(\d+(?:\.\d+)?)\s*[,;]\s*(\d+(?:\.\d+)?)\s*[,;]\s*(\d+(?:\.\d+)?)/.exec(color);
|
||
|
|
if (m) {
|
||
|
|
return (new $.colorpicker.Color()).setCMYK(
|
||
|
|
m[1] / 100,
|
||
|
|
m[2] / 100,
|
||
|
|
m[3] / 100,
|
||
|
|
m[4] / 100
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
$('.cp-customcolor').colorpicker({
|
||
|
|
showOn: 'both',
|
||
|
|
colorFormat: ['cp,mp,yp,kp'],
|
||
|
|
buttonImageOnly: true,
|
||
|
|
buttonColorize: true,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-position">
|
||
|
|
<h2>Centered using position option</h2>
|
||
|
|
<input type="text" class="cp-position"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-position').colorpicker({
|
||
|
|
position: {
|
||
|
|
my: 'center',
|
||
|
|
at: 'center',
|
||
|
|
of: window
|
||
|
|
},
|
||
|
|
modal: true
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-disable">
|
||
|
|
<h2>Disable/enable</h2>
|
||
|
|
<label for="toggle-cp-disable">Enabled: <input type="checkbox" id="toggle-cp-disable"/></label>
|
||
|
|
<br/>
|
||
|
|
Disabled by default:
|
||
|
|
<input type="text" class="cp-disable" value="186aa7" disabled="disabled"/>
|
||
|
|
<br/>
|
||
|
|
Disabled using option:
|
||
|
|
<input type="text" class="cp-disable-option" value="186aa7"/>
|
||
|
|
<br/>
|
||
|
|
<span class="cp-disable-option" style="display: inline-block; vertical-align: top;"></span>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-disable').colorpicker({
|
||
|
|
showOn: 'both',
|
||
|
|
buttonColorize: true
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.cp-disable-option').colorpicker({
|
||
|
|
parts: 'full',
|
||
|
|
// parts: ['header', 'preview', 'hex', 'rgbslider', 'memory', 'swatches', 'swatchesswitcher', 'footer'],
|
||
|
|
// layout: {
|
||
|
|
// preview: [0, 0, 1, 1],
|
||
|
|
// hex: [1, 0, 1, 1],
|
||
|
|
// rgbslider: [0, 1, 2, 1],
|
||
|
|
// memory: [0, 2, 2, 1],
|
||
|
|
// swatchesswitcher: [2, 0, 1, 1],
|
||
|
|
// swatches: [2, 1, 1, 2]
|
||
|
|
// },
|
||
|
|
showOn: 'both',
|
||
|
|
disabled: true,
|
||
|
|
buttonColorize: true,
|
||
|
|
alpha: true
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#toggle-cp-disable').click(function() {
|
||
|
|
$('.cp-disable, .cp-disable-option').colorpicker($(this).is(':checked') ? 'enable' : 'disable');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tab-noanim">
|
||
|
|
<h2>No show animation</h2>
|
||
|
|
<input type="text" class="cp-noanim" value="8e44ad"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.cp-noanim').colorpicker({
|
||
|
|
showAnim: ''
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|