0

私はかなり長い間Jpickerを使用していますが、今日まで、私の要件は6桁またはrgb値のみを取得して保存することでした。ただし、アルファ/透明度の値も使用したいと思います。したがって、テキストボックスには6桁ではなく8桁が含まれているはずです。アルファサポートを有効にするために、Jpickerのこの行を変更しました-1.1.6、jsの$ .fn.jPicker.defaults

     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インスタンスでは、6桁の16進数の横に有効なAlphaセクションと小さなテキストボックスが表示されます。また、アラートでは、すべてのパーツの値が返されています。ただし、私の主な関心事は、8桁全体をどのように表示できるかということです。また、すでに6桁を格納しているので、それらを格納したいと思います。

これが私のテキストフィールドで生成された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);">

つまり、「＃000000f」のような既存のRGBカラーで各要素のアルファ/透明度を取得したいと思います。

4

3 に答える 3

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' })
 },
于 2014-11-03T19:22:50.300 に答える
0

私は自分で解決したので、Jpicker1.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();
}

そのほとんどは元のプラグインコードスニペットから取得されますが。

于 2012-11-23T06:28:41.607 に答える
0

より簡単な方法は、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'));
});
于 2013-01-29T14:01:06.083 に答える