HJY
/
gxwss


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
							<!doctype html>
<html>
<head>
	<title>jQuery MiniColors</title>
	<meta charset="utf-8">
	
	<!-- jQuery -->
	<script src="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>
	
	<div class="form-group">
		<input type="text" id="text-field" class="demo" value="#70c24a">
	</div>

	
</body>
</html>