jquery-colpick
Version:
Simple lightweight Photoshop-like color picker with touch support.
113 lines (101 loc) • 2.63 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>colpick Color Picker - Usage examples</title>
<link rel="stylesheet" type="text/css" href="//s3.amazonaws.com/mikemai/assets/css/typesettings-1.0-min.css">
<style>
.typesettings code {
white-space: pre;
}
</style>
<link rel="stylesheet" type="text/css" href="../css/colpick.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/colpick.js"></script>
</head>
<body class="typesettings">
<h1>colpick Color Picker</h1>
<h2>Usage examples</h2>
<h3>Button</h3>
<p>
<button id="example-button" value="#00FF00">Show Color Picker</button>
</p>
<p>
<code>$('#example-button').colpick();</code>
</p>
<script>
$('#example-button').colpick();
</script>
<h3>Flat mode and hex layout</h3>
<p>
<div id="example-flat"></div>
</p>
<p>
<code>$('#example-flat').colpick({
color:'123456',
flat:true,
layout:'hex'
});</code>
</p>
<script>
$('#example-flat').colpick({
color:'123456',
flat:true,
layout:'hex'
});
</script>
<h3>Text Input and colorScheme 'dark'</h3>
<p>
<input type="text" id="example-text" value="#0000FF">
</p>
<p>
<code>$('#example-text').colpick({
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).val('#'+hex);
}
});</code>
</p>
<script>
$('#example-text').colpick({
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).val('#'+hex);
}
});
</script>
<h3>HTML5 Color Input</h3>
<p>
<input type="color" id="example-color" value="#FF0000">
</p>
<p>
<code>$('#example-color').colpick({
onSubmit:function(hsb,hex,rgb,el,bySetColor) {
$(el).val('#'+hex);
$(el).colpickHide();
}
});</code>
</p>
<script>
$('#example-color').colpick({
onSubmit:function(hsb,hex,rgb,el,bySetColor) {
$(el).val('#'+hex);
$(el).colpickHide();
}
});
</script>
<h3>Polyfill</h3>
<p>
<input type="color" id="example-polyfill">
</p>
<p>
<code>$('#example-polyfill').colpick({
polyfill:true
});</code>
</p>
<script>
$('#example-polyfill').colpick({
polyfill:true
});
</script>
</body>
</html>