You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

72 lines
2.9 KiB
HTML

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

<!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';
},
// 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>