DHTMLX系列组件的使用(4)——dhtmlx颜色选择器应用

1. 初始化

首先将 dhtmlxSuit 中的 dhtmlxColorPicker 文件夹下的 codebase 文件夹整个复制到你的项目目录下，然后创建HTML文件。

1.1 引入 JS 和 CSS 文件

<link rel="stylesheet" type="text/css" href="codebase/dhtmlxcolorpicker.css" />
<script type="text/javascript" src="codebase/dhtmlxcolorpicker.js"></script>
<script type="text/javascript" src="codebase/dhtmlxcommon.js"></script>

 

1.2 定义用于显示颜色选择器的容器

<div id="colorPicker" style="position:absolute;top:150;left:200;"></div>

 

1.3 定义用于显示颜色选择器的 JS 函数

<script type="text/javascript">
function init() {
    var myCP1 = new dhtmlXColorPicker("colorPicker");
    myCP1.setImagePath("codebase/imgs/");
    myCP1.init();
}
</script>

 

1.4 效果预览

2. 基本设置

// cp is an object of dhtmlXColorPicker
cp.setPosition(x,y);

cp.setColor(“#RRGGBB”);
cp.setColor([R,G,B]);

cp.hide();
cp.show();

var obj = cp.getSelectedColor(); // obj is an object of array

说明：设置颜色时，如果用数组形式进行设置，则 [R, G, B] 中的值应是 0 ~ 255 之间的数值。另外，getSelectedColor 函数返回值是一个数组，各个元素值如下：

 

3. setOnSelectHandler 事件

<script type="text/javascript">
function init() {
    var myCP1 = new dhtmlXColorPicker("colorPicker");
myCP1.setImagePath("codebase/imgs/");
myCP1. setOnSelectHandler(setColor);
    myCP1.init();
}

function setColor(color) {
	// do something with the parameter ‘color’
}
</script>

 

 

-----------------------------------------------------

Stay Hungry, Stay Foolish!

Afa

May 24th, 2010

-----------------------------------------------------