在Web开发中，为用户提供一个直观的颜色选择器是一个常见的需求。jQuery UI提供了一个强大的颜色选择器插件，它不仅支持基本的颜色选择功能，还提供了丰富的配置选项和主题定制能力。本文将详细介绍如何使用这个插件，包括加载、配置和使用这个插件的步骤。
jQuery UI颜色选择器插件是一个基于jQuery UI框架开发的控件，它允许用户通过一个类似于Microsoft Office 2010的颜色选择器来选择颜色。这个插件支持内联显示或作为文本框的弹出窗口。它是一个完整的jQuery UI控件，支持多种配置和主题。
要使用这个颜色选择器插件，首先需要加载jQuery、jQuery UI以及插件本身的代码。以下是加载这些库的HTML代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
插件需要一个jQuery UI主题以及它自己的基础CSS文件"evol.colorpicker.css"。这里以"ui-lightness"主题为例：
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css"/>
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css"/>
接下来，将插件绑定到一个现有的标签上：
<script type="text/javascript">
$(document).ready(function() {
$("#mycolor").colorpicker();
});
</script>
<input style="width:100px;" id="mycolor"/>
这将把颜色选择器包装在一个"holder"
<div style="width:128px;">
<input style="width:100px;" id="mycolor" class="colorPicker evo-cp0"/>
<div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>
使用相同的语法，插件也可以在
evol.colorpicker提供了多种选项来自定义其行为：
color (String)：用于设置默认颜色值。
$("#mycolor").colorpicker({
color: "#ffffff"
});
默认值为null。
defaultPalette (String)：用于设置默认颜色调色板。可能的值是"theme"或"web"。
$("#mycolor").colorpicker({
defaultPalette: 'web'
});
默认值为"theme"。
displayIndicator (Boolean)：用于在调色板内悬停和点击时显示颜色值。
$("#mycolor").colorpicker({
displayIndicator: false
});
默认值为true。
hideButton (Boolean)：防止在颜色选择器绑定的文本框旁边添加颜色按钮。
$("#mycolor").colorpicker({
hideButton: true
});
默认值为false。
history (Boolean)：用于跟踪选择历史（在所有颜色选择器实例之间共享）。
$("#mycolor").colorpicker({
history: false
});
默认值为true。
initialHistory (Array of strings)：用于提供颜色选择历史。颜色以十六进制颜色值的字符串形式提供。
$("#mycolor").colorpicker({
initialHistory: ["#ff0000", "#00ff00", "#0000ff"]
});
默认值为null。
showOn (String)：当字段获得焦点时自动显示颜色选择器（"focus"），仅在按钮点击时显示（"button"），或在任一事件发生时显示（"both"）。此选项仅在颜色选择器实例化在文本框上时生效。
$("#mycolor").colorpicker({
showOn: "button"
});
默认值为"both"。
strings (String)：用于翻译控件。它是一个逗号分隔的所有UI中使用的标签列表。
$("#mycolor").colorpicker({
strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs"
});
默认值为"Theme Colors,Standard Colors,Web Colors,Theme Colors"。
transparentColor (Boolean)：允许选择"透明颜色"。它的十六进制值为"#0000ffff"。
$("#mycolor").colorpicker({
transparentColor: true
});
默认值为false。
change.color：当选择颜色时触发此事件。
$("#mycolor").on("change.color", function(event, color){
$("#title").attr("style", "background-color:" + color);
});
mouseover.color：当鼠标悬停在调色板的颜色框上时触发此事件。
$("#mycolor").on("mouseover.color", function(event, color){
$("#title").attr("style", "background-color:" + color);
});
clear()：清除颜色值（如果打开了弹出调色板，则关闭它）。
$("#mycolor").colorpicker("clear");
enable()：获取当前选择的颜色值（以字符串形式返回）。
$("#mycolor").colorpicker("enable");
disable()：禁用颜色选择器。
$("#mycolor").colorpicker("disable");
isDisabled()：检查颜色选择器是否被禁用。
var disabled = $("#mycolor").colorpicker("isDisabled");
val([color])：获取或设置当前选择的颜色值（以字符串形式，例如"#d0d0d0"）。
var color = $("#mycolor").colorpicker("val");
$("#mycolor").colorpicker("val", "#d0d0d0");
showPalette()：显示调色板（当使用插件作为弹出窗口时）。
$("#mycolor").colorpicker("showPalette");
hidePalette()：隐藏调色板（当使用插件作为弹出窗口时）。
$("#mycolor").colorpicker("hidePalette");
evol.colorpicker可以像任何jQuery UI控件一样容易地进行主题定制，使用jQuery UI主题或自己的自定义主题，使用Themeroller制作。
支持的主题包括：ui-lightness、ui-darkness、le-frog等。
颜色选择器插件可以在GitHub上下载或fork。也可以使用命令行使用NPM或Bower进行安装。
npm install evol-colorpicker
bower install evol-colorpicker