jquery颜色选择器 小巧却又高大上的插件
最近在改公司网站的时候,有这样一个需求。
就是要给导航栏上的每个导航上边框加上不同的颜色。
原本想的是在css里面写几个color1、color2……
然后在导航栏分别加上css,后来一想这样有点不好,就是万一菜单多了,每次都要去修改css文件。
于是就想到了使用jquery颜色选择器,在网上找了一下还真找到了一个,非常好用。
只需使用该插件的colpick.js和colpick.css两个文件。
http://www.jq22.com/demo/colpick-jQuery-Color-Picker-master/js/colpick.js
http://www.jq22.com/demo/colpick-jQuery-Color-Picker-master/css/colpick.css
下面为完整代码,可以自己亲自测试一下。
html代码<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.jq22.com/demo/colpick-jQuery-Color-Picker-master/js/colpick.js"></script>
<link rel="stylesheet" href="http://www.jq22.com/demo/colpick-jQuery-Color-Picker-master/css/colpick.css" type="text/css" />
<style>
#tp_color {
margin:0;
padding:0;
border:1px #ccc solid;
width:70px;
height:20px;
border-right:20px solid green;
line-height:20px;
}
</style>
<body>
<table>
<tr>
<td class="tdlh30" style="width:10%;">选择颜色:</td>
<td>
# <input type="text" id="tp_color" name="tp_color" maxlength="6" />
</td>
</tr>
</table>
<script>
$('#tp_color').colpick({
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor){
$(el).css('border-color','#'+hex);
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
</script>
</body>
</head>
</html>
colpick这个插件小巧轻便,但是用起来却是高大上的,值得推荐。