简单 RGB、HSB、十六进制颜色选取器 jQuery 插件
没有图像 !只是 JS 和 CSS 文件
非常直观类似 Photoshop 的界面
光明和黑暗很容易自定义 CSS3 外观
28 KB 总由浏览器加载看起来不错甚至在 IE7及工程非常容易实现
效果:
插件下载:http://www.jq22.com/jquery-info367
下载该插件和 colpick.js 和 colpick.css 添加到您的文档的头:
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script src="js/colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/colpick.css" type="text/css"/>
Html:
<div class="color_shil">
<!--重要,不能删除-->
<p id="picker">颜色选择</p>
<input id="color" type="text" value="" placeholder="请选择颜色"/>
</div>
js:
<script>
//颜色选择器
$('#picker').colpick({
layout: 'hex',
submit: 0,
colorScheme: 'dark',
onChange: function(hsb, hex, rgb, el, bySetColor) {
//把颜色存进 id=color 的input里
$("#color").val("#"+hex);
//把边框的颜色 变为选择的颜色
$("#color").css({"border-color":"#"+hex+"","background":"#"+hex+""});
if(!bySetColor) $(el).val(hex);
}
}).keyup(function() {
$(this).colpickSetColor(this.value);
});
//颜色选择器 end
//点击按钮 获取到颜色
$(document).on("click","button",function(){
//获取 id=color 的颜色
var color=$("#color").val();
alert(color)
});
//点击按钮 获取到颜色
</script>