Blame | Letzte Änderung | Log anzeigen | RSS feed
<!doctype html><html><head><title>jQuery MiniColors</title><meta charset="utf-8"><!-- jQuery --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><!-- MiniColors --><script src="jquery.minicolors.js"></script><link rel="stylesheet" href="jquery.minicolors.css"><style>body {font: 16px sans-serif;line-height: 1.8;padding: 0 40px;margin-bottom: 200px;}a {color: #08c;text-decoration: none;}a:hover {text-decoration: underline;}.form-group {margin: 20px 0;}label {color: #888;}</style><script>$(document).ready(function(){$('.demo').each(function(){//// Dear reader, it's actually very easy to initialize MiniColors. For example://// $(selector).minicolors();//// The way I've done it below is just for the demo, so don't get confused// by it. Also, data- attributes aren't supported at this time. Again,// they're only used for the purposes of this demo.//$(this).minicolors({control: $(this).attr('data-control') || 'hue',defaultValue: $(this).attr('data-defaultValue') || '',inline: $(this).attr('data-inline') === 'true',letterCase: $(this).attr('data-letterCase') || 'lowercase',opacity: $(this).attr('data-opacity'),position: $(this).attr('data-position') || 'bottom left',change: function(hex, opacity){var log;try{log = hex ? hex : 'transparent';if (opacity) log += ', ' + opacity;console.log(log);}catch (e){}},theme: 'default'});});});</script></head><body><h1>MiniColors Demo (without Bootstrap)</h1><p><a href="index.html">« Back to the Bootstrap demo</a></p><!-- Control Types --><h3>Control Types</h3><div class="form-group"><label for="hue-demo">Hue (default)</label><input type="text" id="hue-demo" class="demo" data-control="hue" value="#ff6161"> </div><div class="form-group"><label for="saturation-demo">Saturation</label><input type="text" id="saturation-demo" class="demo" data-control="saturation" value="#0088cc"> </div><div class="form-group"><label for="brightness-demo">Brightness</label><input type="text" id="brightness-demo" class="demo" data-control="brightness" value="#00ffff"> </div><div class="form-group"><label for="wheel-demo">Wheel</label><input type="text" id="wheel-demo" class="demo" data-control="wheel" value="#ff99ee"> </div><!-- Input modes --><h3>Input Modes</h3><div class="form-group"><label for="text-field">Text field</label><br><input type="text" id="text-field" class="demo" value="#70c24a"> </div><div class="form-group"><label for="hidden-input">Hidden Input</label><br><input type="hidden" id="hidden-input" class="demo" value="#db913d"> </div><div class="form-group"><label for="inline">Inline</label><br><input type="text" id="inline" class="demo" data-inline="true" value="#4fc8db"> </div><!-- Positions --><h3>Positions</h3><div class="form-group"><label for="position-bottom-left">bottom left (default)</label><input type="text" id="position-bottom-left" class="demo" data-position="bottom left" value="#0088cc"> </div><div class="form-group"><label for="position-top-left">top left</label><input type="text" id="position-top-left" class="demo" data-position="top left" value="#0088cc"> </div><div class="form-group"><label for="position-bottom-right">bottom right</label><input type="text" id="position-bottom-right" class="demo" data-position="bottom right" value="#0088cc"> </div><div class="form-group"><label for="position-top-right">top right</label><input type="text" id="position-top-right" class="demo" data-position="top right" value="#0088cc"> </div><!-- and more --><h3>…and more!</h3><div class="form-group"><label for="opacity">Opacity</label><br><input type="text" id="opacity" class="demo" data-opacity=".5" value="#766fa8"> </div><div class="form-group"><label for="default-value">Default Value</label><br><input type="text" id="default-value" class="demo" data-defaultValue="#ff6600"> </div><div class="form-group"><label for="letter-case">Letter Case</label><br><input type="text" id="letter-case" class="demo" data-letterCase="uppercase"> </div></body></html>