Permalink
9bcb33b May 2, 2017
642 lines (577 sloc) 19.9 KB
<!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 &lt;input&gt;</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 &lt;input&gt; example, without any options</h2>
<input type="text" class="cp-basic" value="fe9810"/>
<script>
$(function() {
});
</script>
</div>
<div id="tab-element">
<h2>Basic element (&lt;span&gt;> 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, color) {
var line = '<div>#'+(++count)+' '+label+': '+message+'</div>';
var 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 &lt;input&gt; 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 (&lt;em&gt;)</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>