极客教程如何使用jQuery UI设计颜色选择器
ColorPicker是一个jQuery UI框架工具或部件，它提供了一个调色板下拉框，让用户为一些彩色的工作选择颜色。它通常连接到一个文本框，这样用户从调色板上选择的颜色就可以转移到文本框中。下拉框可以是HSV（色调、饱和度、数值）选择器或预定义的RGB调色板，如图所示。这是一个非常有用的用户界面工具，因为另一端的用户不需要记住或知道那些困难的颜色代码。这个工具可以理解为一个图像或文本编辑器。
使用jQuery UI对ColorPicker进行简化：
如果你想在网站上附加调色板下拉框，那么你需要JqueryUI Colorpicker库，并在你的PHP或HTML代码中包含所需的JavaScript（jquery.colorpicker.js）和CSS（jquery.colorpicker.css）依赖项，以显示任何jQuery UI小工具。我们必须使用jQuery和jQuery UI库和样式。你可以根据你的风格要求来改变这些文件。在这篇文章中，我们将在一个HTML网页中创建颜色选择器的结构。在HTML网页中，提供用户输入控件供用户选择。用户输入控件通过jQuery代码连接到jQuery UI的颜色选择器部件。下面是完整的实现。
创建结构：在这一节中，我们将创建基本的页面结构，并附上将被使用的所需链接。
- jQuery用户界面的链接。
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script>
<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />
- HTML代码。这个例子显示了一个简单的颜色选择器弹出窗口。如上所述，下载的颜色选择器的依赖文件（CSS和JS）被保存在colorpicker-master文件夹中。请确保开发者在代码中根据自己的localhost路径给出正确的路径。
<!DOCTYPE html>
<html>
<head>
<title>jQueryUI | Color Picker</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<b>jQueryUI | Color Picker </b>
<div class="height"></div>
<br/>
<body>
Pick a color :
<input type="text" id="my_color_picker">
</body>
</body>
</html>
设计结构：在上一节中，我们已经创建了使用拾色器小部件的基本代码。在这一节中，我们将设计结构，并将拾色器部件附加到我们的输入控件上，在这里我们将设置选项来覆盖拾色器插件的默认选项。用你自己的选项设置覆盖默认选项，可以在HTML代码的脚本部分完成。它是以一种灵活的方式设计的，供用户选择他们应用所需的选项。
- 链接到下载的文件。
<script src=”colorpicker-master/jquery.colorpicker.js”></script>
<link href=”colorpicker-master/jquery.colorpicker.css” rel=”stylesheet” type=”text/css” />
- CSS 代码:
<style>
h1 {
color: green;
}
body {
text-align: center;
}
.height {
height: 10px;
}
</style>
- JS 代码:
<script>
(document).ready(function() {
(function() {
$("#my_color_picker").colorpicker();
});
});
</script>
- 代码:
<!DOCTYPE html>
<html>
<head>
<title>jQueryUI | Color Picker</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
</script>
<link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
rel="stylesheet" type="text/css" />
<!-- Include Pre-compiled files from link or
download the files in your localhost folder -->
<script src=
"colorpicker-master/jquery.colorpicker.js">
</script>
<link href=
"colorpicker-master/jquery.colorpicker.css"
rel="stylesheet" type="text/css" />
<style>
h1 {
color: green;
}
body {
text-align: center;
}
.height {
height: 10px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<b>jQueryUI | Color Picker </b>
<div class="height"></div>
<br/>
<body>
Pick a color :
<input type="text" id="my_color_picker">
<script>
(document).ready(function() {
(function() {
$("#my_color_picker").colorpicker();
});
});
</script>
</body>
</body>
</html>
- 输出:
- 管理初始颜色和颜色格式。在显示colorpicker的时候，我们可以管理初始颜色和颜色格式。我们可以在脚本部分使用下面的jQuery代码来得到这个结果。
<script>
(function() {
( '#colorpickerId').colorpicker({
color:'#00FF00',
colorFormat: ['#HEX']
});
});
</script>
- 管理对话框。在显示颜色选择器的时候，如果标题是可见的，并且对话框不是内联的，我们可以管理对话框，使其可以拖动。我们可以在脚本部分使用下面的jQuery代码来得到这个结果。
<script>
(function() {
( '#colorpickerId').colorpicker({
draggable:true,
});
});
</script>
- 管理模态窗口。在显示颜色选择器的同时，我们可以把颜色选择器窗口作为一个模态窗口来管理。我们可以在脚本部分使用下面的jQuery代码来得到这个结果。
<script>
(function() {
( '#colorpickerId').colorpicker({
modal: true,
});
});
</script>
- 管理无、关闭和取消按钮。在显示colorpicker的时候，我们可以管理none, close, and cancel等按钮。我们可以在脚本部分使用下面的jQuery代码来得到这个结果。
<script>
(function() {
( '#colorpickerId').colorpicker({
showNoneButton: true,
showCloseButton: true,
showCancelButton: true,
});
});
</script>