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.

46 lines
1.7 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="Content-Language" content="en">
<link href="../index.css" media="all" rel="stylesheet" type="text/css" />
<link href="jsColor.css" media="all" rel="stylesheet" type="text/css" />
<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 javaScript implememntation example">
<title>colorPicker javaScript implementation example</title>
</head>
<body>
<h1>Simple javaScript implementation</h1>
Calling the colorPicker on all inputs with the calssName 'color': <pre>jsColorPicker('input.color');</pre>
<p>
<input class="color" value="#B6BD79" />
<input class="color" value="rgb(162, 63, 3)" />
<input class="color" value="hsla(32, 95%, 23%, 0.9)" />
</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="jsColor.js"></script>
<!-- <script type="text/javascript" src="jsColorPicker.min.js"></script> -->
<script type="text/javascript">
var colors = jsColorPicker('input.color', {
customBG: '#222',
readOnly: true,
// patch: false,
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';
}
});
</script>
</body>
</html>