|
Written by LXR
|
|
Monday, 17 September 2007 21:37 |
 - 支持
- 本插件需要jquery 1.1.2以上版本支持。本插件已在以下浏览测试通过：
- - IE 6.x, IE 7
- - Firefox 1.5+
- - Opera 9.0
- 支持
- 本插件需要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
|
Show/Hide comments
Show/Hide comment form
