mirror of
https://github.com/PitPik/colorPicker.git
synced 2025-06-28 13:41:02 -06:00
0d55e45be6
- fixed positioning (appendTo different then document.body) - added method color2text() - minor optimizations
73 lines
2.9 KiB
HTML
73 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset='utf-8'>
|
||
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
|
||
<meta http-equiv="Content-Language" content="en">
|
||
|
||
<link href="../index.css" media="all" rel="stylesheet" type="text/css" />
|
||
<link href="jqColor.css" media="all" rel="stylesheet" type="text/css" />
|
||
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
|
||
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
|
||
|
||
<meta name="Keywords" content="ColorPicker, color picker, color chooser, color, picker, javaScript, java script, colors, rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, grayscale, contrast, readability, realtime" />
|
||
<meta name="author" content="Peter Dematté" />
|
||
<meta http-equiv="language" content="en" />
|
||
<meta name="description" content="colorPicker - Advanced javaScript color picker and color conversion / calculation (rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, ...); this is a jQuery implememntation example">
|
||
<title>colorPicker jQuery implementation example</title>
|
||
</head>
|
||
|
||
<body>
|
||
<h1>Simple jQuery implementation</h1>
|
||
Calling the colorPicker on all inputs with the calssName 'color': <pre>$('input.color').colorPicker();</pre>
|
||
<p class="the-paragraph">
|
||
<input class="color" value="#B6BD79" />
|
||
<input class="color" value="rgb(162, 63, 3)" />
|
||
<input class="color" value="hsl(32, 95%, 23%)" />
|
||
</p>
|
||
<!-- <button onclick="$colors.colorPicker('destroy')">destroy</button> -->
|
||
<script type="text/javascript" src="../colors.js"></script>
|
||
<script type="text/javascript" src="../colorPicker.data.js"></script>
|
||
<script type="text/javascript" src="../colorPicker.js"></script>
|
||
|
||
<!-- <script type="text/javascript" src="../color.all.min.js"></script> -->
|
||
|
||
<script type="text/javascript" src="jqColor.js"></script>
|
||
|
||
<!-- <script type="text/javascript" src="jQueryColorPicker.min.js"></script> -->
|
||
|
||
<script type="text/javascript">
|
||
var memoryColors = [
|
||
{r: 100, g: 200, b: 10, a: 0.6},
|
||
{r: 80, g: 100, b: 50, a: 0.9},
|
||
{r: 70, g: 80, b: 10, a: 0.9},
|
||
{r: 20, g: 200, b: 60, a: 0.9},
|
||
{r: 88, g: 0, b: 30, a: 0.4},
|
||
{r: 100, g: 0, b: 100, a: 0.6},
|
||
{r: 200, g: 0, b: 0},
|
||
{r: 200, g: 30, b: 100}
|
||
],
|
||
$myColorPicker = $('input.color').colorPicker({
|
||
customBG: '#222',
|
||
readOnly: true,
|
||
init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
|
||
elm.style.backgroundColor = elm.value;
|
||
elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
|
||
},
|
||
// appendTo: document.querySelector('.the-paragraph')
|
||
// renderCallback: function(colors, mode) {
|
||
// console.log(mode);
|
||
// }
|
||
// memoryColors: memoryColors,
|
||
// actionCallback: function(event, type) {
|
||
// if (type === 'toMemory') {
|
||
// // $myColorPicker.renderMemory(memoryColors);
|
||
// }
|
||
// }
|
||
}).each(function(idx, elm) {
|
||
// $(elm).css({'background-color': this.value})
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|