阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Spectrum Colorpicker 中文API文档

      插件 jQuery.Spectrum Colorpicker 中文API文档

      为何选择Colorpicker?

      我对可用于拾色的解决方案不满意。其中许多包括大量图像,难以皮肤或定制,或者是非常大的插件。以下是制作新作品时的目标:

      小足迹

      看一个有效的jsFiddle示例 只需包含所需的CSS和JavaScript文件,您就可以开始了!

      我们不需要任何stinkin’图像!

      没有人想在他们的项目中添加一堆代码。Spectrum包含在两个文件中,两者都注意不要弄乱现有代码。

      填充工具

      我想要一个最基本的用例选项,一个输入[type = color] HTML5控件的polyfill 。此模式需要在不启用JavaScript的情况下工作 - 并且像其他HTML5输入一样回退到输入[type = text]。

      如果您不希望发生此行为,但仍希望在页面上的其他位置使用频谱,则可以$.fn.spectrum.load = false;在加载脚本文件后立即进行设置。

      定制

      仅仅因为你不具备任何改变,以得到它的工作,并不意味着你不能!使用CSS可以轻松实现皮肤和自定义插件,并且有各种各样的模式和选项可供探索。

      移动支持

      除了桌面浏览器支持外,我还想要一款触控友好的移动颜色选择器,适用于iOS和Android,并使用最大化未来移动支持的标准。

      Devtools

      信不信由你,这个颜色选择器存在于Chrome,Firefox和Safari devtools内部,以便为Web开发人员和设计人员提供更轻松的选择颜色。

      当我开始这个项目时,我写了关于开发人员工具概念colorpicker实现的文章。之后,我在devtools邮件列表上联系了我,并获得了一些关于将它与devtools集成的可能性的初步反馈。然后我从分支中提取了jQuery依赖项,并向WebKit项目提交了一个补丁。

      从那里,我打开了一个错误,开始研究Web Inspector。50多条评论和10个补丁后,该案件登陆WebKit。这是添加它的Firefox错误。

      模式

      习惯

      如果您想了解更多功能,只需创建一个普通输入并将其初始化为普通的jQuery插件。 初始化颜色选择器时可以设置很多选项。请参阅下面的“选项”部分。

      平面

      Flat 这意味着它将始终以完整大小显示,并被定位为内联块元素。向左看是一个全尺寸的平板选择器。


      $("#flat").spectrum({ flat: true, showInput: true }); $("#flatClearable").spectrum({ flat: true, showInput: true, allowEmpty:true });

      输入[ 类型=颜色]

      如果您只想为原生颜色输入提供polyfill,最简单的方法是使用颜色类型创建输入。一旦用户的浏览器支持本机颜色控件,它将选择使用其本机控件。

      与其他模式不同,您的值必须是以“#”开头的6个字符的十六进制值。 为什么?因为规范是这样说的,这就是原因。

      而已! 如果用户未启用JavaScript,该字段将降级为文本输入,以便他们仍然可以手动输入颜色。您不需要添加一行代码。

      选项

      $("#picker").spectrum({ color: tinycolor, flat: bool, showInput: bool, showInitial: bool, allowEmpty: bool, showAlpha: bool, disabled: bool, localStorageKey: string, showPalette: bool, showPaletteOnly: bool, togglePaletteOnly: bool, showSelectionPalette: bool, clickoutFiresChange: bool, cancelText: string, chooseText: string, togglePaletteMoreText: string, togglePaletteLessText: string, containerClassName: string, replacerClassName: string, preferredFormat: string, maxSelectionSize: int, palette: [[string]], selectionPalette: [string] });

      提示:可以在spectrum初始化程序中的选项对象中指定选项,例如,$(element).spectrum({showAlpha: true })或者在元素的标记上指定选项< input data-show-alpha=“true” />。

      颜色

      初始颜色将使用color选项设置。如果您没有传入颜色,Spectrum将使用value输入中的属性。

      颜色解析基于TinyColor插件。这应该解析你扔在它上面的任何颜色字符串。



      显示输入

      您可以添加输入以允许自由格式输入。颜色解析在允许的字符串中非常宽松。有关详细信息,请参阅TinyColor。

      $("#showInput").spectrum({ showInput: true }); $("#showInputWithClear").spectrum({ showInput: true, allowEmpty:true });

      显示Alpha

      您可以选择Alpha透明度。看看这些例子:

      $("#showAlpha").spectrum({ showAlpha: true });

      如果传入disabled标记,则可以自动禁用Spectrum 。此外,如果禁用初始化频谱的输入,则这将是默认值。注意:如果禁用输入,则无法启用频谱(参见下文)。

      $("#disabled").spectrum({ disabled: true }); $(“input:disabled”).spectrum({

      });

      显示调色板

      Spectrum可以在颜色选择器下方显示一个调色板,方便用户从频繁或最近使用的颜色中进行选择。关闭颜色选择器时,如果调色板已经存在,则当前颜色将添加到调色板中。看看这里:

      $("#showPalette").spectrum({ showPalette: true, palette: [ [‘black’, ‘white’, ‘blanchedalmond’], [‘rgb(255, 128, 0);’, ‘hsv 100 70 50’, ‘lightyellow’] ] });

      仅显示调色板

      看一个有效的jsFiddle示例 如果您愿意,频谱可以显示您指定的调色板,而不是其他内容。

      $("#showPaletteOnly").spectrum({ showPaletteOnly: true, showPalette:true, color: ‘blanchedalmond’, palette: [ [‘black’, ‘white’, ‘blanchedalmond’, ‘rgb(255, 128, 0);’, ‘hsv 100 70 50’], [‘red’, ‘yellow’, ‘green’, ‘blue’, ‘violet’] ] });

      仅切换调色板

      Spectrum可以显示一个按钮,用于切换调色板旁边的颜色选择器。这样,用户可以从调色板中的有限数量的颜色中进行选择,但仍然能够选择不在调色板中的颜色。 默认值为togglePaletteOnlyFALSE。将其设置为TRUE以启用“切换”按钮。

      您还可以使用选项更改切换按钮上的文本togglePaletteMoreText(默认为“更多”)和togglePaletteLessText(默认为“更少”)。

      $("#togglePaletteOnly").spectrum({ showPaletteOnly: true, togglePaletteOnly: true, togglePaletteMoreText: ‘more’, togglePaletteLessText: ‘less’, color: ‘blanchedalmond’, palette: [ ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"], ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"], ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"], ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"], ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"], ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"], ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"], ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"] ] });

      显示选择调色板

      Spectrum可以使用该showSelectionPalette选项跟踪用户选择的内容。

      如果localStorageKey定义了该选项,则选择将保存在浏览器的localStorage对象中

      $("#showSelectionPalette").spectrum({ showPalette: true, showSelectionPalette: true, // true by default palette: [ ] }); $("#showSelectionPaletteStorage").spectrum({ showPalette: true, showSelectionPalette: true, palette: [ ], localStorageKey: “spectrum.homepage”, // Any Spectrum with the same string will share selection });

      选择调色板

      选择面板内的默认值。确保启用了showSelectionPalette和showPalette。

      如果localStorageKey定义了a ,则该值将被覆盖。

      $("#selectionPalette").spectrum({ showPalette: true, palette: [ ], showSelectionPalette: true, // true by default selectionPalette: [“red”, “green”, “blue”] });

      此颜色选择器在选择面板中具有默认值:

      最大选择尺寸

      这是一次在selectionPallete中允许的元素数量。

      如果达到此限制,元素将以先进先出顺序从调色板中删除。

      $("#maxSelectionSize").spectrum({ showPalette: true, palette: [ ], showSelectionPalette: true, // true by default selectionPalette: [“red”, “green”, “blue”], maxSelectionSize: 2 });

      此颜色选择器开始删除早于2的选择调色板颜色:

      隐藏调色板后选择

      选择调色板颜色后,可以自动隐藏颜色选择器。

      $("#hideAfterPaletteSelect").spectrum({ showPaletteOnly: true, showPalette:true, hideAfterPaletteSelect:true, color: ‘blanchedalmond’, palette: [ [‘black’, ‘white’, ‘blanchedalmond’, ‘rgb(255, 128, 0);’, ‘hsv 100 70 50’], [‘red’, ‘yellow’, ‘green’, ‘blue’, ‘violet’] ] });

      Clickout Fires Change

      单击颜色选择器外部时,可以强制它触发change事件,而不是让它恢复更改。这是true默认情况。

      $("#clickoutFiresChange").spectrum({ clickoutFiresChange: true }); $("#clickoutDoesntChange").spectrum({ clickoutFiresChange: false });

      显示初始值

      Spectrum可以显示打开时最初设置的颜色。这提供了一种简单的方法来单击返回打开时设置的内容。

      $("#showInitial").spectrum({ showInitial: true });

      显示输入和初始值

      如果同时指定showInput和showInitial选项,则通过将按钮包装到底行并缩小输入来使CSS保持正常。 注意:这可以通过CSS自定义。

      $("#showInputAndInitial").spectrum({ showInitial: true, showInput: true });

      显示输入,初始和清除

      如果同时指定了showInput,showInitial和allowEmpty选项,则通过将按钮包装到底行并缩小输入来使CSS保持正常。 注意:这可以通过CSS自定义。

      $("#showInputInitialClear").spectrum({ allowEmpty:true, showInitial: true, showInput: true });

      按钮文字

      您可以使用cancelText和chooseText属性设置按钮的文本。

      $("#buttonText").spectrum({ allowEmpty:true, chooseText: “Alright”, cancelText: “No way” });

      显示按钮

      您可以使用该showButtons属性显示或隐藏按钮。如果没有按钮,则行为将在选择器关闭时触发change事件(并更新原始输入)。

      $("#hideButtons").spectrum({ showButtons: false });

      容器类名

      您可以使用该containerClassName属性向容器元素添加其他类名。

      $("#containerClassName").spectrum({ containerClassName: ‘awesome’ }); .awesome { background: purple; }

      替换类名

      您可以使用该replacerClassName属性仅向replacer元素添加其他类名。

      $("#replacerClassName").spectrum({ replacerClassName: ‘awesome’ });

      首选格式

      您可以设置文本框中显示的格式。

      这也将更改调色板样本中标题中显示的格式。

      $("#preferredHex").spectrum({
          preferredFormat: "hex",
          showInput: true,
          showPalette: true,
          palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
      });
      $("#preferredHex3").spectrum({
          preferredFormat: "hex3",
          showInput: true,
          showPalette: true,
          palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
      });
      $("#preferredHsl").spectrum({
          preferredFormat: "hsl",
          showInput: true,
          showPalette: true,
          palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
      });
      $("#preferredRgb").spectrum({
          preferredFormat: "rgb",
          showInput: true,
          showPalette: true,
          palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
      });
      $("#preferredName").spectrum({
          preferredFormat: "name",
          showInput: true,
          showPalette: true,
          palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
      });
      $("#preferredNone").spectrum({
          showInput: true,
          showPalette: true,
          palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
      });
      

      appendTo

      您可以选择将colorpicker容器附加到哪个元素(默认为"body")。这可以是jQuery appendTo函数中的任何有效对象。

      例如,更改此项有助于解决在模式对话框或固定位置容器中打开颜色选择器的问题。

      活动

      //事件可以作为选项绑定在初始化过程中:

      // Events can be bound in the intialization process as options:
      $("#picker").spectrum({
          move: function(tinycolor) { },
          show: function(tinycolor) { },
          hide: function(tinycolor) { },
          beforeShow: function(tinycolor) { },
      });
      
      // Alternatively, they can be added as an event listener:
      $("#picker").on('move.spectrum', function(e, tinycolor) { });
      $("#picker").on('show.spectrum', function(e, tinycolor) { });
      $("#picker").on('hide.spectrum', function(e, tinycolor) { });
      $("#picker").on('beforeShow.spectrum', function(e, tinycolor) { });
      

      更改

      被称为原始输入变化。仅在输入关闭或单击“选择”按钮时才会发生。

      change: function(color) {
          color.toHexString(); // #ff0000
      }
      

      移动

      当用户在颜色选择器内移动时调用

      move: function(color) {
          color.toHexString(); // #ff0000
      }
      

      隐藏

      隐藏颜色选择器后调用。在选择器打开时单击选取器外部时会发生这种情况。请注意,当显示页面上的任何颜色选择器时,它将隐藏任何已打开的颜色选择器。在平面颜色选择器上忽略此事件。

      hide: function(color) {
          color.toHexString(); // #ff0000
      }
      

      节目

      打开颜色选择器后调用。这在平面颜色选择器上被忽略。请注意,当显示页面上的任何颜色选择器时,它将隐藏任何已打开的颜色选择器。

      show: function(color) {
          color.toHexString(); // #ff0000
      }
      

      beforeShow

      如果在beforeShow事件中返回false,则可以阻止颜色选择器显示。在平面颜色选择器上忽略此事件。

      beforeShow: function(color) {
          return false; // Will never show up
      }
      

      dragstart

      在色调滑块,Alpha滑块或主要颜色选择器区域上的拖动事件开始时调用

      $(element).on("dragstart.spectrum"): function(e, color) {
          color.toHexString(); // #ff0000
      }
      

      dragstop

      在色调滑块,Alpha滑块或主要颜色选择器区域上的拖动事件结束时调用

      $(element).on("dragstop.spectrum"): function(e, color) {
          color.toHexString(); // #ff0000
      }
      

      方法

      $("#picker").spectrum("show");
      $("#picker").spectrum("hide");
      $("#picker").spectrum("toggle");
      $("#picker").spectrum("get");
      $("#picker").spectrum("set", colorString);
      $("#picker").spectrum("container");
      $("#picker").spectrum("reflow");
      $("#picker").spectrum("destroy");
      $("#picker").spectrum("enable");
      $("#picker").spectrum("disable");
      $("#picker").spectrum("option", optionName);
      $("#picker").spectrum("option", optionName, newOptionValue);
      

      节目

      显示颜色选择器。

      隐藏

      隐藏颜色选择器。

      切换

      切换颜色选择器。

      警告:如果要从单击处理程序调用切换,请确保return false在切换后防止颜色选择器立即隐藏。

      $("#btn-toggle").click(function() {
          $("#toggle").spectrum("toggle");
          return false;
      });
      

      get

      从colorpicker获取当前值。

      set

      以编程方式设置颜色选择器将更新原始输入。

      注意:这将不会触发change事件,以防止无限循环与调用set来自内部change。

      <input type='text' value='blanchedalmond' name='triggerSet' id='triggerSet' />
      <input type='text' placeholder='Enter A Color' id='enterAColor' />
      <button id='btnEnterAColor'>Trigger Set</button>
      
      <script>
      $("#triggerSet").spectrum();
      
      // Show the original input to demonstrate the value changing when calling `set`
      $("#triggerSet").show();
      
      $("#btnEnterAColor").click(function() {
          $("#triggerSet").spectrum("set", $("#enterAColor").val());
      });
      </script>
      

      容器

      检索颜色选择器的容器元素,以防您想要进行manaully定位或执行其他操作。

      回流

      重置容器元素的位置。这可以在初始化时隐藏,或者如果颜色选择器位于移动区域内。

      破坏

      删除颜色选择器功能并将元素恢复到其原始状态。

      启用

      允许选择颜色选择器组件。如果已启用,则此方法不执行任何操作。

      此外,这将导致原始(现在隐藏)输入设置为禁用。

      禁用

      禁用颜色选择器组件的选择。将sp-disabled类添加到replacer元素。如果它已被禁用,则此方法不执行任何操作。

      此外,这将删除disabled原始(现在隐藏)的属性。

      选项

      option使用选项名称 调用将返回该选项的当前值。所以,例如:

      $("input").spectrum({
          showInput: true
      });
      
      $("input").spectrum("option", "showInput"); // true
      

      option使用选项名称和选项值进行 调用会将选项设置为新值。

      $("input").spectrum({
          showInput: true
      });
      
      $("input").spectrum("option", "showInput", false);
      $("input").spectrum("option", "showInput"); // false
      

      剥皮

      由于它都是用HTML / CSS构建的,因此您可以轻松地对其进行换肤。spectrum.css文件分为两部分,核心规则(文件顶部)和可规则规则(底部)。随意调整这些规则,使其看起来如你所愿。

      非输入元素

      您可以使用任何想要触发颜色选择器的元素:单击我打开颜色选择器,但强烈建议您坚持使用< input>标签。

      Nitty Gritty

      浏览器支持

      我希望这可以在最新和最好的浏览器中工作,但也可以实现后台兼容性和移动支持。以下是当前支持的浏览器:

      • IE 6+
      • Chrome 4+
      • Firefox 3.6+
      • Safari 4+
      • Opera 11.1+
      • iOS版

      IE实施

      IE支持使用专有过滤器提供 。其他浏览器使用CSS渐变。

      接受的颜色输入

      Spectrum将使用传入的颜色进行初始化。如果没有传入颜色,它将尝试根据value输入的颜色解析颜色。颜色解析基于TinyColor插件,并接受多种形式的输入:

      red
      #fff
      fff
      #ffffff
      ffffff
      rgb(255, 0, 0)
      rgb 255 0 0
      hsl(0, 100, 50)
      hsl(0, 100%, 50%)
      hsl 0 100 50
      hsl 0 100% 50%
      hsv(0, 100%, 100%)
      hsv(0, 100, 100)
      hsv 0 100% 100%
      hsv 0 100 100
      

      它还提供以下输出形式:

      var t = $("#element").spectrum("get");
      t.toHex()       // "ff0000"
      t.toHexString() // "#ff0000"
      t.toRgb()       // {"r":255,"g":0,"b":0}
      t.toRgbString() // "rgb(255, 0, 0)"
      t.toHsv()       // {"h":0,"s":1,"v":1}
      t.toHsvString() // "hsv(0, 100%, 100%)"
      t.toHsl()       // {"h":0,"s":1,"l":0.5}
      t.toHslString() // "hsl(0, 100%, 50%)"
      t.toName()      // "red"
      
      目录
      目录