javascript - 向虹膜颜色选择器添加更多调色板，而不覆盖当前调色板？

Question

我正在使用带有一些预设调色板的虹膜颜色选择器。现在我想添加更多颜色，但我不想触及以前的代码。我需要一个解决方案来扩展调色板而不触及原始代码。

我遇到的问题是，如果我再次使用调色板参数，它只会覆盖以前选择的调色板。

jQuery(document).ready(function($){
    $('#color-picker').iris({
        hide: false,
         palettes: ['#125', '#459', '#78b'],
    });

     $('#color-picker').iris({
         palettes: ['#000', '#000', '#000'],
    });
});

这是我的 fiddle :http://jsfiddle.net/8ctrmsyx/

我也不能只添加以前的调色板，因为网站上有数十种不同的颜色选择器，每个都有自己的调色板。

最简单的解决方案是以某种方式具有扩展调色板的功能，而不是覆盖它们。

我怎样才能做到这一点？

Answer 1

它不适合你，因为你正在覆盖调色板。为了附加到 Iris 实例预先存在的调色板，您必须首先检索调色板数组，附加/连接到它，然后更新调色板变量。

从 Iris 文档中，您可以 retrieve the palette information using the options syntax ，即:

var palette = $('#color-picker').iris('option', 'palettes');

检索调色板后，您可以执行 array.concat() 将新调色板添加到其中，即:

$('#color-picker').iris('option', 'palettes', palette.concat(['#fff', '#ddd', '#bbb', '#999', '#777', '#555', '#333', '#111']));

这是一个基于您的 fiddle 的概念验证功能示例:

jQuery(document).ready(function($) {
  $('#color-picker').iris({
    hide: false,
    palettes: ['#125', '#459', '#78b'],
  });

  var palette = $('#color-picker').iris('option', 'palettes');

  // Let's say we want to add three grey scale colors on top of your pre-existing palette
  $('#color-picker').iris('option', 'palettes', palette.concat(['#fff', '#ddd', '#bbb', '#999', '#777', '#555', '#333', '#111']));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://automattic.github.io/Iris/javascripts/iris.min.js"></script>
<input type="text" id="color-picker" value="#bada55" />

我还 fork /更新了你的 fiddle ，你可以在这里看到它的工作:http://jsfiddle.net/teddyrised/8ctrmsyx/1/