博客

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

  • Post category:jquery

以下是“如何使用jQuery UI设计颜色选择器”的完整攻略。

一、引入jQuery UI库

首先需要在网页中引入jQuery UI库，可以通过CDN引入最新版的jQuery UI，如下所示：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

二、HTML结构

颜色选择器需要一个文本输入框和一个颜色选择器。

<input type="text" id="colorpicker">
<div id="colorpicker-container"></div>

三、调用颜色选择器

接下来，我们就可以通过jQuery代码来调用颜色选择器：

$(function() {
  $('#colorpicker-container').colorpicker({
    change: function(event, ui) {
      $('#colorpicker').val(ui.color.toString());
    }
  });
});

在上面的代码中，我们首先使用jQuery选择器获取了id为colorpicker-container的HTML元素，并调用了colorpicker函数。该函数在jQuery UI中是颜色选择器控件的一个方法。colorpicker函数接受一个配置对象作为参数，其中change参数是指当用户选择颜色后的回调函数。在回调函数中，我们将获取到的颜色值写入到id为colorpicker的文本输入框中。

四、示例说明

示例一

我们假设需要一个颜色选择器，并将所选颜色应用到网页背景颜色中。

<body>
  <input type="text" id="colorpicker">
  <div id="colorpicker-container"></div>

  <script>
  $(function() {
    $('#colorpicker-container').colorpicker({
      change: function(event, ui) {
        $('body').css('background-color', ui.color.toString());
        $('#colorpicker').val(ui.color.toString());
      }
    });
  });
  </script>
</body>

示例二

我们进一步假设需要一个多功能的颜色选择器，可以选择不同的颜色格式（如rbg或hex），并返回所选颜色的各个分量值。

<input type="text" id="colorpicker">
<div id="colorpicker-container"></div>
<div id="colorinfo-container">
  <p>Red: <span id="red"></span></p>
  <p>Green: <span id="green"></span></p>
  <p>Blue: <span id="blue"></span></p>
  <p>Hex: <span id="hex"></span></p>
</div>

<script>
$(function() {
  $('#colorpicker-container').colorpicker({
    format: 'rgb',
    change: function(event, ui) {
      $('#red').text(ui.color.red());
      $('#green').text(ui.color.green());
      $('#blue').text(ui.color.blue());
      $('#hex').text(ui.color.hex());
      $('#colorpicker').val(ui.color.toString('rgb'));
    }
  });
});
</script>

在这个示例中，我们通过在colorpicker函数中指定format参数来选择颜色格式，同时在回调函数中通过red、green、blue和hex方法分别获取颜色值的各个分量，并在HTML中显示出来。同时，我们也将文本输入框的值设为选择的颜色值。

Tags: