jQuery拾色器插件实验

Question

拾色器小提琴-http://jsbin.com/panajiforuza/1/edit

提琴（试图变成一个插件）-http://jsbin.com/reyewefovepe/1/edit

“ >>

我做了一个基本的HSLA拾色器，我正在尝试将其转换为插件。

NOTE

：在此之前，我只做过简单/基本的插件，几乎没有功能。这是我第一个可用的插件，或者至少是目标。

我想在选择的任何输入[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) ;

[Color Picker Fiddle-http://jsbin.com/panajiforuza/1/edit Fiddle（试图变成插件）-http://jsbin.com/reyewefovepe/1/edit我做了一个基本的HSLA Color Picker，我正在尝试转换...

Answer 1

注意，如果使用/，则将选择器，对象等缓存到变量中可能有助于收集段内$(this)的值。立即渲染输入value而不是placeholder；输入元素立即获得focus。