Question

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

这是默认的jQuery plus 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/

Answer 1

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

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

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

    $('.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/

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

1 个答案: