Question

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

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

{{1}}

这是我的小提琴：http://jsfiddle.net/8ctrmsyx/

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

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

我怎么能这样做？

Answer 1

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

从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']));

这是一个基于你的小提琴的概念验证功能实例：

＆＃13;

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']));
});

＆＃13;

<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" />

＆＃13;

我也分叉/更新你的小提琴，你可以看到它在这里工作：http://jsfiddle.net/teddyrised/8ctrmsyx/1/

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

1 个答案: