|
|
<!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>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione rerum dolore, similique expedita optio quas consectetur, sequi beatae deleniti labore, reprehenderit rem. Aut voluptatibus quas, aliquam nobis tempore, blanditiis adipisci.</p>
|
|
|
<p>Nesciunt expedita, magnam fugiat obcaecati asperiores dolorum non culpa sit commodi dolores sed itaque laudantium ullam, suscipit repellat eveniet voluptatum, sapiente consequatur ipsa! Hic quisquam soluta, harum neque tempore ea!</p>
|
|
|
<p>Aperiam ipsam, reiciendis! Odit atque delectus culpa magni asperiores! Quos quas distinctio aut facilis, labore iste animi aspernatur rem commodi consequuntur repellat laborum explicabo, recusandae libero quisquam voluptates sed quaerat.</p>
|
|
|
<p>Doloribus rerum, illum cupiditate eum molestias nisi deleniti, saepe esse quam soluta vitae qui, consectetur eligendi! Quibusdam nemo doloremque reiciendis eaque expedita pariatur deserunt ea illo molestiae similique, ipsam maiores.</p>
|
|
|
<p>Dolorem corporis id similique modi totam, atque dignissimos, explicabo aperiam facilis labore eos odio veniam debitis iure porro quis rem earum voluptate cum aspernatur assumenda voluptates ullam quae. Maxime, sapiente!</p>
|
|
|
<p>Eum neque dignissimos, fugit amet quidem vitae consectetur quasi deserunt facere excepturi error similique explicabo nemo harum libero voluptas mollitia voluptates illo earum itaque commodi beatae blanditiis corporis? Ratione, vel.</p>
|
|
|
<p>Corporis in repudiandae blanditiis suscipit perferendis unde iste illo distinctio! Qui numquam temporibus eaque sint, debitis magni perferendis, exercitationem sed doloribus vel. Expedita illo, error dolorum dolore maiores ea at?</p>
|
|
|
<p>Eligendi velit adipisci corporis quaerat deserunt consectetur. Dignissimos distinctio, porro sed saepe beatae delectus odio tempore nisi veritatis tenetur eaque recusandae quisquam eum et error culpa quibusdam ut asperiores assumenda?</p>
|
|
|
<p>Debitis quas doloremque vitae eius, aperiam eveniet perspiciatis voluptatum harum fugit, dolor quod sequi, voluptate aspernatur nisi animi eaque! Alias, quia, asperiores ad ut qui optio non at atque delectus.</p>
|
|
|
<p>Nihil suscipit vel assumenda tempore, voluptates eveniet quisquam eos, aliquam porro cumque commodi error eaque quia! Architecto aperiam, ex. Impedit dolorem quo voluptatem voluptatum quis incidunt, voluptatibus quisquam perferendis blanditiis.</p>
|
|
|
<p>Quod, facere suscipit ipsum aliquid nobis recusandae et quam corporis placeat numquam fugiat modi fuga magni quas quo eum quae tenetur dicta nulla ex commodi alias error velit totam! Voluptates.</p>
|
|
|
<p>Dicta quas eveniet, doloremque excepturi rerum dolor optio mollitia, omnis atque vitae et necessitatibus hic officia temporibus autem odio dolorum. Similique accusamus, veniam necessitatibus eum suscipit sed, laudantium omnis nam?</p>
|
|
|
<p>Ratione eligendi incidunt ipsam laudantium mollitia sit itaque, blanditiis, dolores neque saepe atque quia, quas, dolore cumque soluta velit qui repudiandae architecto harum quisquam dignissimos quaerat aliquam explicabo a. Deleniti.</p>
|
|
|
<p>Reiciendis sequi dignissimos harum optio molestiae excepturi expedita tenetur non aperiam ut hic maiores debitis, consequatur placeat maxime quibusdam asperiores facere, illo quidem vitae? Vel consequatur nisi qui! Quibusdam, odit.</p>
|
|
|
<p>Maxime omnis nemo alias provident porro a dolorem, est perspiciatis asperiores. Veniam nostrum, ad deserunt tempora magni similique? Ut et incidunt veritatis sunt possimus voluptate quam quidem doloremque id ipsa!</p>
|
|
|
<p>Aliquam dolore nam suscipit mollitia veritatis maiores excepturi omnis commodi, accusantium impedit deserunt libero iure labore, sequi quibusdam sunt laborum possimus dolores fuga necessitatibus. Dolores maxime ab, facilis natus provident.</p>
|
|
|
<p>Voluptatem fugit eum adipisci rem necessitatibus illo sunt saepe quod a cumque nisi, rerum expedita modi enim possimus maxime, quos totam suscipit consequuntur libero corrupti. Fugit tempore tenetur, neque recusandae.</p>
|
|
|
<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>
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor expedita officia, corporis nisi cumque saepe numquam. Repellendus est, nihil eveniet voluptatum culpa illo, tempore cumque, adipisci architecto voluptatem vel facere.</p>
|
|
|
<p>Cum eligendi, architecto, perspiciatis consequuntur omnis autem nemo culpa facilis alias ipsa eos dolorem est maiores quam minima sunt! Voluptas soluta dolorum perspiciatis at ipsam ipsum minima eaque autem unde!</p>
|
|
|
<p>Voluptate, blanditiis cumque quisquam pariatur saepe quidem, maxime dicta sapiente eos itaque, tempore praesentium repellat impedit. Deserunt perspiciatis eligendi accusantium ea quia culpa minima recusandae a, optio, aliquid placeat. Cum.</p>
|
|
|
<p>Tempore quam sint incidunt non harum quisquam! Omnis tempore, asperiores nulla expedita cumque vitae porro, deleniti obcaecati vero harum quam dolores ab hic ipsam minus, nisi cum. Cumque, magni, obcaecati.</p>
|
|
|
<p>Voluptatum odio ea voluptates accusamus voluptatibus ex vel blanditiis recusandae rem consequuntur animi, nihil facere obcaecati doloremque cumque dolore magni, dolorum, aspernatur sapiente dignissimos illum hic provident non praesentium. Assumenda.</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>
|