Hot!Ajax

jQuery颜色拾取面板插件

Tuesday, 18 September 2007

支持: 本插件需要jquery 1.1.2以上版本支持。本插件已在以下浏览测试通过：; - IE 6.x, IE 7; - Firefox 1.5+; - Opera 9.0

使用方法: $("Selector").colorPicker({
setBackground: true,
setColor: false,
setValue: false,
setText: false,
align: "left"
});; - $("Selector")

表示拾色器显示位置的参照对象; - setBackground

表示将拾取的颜色返回为对象的背景色。; 可以是一个jQuery的选择器字符串，也可以是一个DOM对象，也可以是一个jQuery对象，或者为一个boolean值。; 当为false时表示不将颜色返回为背景色。当为true时表示将背景色返回给触发拾色器的对象。; - setColor

表示将拾取的颜色返回为对象的文本颜色; 具体参数值意义同上; - setValue

表示拾取的颜色值设置为对象的value属性; 具体参数值意义同上; - setText

表示拾取的颜色值设置为对象的Text; 具体参数值意义同上; 具体参数值意义同上; - align

表示色板与触发拾色器的对象的对齐方式。; 可以为"right"或"left"，默认为"left"

示例1：

当点击文本框则显示颜色拾取面板，当选中颜色后变更文本框的值与背景色。

<input type="text" name="text1" readonly="readonly" onclick="$(this).colorPicker()" />

示例2：

当点击文本框则显示颜色拾取面板，只获取选取的颜色值，不更改背景色。

<input type="text" name="text2" readonly="readonly" onclick="

$(this).colorPicker({ setValue:true,setBackground:false })" />

示例3：

点击颜色拾取图标后出现拾色面板，选中后改变该图标的颜色，并将值传递给前一个文本框

<input type="text" name="text3" readonly="readonly" />

<img src="color.gif" width="21" height="18" onclick="

$(this).colorPicker({ setValue:$(this).prev('input') })" align="absmiddle" />

示例4：

点击颜色拾取图标后出现拾色面板，选中后改变该图标的颜色，并将值传递给名称为text4的文本框

<input type="text" name="text4" readonly="readonly" />

<img src="color.gif" 

width="21" height="18" onclick="

$(this).colorPicker({ setValue:'input[@name=text4]' })" align="absmiddle" />

示例5：

点击颜色拾取图标后出现拾色面板，并设置文本框内的文本颜色，并在拾取图标后显示颜色代码

<input type="text" name="text5" value="Color Picker" />

<img src="color.gif" width="21" height="18" onclick="$(this)
.colorPicker({ setColor:'input[@name=text5]',setText:$(this).next('span')[0] })" align="absmiddle" />

<span></span>

版本更新

1.1.0 2007-8-9: - 重新整理了代码，效率比之间版本更高; - 传入的参数方式变化，传入的参数灵活度更高; - 全局事件绑定，当在其它位置点击，拾色板自动关闭
1.0.2 2007-6-19: - 解决了在IE浏览器下拾色面板会被Select表单穿透
1.0.1 2007-6-15: - 增加了目标前景色的参数传入; - 修正了完整版代码在IE6下无法正确运行的BUG

下载：download

Set as favorite

Bookmark

Email This

Comments (0) add comment