Question

拾色器小提琴 - http://jsbin.com/panajiforuza/1/edit
小提琴（试图变成插件） - http://jsbin.com/reyewefovepe/1/edit enter image description here

我制作了一个基本的HSLA颜色选择器，我正在尝试将其转换为插件。

注意：我之前只制作了简单/基本的插件，几乎没有功能。这是我第一个可用的插件，或者至少是目标。

我想在它选择的任何输入[type = text]上使用它，并保留它以前的值（为每个新输入添加一个颜色选择器，让插件为它的颜色选择器做所有的工作选择器）

我的问题是当我调整滑块时，我将其设置为$(this)（定义用户选择器）。然而，它的价值并没有改变，我无法弄清楚原因。

如果有人能提供帮助，我们将不胜感激。

(function($) {
  $.fn.HSLAColorPicker = function() {
    $(".hsla-cpick-container").remove();
    $("body").append('<div class="hsla-cpick-container"> <table class="cpick keepcpickabove"> <tr> <td><div class="colorwheel keepcpickabove"><input class="colorpick-hue keepcpickabove" value="328" min="0" max="360" type="range"></div></td> </tr> <tr> <td><div class="colorpick-s-bg keepcpickabove"><input class="colorpick-s keepcpickabove" min="0" max="100" value="100" type="range"></div></td> </tr> <tr> <td><div class="colorpick-l-bg keepcpickabove"><input class="colorpick-l keepcpickabove" min="0" max="100" value="44" type="range"></div></td> </tr> <tr> <td><div class="colorpick-a-bg keepcpickabove"><input class="colorpick-a keepcpickabove" step=".01" min="0" max="1" value="1" type="range"></div></td> </tr> </table> </div>');

    var FontColorPick = function() {
      if ( $(".colorpick-a-text").val() === "1" ) {
        $(this).val( "hsl(" + $(".colorpick-hue").val() + ", " + $(".colorpick-s").val() + "%, " + $(".colorpick-l").val() + "%)");
      } else {
        $(this).val( "hsla(" + $(".colorpick-hue").val() + ", " + $(".colorpick-s").val() + "%, " + $(".colorpick-l").val() + "%, " + $(".colorpick-a").val() + ")");
      }
      if ( $(".colorpick-a-text").val() === "0" ) {
        $(this).val("transparent");
      }

      // Alpha Saturation
      $(".colorpick-s-bg").css({
        "background": "linear-gradient(to right, #7f7f80 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%," + $(".colorpick-l").val() + "%)" + " 100%)"
      });
      // Alpha Lightness
      $(".colorpick-l-bg").css({
        "background": "linear-gradient(to right, #000000 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%,50%) 50%,#ffffff 100%)"
      });
      // Alpha Preview
      $(".colorpick-a-bg").css({
        "background": "linear-gradient(to right, rgba(255,255,255,0) 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%," + $(".colorpick-l").val() + "%)" + " 100%)"
      });
    };

    $(this).on('mousedown touchstart focus', function(e) {
      $(".hsla-cpick-container").show().css({
        'position': 'absolute',
        'margin-top': "-" + $(this).offset().top,
        'left': $(this).offset().left,
        'width': $(this).width()
      });
      FontColorPick();
    });

    $(document).on('mousedown touchstart', function(e) {
      if ($(".hsla-cpick-container").is(":visible")) {
        if (!$(e.target).hasClass('keepcpickabove')) {
          $(".hsla-cpick-container").hide();
        }
      }
    });

    // Setup Hue
    $(".colorpick-hue").on('change', function() {
      FontColorPick();
    });
    // Setup Saturation
    $(".colorpick-s").on('change', function() {
      FontColorPick();
    });
    // Setup Lightness
    $(".colorpick-l").on('change', function() {
      FontColorPick();
    });
    // Setup Alpha
    $(".colorpick-a").on('change', function() {
      FontColorPick();
    });
    FontColorPick();
  };
}) (jQuery) ;

Answer 1

注意，如果/当使用时，将变量选择器，对象等缓存到变量可能有助于在片内收集$(this)的值。立即呈现输入value而不是placeholder;输入元素立即获得focus。

尝试

HTML

  <div align="center">
  <label>bgcolor: </label><input class="bgcolor" placeholder="bgcolor" type="text" />
  <label>bgfontcolor: </label><input class="bgfontcolor" placeholder="bgfontcolor" type="text" />
  </div>

JS

(function($) {
  $.fn.HSLAColorPicker = function() {
    // added `that` = `$(this)`
    that = $(this);
    $(".hsla-cpick-container").remove();
    $("body").append('<div class="hsla-cpick-container"> <table class="cpick keepcpickabove"> <tr> <td><div class="colorwheel keepcpickabove"><input class="colorpick-hue keepcpickabove" value="328" min="0" max="360" type="range"></div></td> </tr> <tr> <td><div class="colorpick-s-bg keepcpickabove"><input class="colorpick-s keepcpickabove" min="0" max="100" value="100" type="range"></div></td> </tr> <tr> <td><div class="colorpick-l-bg keepcpickabove"><input class="colorpick-l keepcpickabove" min="0" max="100" value="44" type="range"></div></td> </tr> <tr> <td><div class="colorpick-a-bg keepcpickabove"><input class="colorpick-a keepcpickabove" step=".01" min="0" max="1" value="1" type="range"></div></td> </tr> </table> </div>');

    var FontColorPick = function() {
      if ( $(".colorpick-a-text").val() === "1" ) {
        // substituted `that` for `$(this)`
        that.val( "hsl(" + $(".colorpick-hue").val() + ", " + $(".colorpick-s").val() + "%, " + $(".colorpick-l").val() + "%)");
      } else {
        // substituted `that` for `$(this)`
        that.val( "hsla(" + $(".colorpick-hue").val() + ", " + $(".colorpick-s").val() + "%, " + $(".colorpick-l").val() + "%, " + $(".colorpick-a").val() + ")");
      }
      if ( $(".colorpick-a-text").val() === "0" ) {
        // substituted `that` for `$(this)`
        that.val("transparent");
      }

      // Alpha Saturation
      $(".colorpick-s-bg").css({
        "background": "linear-gradient(to right, #7f7f80 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%," + $(".colorpick-l").val() + "%)" + " 100%)"
      });
      // Alpha Lightness
      $(".colorpick-l-bg").css({
        "background": "linear-gradient(to right, #000000 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%,50%) 50%,#ffffff 100%)"
      });
      // Alpha Preview
      $(".colorpick-a-bg").css({
        "background": "linear-gradient(to right, rgba(255,255,255,0) 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%," + $(".colorpick-l").val() + "%)" + " 100%)"
      });
    };

    that.on('mousedown touchstart focus', function(e) {
      $(".hsla-cpick-container").show().css({
        'position': 'absolute',
        'margin-top': "-" + that.offset().top,
        'left': that.offset().left,
        'width': that.width()
      });
      FontColorPick();
    });

    $(document).on('mousedown touchstart', function(e) {
      if ($(".hsla-cpick-container").is(":visible")) {
        if (!$(e.target).hasClass('keepcpickabove')) {
          $(".hsla-cpick-container").hide();
        }
      }
    });

    // Setup Hue
    $(".colorpick-hue").on('change', function() {
      FontColorPick();
    });
    // Setup Saturation
    $(".colorpick-s").on('change', function() {
      FontColorPick();
    });
    // Setup Lightness
    $(".colorpick-l").on('change', function() {
      FontColorPick();
    });
    // Setup Alpha
    $(".colorpick-a").on('change', function() {
      FontColorPick();
    });
    FontColorPick();
  };
}) (jQuery) ;

$(document).ready(function() {
    // combined selectors `".bgcolor, .bgfontcolor"` ,
    // substituted `focus` event , `.focus()` ,
    // for direct call to `.HSLAColorPicker()` 
    $(".bgcolor, .bgfontcolor").on("focus", function(e) {
        $(this).HSLAColorPicker();
    }).focus();
  // $(".bgfontcolor").HSLAColorPicker();
});

jsfiddle http://jsfiddle.net/guest271314/2Lxnzynx/

JQuery颜色选择器插件实验

1 个答案: