如何使用jQuery UI设计颜色选择器

ColorPicker是一个jQuery UI框架工具或部件，它提供了一个调色板下拉框，让用户为一些彩色的工作选择颜色。它通常连接到一个文本框，这样用户从调色板上选择的颜色就可以转移到文本框中。下拉框可以是HSV（色调、饱和度、数值）选择器或预定义的RGB调色板，如图所示。这是一个非常有用的用户界面工具，因为另一端的用户不需要记住或知道那些困难的颜色代码。这个工具可以理解为一个图像或文本编辑器。

使用jQuery UI对ColorPicker进行简化：

如何使用jQuery UI设计颜色选择器？

如果你想在网站上附加调色板下拉框，那么你需要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>

输出:

如何使用jQuery UI设计颜色选择器？

管理初始颜色和颜色格式。在显示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>