在虹膜颜色选择器中添加新的调色板行答案

【问题标题】：Add new row of color palettes in iris color picker在虹膜颜色选择器中添加新的调色板行
【发布时间】：2015-06-09 12:34:11
【问题描述】：

我正在开发一个 WordPress 主题，我正在使用内置的 iris color picker (by Automatic)。 Iris 默认支持调色板，但是它在一行上显示所有颜色，并且一旦添加超过 8 种颜色，颜色框就会变得非常小（参见下面的 JSFiddle 演示）。无论如何要向虹膜颜色选择器添加新的颜色行吗？

这是默认的 jQuery 加 JSFiddle

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

http://jsfiddle.net/rcm0pdu1/

【问题讨论】：

看起来它构建了here 行并将.iris-palette 应用于元素。所以我的猜测是：修改该函数，或修改应用的styles（或两者的混合）。
我不知道它是否有用，但请参阅此相关答案：stackoverflow.com/a/25394888/3739498
@Brad Christie 谢谢，我会调查的。
@Aibrean 谢谢。我也看到了那篇文章，但那篇文章指的是 WordPress 中使用的 TinyMCE 编辑器的调色板，而不是 Iris 颜色选择器。

标签： jquery wordpress

【解决方案1】：

似乎 iris 插件根据使用的调色板数量对设计宽度和高度进行了一些计算。可以在此处找到负责此操作的功能选项：https://github.com/Automattic/Iris/blob/master/src/iris.js#L466-L513

由于我对 JavaScript 不太熟悉，我真的不知道如何在不触及核心文件的情况下覆盖插件内部的函数选项。

这是我快速编写的一个 jQuery hack。这不是最好的解决方案，但它可以解决问题。（不是最好的解决方案，因为 iris 插件仍然会计算宽度和高度，尽管它们最终没有被使用）

    $('.iris-palette').css({'height':'20px','width':'20px', 'margin-left':'','margin-right':'3px','margin-top':'3px'});
    $('.iris-strip').css('height','140px');
    paletteCount = $('.iris-palette').length
    paletteRowCount = Math.ceil(paletteCount / 8);
    $('.iris-picker').css({'height': 150 + (paletteRowCount * 23)+'px', 'padding-bottom':'15px'});

http://jsfiddle.net/rcm0pdu1/16/

【讨论】：

您的 jsfiddle 不起作用。我敢打赌，当你创建它时它会这样做，但现在它不会。
非常好！这正是我一直在寻找的。你是我的上帝……嗯。不，不是，但我真的很感激这个:-)