[MINICOLORS] jquery.minicolors (ok)
https://github.com/claviska/jquery-minicolors
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery MiniColors</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="jquery.minicolors.js"></script>
<link rel="stylesheet" href="jquery.minicolors.css">
<script type="text/javascript">
$(document).ready(function() {
$('.demo').each(function() {
$(this).minicolors({
control: $(this).attr('data-control') || 'hue',
defaultValue: $(this).attr('data-defaultValue') || '',
format: $(this).attr('data-format') || 'hex',
keywords: $(this).attr('data-keywords') || '', // Chưa hiểu thuộc tính này
inline: $(this).attr('data-inline') === 'true', // Chưa hiểu thuộc tính này
letterCase: $(this).attr('data-letterCase') || 'lowercase',
opacity: $(this).attr('data-opacity'),
position: $(this).attr('data-position') || 'bottom',
swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
change: function(value, opacity) {
if (!value) return;
if (opacity) value += ', ' + opacity;
if (typeof console === 'object') {
console.log(value);
}
},
theme: 'bootstrap'
});
});
});
</script>
</head>
<body>
<h3>Control Types</h3>
<div class="well">
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="hue-demo">Hue (default)</label>
<input type="text" id="hue-demo" class="form-control demo" data-control="hue" data-defaultValue="#ff6162" data-format="hex" data-letterCase="uppercase" data-opacity="1" data-position="top" data-swatches="#ef9a9a|#90caf9">
</div>
<div class="form-group">
<label for="saturation-demo">Saturation</label>
<input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc">
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="brightness-demo">Brightness</label>
<input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff">
</div>
<div class="form-group">
<label for="wheel-demo">Wheel</label>
<input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee">
</div>
</div>
</div>
</div>
</body>
</html>Previous========== End [MultiLang] ===========NextjQuery - addClass ACTIVE--> set timeout --> cycle (ok)(online.vinmec.com)
Last updated
