112 lines
2.5 KiB
HTML
Executable File
112 lines
2.5 KiB
HTML
Executable File
<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> |