Viên ngọc phương Đông

ruạṛ

<!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>