最后的效果图如下：（demo下载链接）
完整实例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/colpick.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/colpick.js"></script>
<style>
.ColorSlect {
width:80px;
height:30px;
font-size:14px;
text-align:left;
padding-left: 5px;
border: solid 1px #80b3ff;
border-right-width: 80px;
border-right-color:#80b3ff;
border-radius: 4px;
outline-color: #5d90d6;
}
</style>
<script>
$(function(){
var color_value ='cc3d33';
$('#PickerID').val('# ' + color_value);
$('#PickerID').css('border-right-color','#'+color_value);
$('#PickerID').colpick({
layout:'hex',
colorScheme:'dark',
color:color_value,
submit:0,
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('border-right-color','#'+hex);
if(!bySetColor) $(el).val('# '+hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
});
</script>
</head>
<body>
<div>
<input type="text" id="PickerID" class = "ColorSlect">
</div>
</body>
</html>
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
