Файл: documentation/examples/getting-color.html
Строк: 56
<?php
<html>
<head>
<script type="text/javascript" src="../assets/jquery.js"></script>
<script type="text/javascript" src="../../jcolor.js"></script>
<link rel="stylesheet" type="text/css" href="../../jcolor.css">
<style type="text/css">
body { font-family: monospace; }
</style>
</head>
<body>
<div class="color-picker"></div><br><br>
<button class="get-color-btn">Get current color!</button>
<div class="outputs" style="margin-top: 1em;">
<div class="newcolor-hlsa-css"><b>CSS HSLA:</b> <span></span></div>
<div class="newcolor-rgb-hex"><b>Hexadecimal RGB:</b> <span></span></div>
<div class="newcolor-rgba-object"><b>Object RGBA:</b> <span></span></div>
</div>
<script>
var myColorpicker = $('.color-picker').colorpicker({
color: 'hsla(192, 78.89%, 40.56%, 0.73)',
});
$('.get-color-btn').on('click', function () {
// Get the current color from the color picker and update things.
// We can use an existing reference to the jColor instance...
$('.newcolor-hlsa-css span').html(myColorpicker.toCssString());
// ... or get a new reference by calling the .colorpicker() function on the right element
$('.newcolor-rgb-hex span').html($('.color-picker').colorpicker().toString('rgb'));
$('.newcolor-rgba-object span').html(
prettyPrint($('.color-picker').colorpicker().toObject('rgba')));
// Set page background color to the colorpicker's color
$('body').css('background', myColorpicker.toCssString());
});
function prettyPrint(colorObj) {
for (var key in colorObj) { colorObj[key] = colorObj[key].toFixed(2); }
return JSON.stringify(colorObj).replace(/"/g, '');
}
</script>
</body>
</html>
?>