文章目录

jquery颜色选择器 小巧却又高大上的插件

最近在改公司网站的时候,有这样一个需求。

就是要给导航栏上的每个导航上边框加上不同的颜色。

原本想的是在css里面写几个color1、color2……

然后在导航栏分别加上css,后来一想这样有点不好,就是万一菜单多了,每次都要去修改css文件。

于是就想到了使用jquery颜色选择器,在网上找了一下还真找到了一个,非常好用。

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这个插件小巧轻便,但是用起来却是高大上的,值得推荐。

本文网址:http://www.santii.com/article/219.html

数据更新时间:2019-09-18