Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

150 lines (114 sloc) 4.494 kB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery miniColors</title>
<style type="text/css">
BODY {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 1.5;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.miniColors.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.miniColors.css" />
<script type="text/javascript">
$(document).ready( function() {
//
// Enabling miniColors
//
$(".color-picker").miniColors({
letterCase: 'uppercase',
change: function(hex, rgb) {
logData(hex, rgb);
}
});
//
// Only for the demo
//
function logData(hex, rgb) {
$("#console").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />');
}
$("#disable").click( function() {
$("#console").prepend('disable<br />');
$(".color-picker").miniColors('disabled', true);
$("#disable").prop('disabled', true);
$("#enable").prop('disabled', false);
});
$("#enable").click( function() {
$("#console").prepend('enable<br />');
$(".color-picker").miniColors('disabled', false);
$("#disable").prop('disabled', false);
$("#enable").prop('disabled', true);
});
$("#makeReadonly").click( function() {
$("#console").prepend('readonly = true<br />');
$(".color-picker").miniColors('readonly', true);
$("#unmakeReadonly").prop('disabled', false);
$("#makeReadonly").prop('disabled', true);
});
$("#unmakeReadonly").click( function() {
$("#console").prepend('readonly = false<br />');
$(".color-picker").miniColors('readonly', false);
$("#unmakeReadonly").prop('disabled', true);
$("#makeReadonly").prop('disabled', false);
});
$("#destroy").click( function() {
$("#console").prepend('destroy<br />');
$(".color-picker").miniColors('destroy');
$("INPUT[type=button]:not(#create)").prop('disabled', true);
$("#destroy").prop('disabled', true);
$("#create").prop('disabled', false);
});
$("#create").click( function() {
$("#console").prepend('create<br />');
$(".color-picker").miniColors({
letterCase: 'uppercase',
change: function(hex, rgb) {
logData(hex, rgb);
}
});
$("#makeReadonly, #disable, #destroy, #randomize").prop('disabled', false);
$("#destroy").prop('disabled', false);
$("#create").prop('disabled', true);
});
$("#randomize").click( function() {
$(".color-picker").miniColors('value', '#' + Math.floor(Math.random() * 16777215).toString(16));
});
});
</script>
</head>
<body>
<h1>jQuery miniColors</h1>
<p>
A miniature color selector for input elements.
</p>
<div id="console" style="width: 500px; float: right; color: #FFF; background: #000; font: 12px monospace; padding: 1em; margin: 1em 0; height: 350px; overflow: auto;"></div>
<p>
Default<br /><input type="text" name="color1" class="color-picker" size="6" autocomplete="on" maxlength="10" />
</p>
<p>
Black theme (set class=&quot;black&quot; on the input element)<br />
<input type="text" name="color2" class="color-picker black" size="6" />
</p>
<p>
Preset value (set value attribute on the input element)<br />
<input type="text" name="color3" class="color-picker" size="6" value="#abCdeF" />
</p>
<p>
Attached to a hidden input<br />
<input type="hidden" name="color4" class="color-picker" size="6" />
</p>
<p style="margin-top: 50px;">
Select an action to apply to all of the controls on this page:
<br />
<input type="button" id="makeReadonly" value="Read-only" />
<input type="button" id="unmakeReadonly" value="Not Read-only" disabled="disabled" /><br />
<input type="button" id="disable" value="Disable" />
<input type="button" id="enable" value="Enable" disabled="disabled" /><br />
<input type="button" id="destroy" value="Destroy" />
<input type="button" id="create" value="Create" disabled="disabled" /><br />
<input type="button" id="randomize" value="Random Color" />
</p>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.