Question

我使用Jpicker很长一段时间，在今天之前我的要求是只获得6位数或rgb值，然后存储它们。但是，现在我也想使用Alpha /透明度值。所以现在我的文本框应该包含8位而不是6位。为了启用Alpha支持，我确实更改了Jpicker-1.1.6中的这一行，$ .fn.jPicker.defaults中的js

     alphaSupport:true // at line# 1748

这样做的原因是，虽然我确实从.erb文件中启用了Alpha，但它没有显示。来自.erb文件的代码如下所示

     $('Alpha').jPicker({
         window:{
                expandable:true
            },
            color:{
          //to enable Alpha support
                alphaSupport:true,
                active:new $.jPicker.Color({ ahex:'#ffcc00ff' })
            },
            position:{ x:$(this).offset.left + $(this).width(), y:($(this).offset.top - $(window).scrollTop()) + $(this).height() }

        },
        function (color, context) {
            var all = color.val('all');
                alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none') + ' - alpha: ' + (all && all.a + '%' || 'none'));

            if (all.a != null)
            {
              var b =   Math.precision((all.a * 100) / 255, 0);
                alert(b);
            }

            $('#Commit').css(
                    {
                        backgroundColor:all && '#' + all.hex || 'transparent'
                    }); // prevent IE from throwing exception if hex is empty
        },
         // For testing purpose
        function (color, context) {
            if (context == LiveCallbackButton.get(0)) alert('Color set from button');
            var hex = color.val('hex');
            LiveCallbackElement.css(
                    {
                        backgroundColor:hex && '#' + hex || 'transparent'
                    }); // prevent IE from throwing exception if hex is empty
        },
        function (color, context) {
            alert('"Cancel" Button Clicked');
        });

好吧，在渲染的Jpicker实例中，我可以看到一个启用的Alpha部分和6位十六进制旁边的小文本框。同样在警报中我得到了所有部分的值。然而，我主要担心的是，我怎么能显示整个8位数，我也想存储它们，因为我已经存储了6个数字。

这是我的Text字段生成的HTML。

    <input id="app_setting_nav_background_color" class="colorInput Alpha" type="text" 
    value="000000" size="45" name="app_setting[nav_background_color]" maxlength="45" 
    style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);">

所以简而言之，我想用现有的RGB颜色获得每个元素的Alpha /透明度，类似“＃000000f”

Answer 1

你必须写：

window:{
     alphaSupport:true,
     expandable:true,
     position:{ x:$(this).offset.left + $(this).width(), y:($(this).offset.top - $(window).scrollTop()) + $(this).height() }
 },
 color:{
     active:new $.jPicker.Color({ ahex:'#ffcc00ff' })
 },

Answer 2

我自己已经解决了，所以如果有人从Jpicker 1.1.6获得Alpha值有问题。可以执行以下操作，虽然它是一个很好的工具，但对我来说，Jpicker网站上给出的设置不起作用，所以必须分叉插件默认功能。在我的erb文件中，我做了以下内容。

     $('.Alpha').jPicker({


            window:{
                expandable:true
            },
            color:{
                alphaSupport:true,
                active:new $.jPicker.Color({ ahex:'#ffcc00ff' })
            },
            position:{ x:$(this).offset.left + $(this).width(), y:($(this).offset.top - $(window).scrollTop()) + $(this).height() }

        },
        function (color, context) {
            var all = color.val('all');
            if (all.a != null) {
                var c = calc_in_to_hex(all.a);
                 //embedding hex of Alpha with the original string of rgb Hex
                $(this).val($(this).val() + c);
            }


        });

// function to convert int to Hex and return it back
function calc_in_to_hex(color) {
    var result = (color | 0).toString(16);
    if (result.length == 1) result = ('0' + result);
    return result.toLowerCase();
}

虽然大部分是从原始插件代码段中提取的。

Answer 3

jPicker文档中解释了一种更简单的方法。

http://www.digitalmagicpro.com/jPicker/#Live

function (color, context) {
    // If single colorpicker is used then the index would be 0
    // Else jPicker maintains a list and appropriate index should be used for that
    alert($.jPicker.List[0].color.active.val('ahex'));
});

如何获取并显示Jpicker Alpha值

3 个答案: