如何使用 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 UI 的链接：

  
  
  

• HTML 代码：此示例显示一个简单的颜色选择器弹出窗口。如上所述，下载的颜色选择器的依赖文件（CSS 和 JS）保存在文件夹colorpicker-master 中。确保开发者在代码中根据自己的localhost路径给出正确的路径。

  
  
    
  
      
  
    
  
      
  GeeksforGeeks
      jQueryUI | Color Picker 
      
  
      
  
    
      
          Pick a color :
          
      
  
    
  
  

设计结构：在上一节中，我们已经创建了使用颜色选择器小部件的基本代码。在本节中，我们将设计结构并将颜色选择器小部件附加到我们的输入控件，我们将在其中设置选项以覆盖颜色选择器插件的默认选项。可以在 HTML 代码的脚本部分使用您自己的选项设置覆盖默认选项。它以灵活的方式设计，供用户选择其应用程序所需的选项。

• 下载文件的链接：

  
  

• CSS 代码：

• JS代码：

         $(document).ready(function() {
             $(function() {
                  $("#my_color_picker").colorpicker();
              });
         });

  最终解决方案：在本节中，我们将结合上述所有部分，并使用 jQuery UI 创建一个 ColorPicker。

• 程序：

    
  
      jQueryUI | Color Picker
    
      
      
      
      
      
    
      
      
      
      
    
      
          h1 {
              color: green;
          }
    
          body {
              text-align: center;
          }
          .height {
              height: 10px;
          }
      
  
    
  
      GeeksforGeeks
      jQueryUI | Color Picker 
      
      
    
      
          Pick a color :
          
    
          
              $(document).ready(function() {
                  $(function() {
                      $("#my_color_picker").colorpicker();
                  });
              });
          
      
  
    

• 输出：

  jQuery UI 颜色选择器库中有更多可用选项，程序员可以在编码时根据自己的要求进行配置。下面只显示了其中的一些。

  • 管理初始颜色和颜色格式：在显示颜色选择器时，我们可以管理初始颜色和颜色格式。我们可以在脚本部分使用以下 jQuery 代码来获取结果。

       $(function() { 
         $( '#colorpickerId').colorpicker({ 
         color:'#00FF00',
         colorFormat: ['#HEX']
      }); 
     });   

  • 管理对话框：在显示颜色选择器时，如果标题可见且对话框不是内联的，我们可以将对话框管理为可拖动的。我们可以在脚本部分使用以下 jQuery 代码来获取结果。

       $(function() { 
         $( '#colorpickerId').colorpicker({ 
         draggable:true,
      }); 
     });   

  • 管理模式窗口：在显示颜色选择器时，我们可以将颜色选择器窗口管理为模式窗口。我们可以在脚本部分使用以下 jQuery 代码来获取结果。

       $(function() { 
         $( '#colorpickerId').colorpicker({ 
         modal: true,
      }); 
     });   

  • 管理无、关闭和取消按钮：在显示颜色选择器时，我们可以管理无、关闭和取消等按钮。我们可以在脚本部分使用以下 jQuery 代码来获取结果。

       $(function() { 
         $( '#colorpickerId').colorpicker({ 
          showNoneButton: true,
         showCloseButton: true,
         showCancelButton: true,
      }); 
     });