在最近的一个项目需求中，需要一个圆角按钮而不是标准的方形按钮。为了实现这个功能，进行了一系列的研究和编码。
将使用ColorPicker插件来完成这个任务。让开始编码吧。
首先，需要引入jQuery和ColorPicker插件的引用。需要以下资源：
<script src=
"
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
type=
"
text/javascript"
charset=
"
utf-8"
></script>
<script src=
"
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.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>
<link rel=
"
stylesheet"
type=
"
text/css"
href=
"
http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css"
>
<link href=
"
css/evol.colorpicker.css"
rel=
"
stylesheet"
type=
"
text/css"
>
可以使用在线的googleapi链接，或者从jQuery官方网站下载并使用。对于ColorPicker，从GitHub源代码下载文件并在项目中使用。根据代码，有一个js文件夹，其中包含evol.colorpicker.min.js，还有一个css文件夹，其中包含evol.colorpicker.css。请确保文件路径正确，否则它将无法工作。
只需添加一个HTML input标签的文本框。
<input type=
"
text"
id=
"
mycolor"
/>
当文档加载完成后，初始化颜色选择器。
$(document).ready(function () {
// 初始化颜色选择器
$("#mycolor").colorpicker({
color: "#ff0000"
});
});
现在，如果点击文本框或旁边的“方形按钮”，它将显示一个选择颜色的小部件。
当检查显示颜色选择器和文本框的区域时，将得到以下div。
<div style=
"
width:201px;"
>
<input type=
"
text"
id=
"
mycolor"
class
= "
colorPicker evo-cp0"
>
<div
class
= "
evo-pointer evo-colorind"
style=
"
background-color:#ff0000"
>
</div
>
</div
>
所以，它用一个div包围了input，并且在其中添加了另一个div（见高亮部分），这就是按钮。现在只需要将其更改为圆形。让在下一步中探索。
让为具有类evo-pointer evo-colorind的按钮div添加CSS属性border-radius。
$(document).ready(function () {
// 初始化颜色选择器
$("#mycolor").colorpicker({
color: "#ff0000"
});
// 为包含按钮的div添加圆角
$(".evo-pointer").css("border-radius", "15px");
});
HTML更改为以下内容，添加了border-radius: 15px;到style中。
<div style=
"
width:201px;"
>
<input type=
"
text"
id=
"
mycolor"
class
= "
colorPicker evo-cp0"
>
<div
class
= "
evo-pointer evo-colorind"
style=
"
border-radius: 15px; background-color: rgb(255, 0, 0);"
>
</div
>
</div
>
哇！完成了。看下面的图片。
完成了吗？还没有。等等。让测试一下。如果从选择器中选择任何颜色，将看到按钮再次变回方形。原因是每次从选择器中选择任何颜色时，按钮div都会被动态分配。HTML回到了原始状态。
<div style=
"
width:201px;"
>
<input type=
"
text"
id=
"
mycolor"
class
= "
colorPicker evo-cp0"
>
<div
class
= "
evo-pointer evo-colorind"
style=
"
background-color:#f79646"
>
</div
>
</div
>
现在缺少border-radius: 15px;。
看看下面的gif，按钮如何再次变回方形。
那么，让处理更改颜色事件，以再次将按钮的形状变为圆形。
$(document).ready(function () {
// 初始化颜色选择器
$("#mycolor").colorpicker({
color: "#ff0000"
});
// 为包含按钮的div添加圆角
$(".evo-pointer").css("border-radius", "15px");
// 在颜色选择器更改颜色事件中再次设置圆角
$(".colorPicker").on("change.color", function (event, color) {
$(this).next().css("border-radius", "15px");
});
});
为颜色选择器文本框的下一个元素分配了CSS属性，即按钮。
[演示] 圆角颜色选择器按钮