jQuery 颜色选择器,16进制颜色选择

简单 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>