如何获取和显示 Jpicker Alpha 值答案

【问题标题】：How to get and show Jpicker Alpha value如何获取和显示 Jpicker Alpha 值
【发布时间】：2012-11-09 21:08:28
【问题描述】：

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

     alphaSupport:true // at line# 1748

这样做的原因是，尽管我也从 .erb 文件中启用了 Alpha，但并未显示 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”

【问题讨论】：

标签： jquery jquery-plugins ruby-on-rails-3.1 jpicker

【解决方案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' })
 },

【讨论】：

【解决方案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();
}

虽然大部分取自原始插件代码sn-p。

【讨论】：

【解决方案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'));
});

【讨论】：