一款不错的网页颜色选择器，故整理与大家分享

jscolor-1.3.13 官方：http://jscolor.com

1、基本应用

点击选择颜色： 只要设置了class="color" 系统会自动绑定颜色选择器，如果需要修改class请在jscolor基本设置里修改bindClass

<script type="text/javascript" src="jscolor/jscolor.js"></script>
点击选择颜色：<input class="color" value="66ff00">

2、其他配置

可以为空：接受任意颜色：带#符号：带#符号并小写：隐藏滑杆：增加关闭按钮 觉得没必要

<script type="text/javascript" src="jscolor/jscolor.js"></script>
可以为空：<input class="color {required:false}">
接受任意颜色：<input class="color {adjust:false}">
带#符号：<input class="color {hash:true}">
带#符号并小写：<input class="color {hash:true,caps:false}">
隐藏滑杆：<input class="color {slider:false}">
增加关闭按钮<input class="color {pickerClosable:true}">

3、HSV/HVS模式选择

HSV 模式: HVS 模式: 有没有发现两者的区别？看背景图片

<script type="text/javascript" src="jscolor/jscolor.js"></script>
HSV 模式：<input class="color {pickerMode:'HSV'}">
HVS 模式：<input class="color {pickerMode:'HVS'}">

4、弹出位置选择

右边：上边：左边：当然系统会自动判断有没有空间弹出哦，没有空间的话会自动选择弹出位置

<script type="text/javascript" src="jscolor/jscolor.js"></script>
右边：<input class="color {pickerPosition:'right'}">
上边：<input class="color {pickerPosition:'top'}">
左边：<input class="color {pickerPosition:'left'}">

5、边框面板设置

加粗边框：加粗面板：外边框：里边框：面板色：透明面板：

<script type="text/javascript" src="jscolor/jscolor.js"></script>
加粗边框：<input class="color {pickerBorder:3,pickerInset:10}">
加粗面板：<input class="color {pickerFace:20}">
外边框：<input class="color {pickerBorderColor:'red green blue yellow'}">
里边框：<input class="color {pickerInsetColor:'#9F9 #090 #090 #9F9'}">
面板色：<input class="color {pickerFaceColor:'#01BABE'}">
透明面板：<input class="color {pickerFaceColor:'transparent'
,pickerFace:3,pickerBorder:0,pickerInsetColor:'black'}">

6、显示与隐藏面板

用js来控制隐藏与显示

<script type="text/javascript" src="jscolor/jscolor.js"></script>
<input class="color {pickerOnfocus:false}" id="myColor">
<input type="button" value="显示" onmousemove="document.getElementById('myColor').color.showPicker()">
<input type="button" value="隐藏" onmousemove="document.getElementById('myColor').color.hidePicker()">

7、值的获取

改变背景色：

R G B - - - H S V

Choose any color:

<script type="text/javascript" src="jscolor/jscolor.js"></script>
<p id="scscms" style="background-color:">改变背景色：<input class="color"
	onchange="document.getElementById('scscms').style.backgroundColor = '#'+this.color" />
</p>
R<input id="red" size="5">  G<input id="grn" size="5">  B<input id="blu" size="5">  - - -
H<input id="hue" size="5">  S<input id="sat" size="5">  V<input id="val" size="5">
<p> Choose any color: <input class="color" id="myColor" onchange="
	document.getElementById('red').value = this.color.rgb[0]*100 + '%';
	document.getElementById('grn').value = this.color.rgb[1]*100 + '%';
	document.getElementById('blu').value = this.color.rgb[2]*100 + '%';
	document.getElementById('hue').value = this.color.hsv[0]* 60 + '°';
	document.getElementById('sat').value = this.color.hsv[1]*100 + '%';
	document.getElementById('val').value = this.color.hsv[2]*100 + '%';">
</p>

8、设定值

可以默认设定 #ff0000 ff0000 #f00 f00等值

<script type="text/javascript" src="jscolor/jscolor.js"></script>
<input class="color" id="myC" value="#f00">
<input type="submit" value="颜色1"
	onmouseover="document.getElementById('myC').color.fromString('F2C80A')">
<input type="submit" value="颜色2"
	onmouseover="document.getElementById('myC').color.fromRGB(0.8, 1, 0.2)">
<input type="submit" value="颜色3"
	onmouseover="document.getElementById('myC').color.fromHSV(4, 0.8, 0.5)">

9、关联其它节点

传递值：

传递样式：

传递值和样式： 这功能不错

<p>传递值：<input class="color {valueElement:'myValue'}"> <input id="myValue"></p>
<p>传递样式：<input class="color {styleElement:'myStyle'}"> <input id="myStyle"></p>
<p>传递值和样式：<input class="color {valueElement:'myBoth',styleElement:'myBoth'}"> <input id="myBoth"></p>

10、js绑定应用于ajax

<script type="text/javascript" src="jscolor/jscolor.js"></script>
<input id="myField1">
<script type="text/javascript">
var myPicker = new jscolor.color(document.getElementById('myField1'), {})
myPicker.fromString('99FF33');  // 设定默认值
</script>

11、性能测试

一下生成100个选择器测试一下性能

<script type="text/javascript" src="jscolor/jscolor.js"></script>
<input onclick="add()" type="button" value="测试">
<div id="adddiv"></div>
<script type="text/javascript">
function add() {
	var count = 100
		for(var i=0; i<count; i++) {
		var input = document.createElement('INPUT')
		input.style.width = '5em'
		var col = new jscolor.color(input)
		col.fromHSV(6/count*i, 1, 1);
		document.getElementById('adddiv').appendChild(input);
	}
}
</script>

下载地址：http://www.scscms.com/software/2012-3/216101449.html