
仿微软Office 2010颜色拾取器jquery插件

代码简介
evol.colorpicker是一款基于jqueryUI的仿微软Office 2010颜色拾取器jquery插件。该颜色拾取器插件提供多种颜色调色板,支持透明颜色,可通过jqueryui来更换主题,非常实用。
浏览器兼容
Chrome、 Opera、 Safari、Firefox、IE8+
使用方法
1.引入文件
在页面中引入jquery、jquery-ui和evol-colorpicker相关文件。
=" data-ke-src="js>
="" <="" div>
<="" p>
2.html
使用一个元素来作为颜色拾取器的容器。
style="width:100px;" id="mycolor" />
在插件初始化之后,上面的代码将被包装为下面的样子:
3.初始化插件
在页面DOM元素加载完毕之后,可以通过colorpicker()方法来初始化该颜色拾取器插件。
4.配置参数
evol.colorpicker颜色拾取器插件的可用配置参数有:
1、color(String):用于设置颜色值。默认值为null。
});
3、displayIndicator(Boolean):是否在调色板中,鼠标hover或点击时显示颜色值。默认值为true。
});
4、hideButton(Boolean):当将颜色拾取器绑定到一个文本框时,在文本框的右侧会显示一个按钮,如果不想要这个按钮,可以将该参数设置为false。
$("#mycolor").colorpicker({
hideButton:true
});
|
5、history(Boolean):是否保存颜色选择的历史,最多可以保存28层。默认为true。
});
evol.colorpicker颜色拾取器插件的可用的方法有:
1、clear():清空颜色值。
$("#mycolor").colorpicker("clear");
2、enable():使颜色拾取器可用。
$("#mycolor").colorpicker("enable");
3、disable():禁用颜色拾取器
$("#mycolor").colorpicker("disable");
4、isDisabled():查看颜色拾取器的状态。
$("#mycolor").colorpicker("isDisabled");
5、val([color]):设置或获取颜色拾取器的值。
$("#mycolor").colorpicker("val","#d0d0d0");
6、showPalette():显示调色板。
$("#mycolor").colorpicker("showPalette");
7、hidePalette():隐藏调色板
$("#mycolor").colorpicker("hidePalette");
|
6.事件
evol.colorpicker颜色拾取器插件的可用的事件有:
1、change.color: 当颜色被选择时触发。