3

プライムフェイス 3.5、モハラ 2.1.21、オムニフェイス 1.5

Primefaces コンポーネント カラー ピッカーを使用して色を選択し、テキスト ボックスの色を更新したいと考えています。

<h:outputText value="#{bean.color}" id="colorId"/>
<p:colorPicker value="#{bean.color}" />

したがって、h:outputText の値を更新するにはどうすればよいですか (クライアント側のみが必要です)。

JQuery カラー ピッカー コンポーネントには、これを行うための優れたインターフェイスがあります。しかし、どうすればそれを使用できますか？生成されたコンポーネントのカラー ピッカーで onChange イベントを登録するにはどうすればよいですか?

$('#colorSelector').ColorPicker({
    色: '#0000ff',
    onChange: 関数 (hsb、16 進数、rgb) {
        $('#colorSelector div').css('backgroundColor', '#' + hex);
    }
});
4

1 に答える 1

1

私はあなたの問題をウェブで探していましたが、有用な解決策も見つかりませんでした. だから私はこの私の答えと同じアプローチを使うことにしました。

これが私の提案です：

primefaces から JS コードを取得し、それを書き直します。

        <h:form prependId="false">

                <h:outputText value="t#{testas.color}" id="colorId3"/>
                <p:colorPicker id="cid" value="#{testas.color}" widgetVar="co" />           

        </h:form>


        <script type="text/javascript">

        PrimeFaces.widget.ColorPicker = PrimeFaces.widget.BaseWidget.extend({

            init: function(cfg) {
                this._super(cfg);

                this.input = $(this.jqId + '_input');
                this.cfg.popup = this.cfg.mode == 'popup';    
                this.jqEl = this.cfg.popup ? $(this.jqId + '_button') : $(this.jqId + '_inline');
                this.cfg.flat = !this.cfg.popup;
                this.cfg.livePreview = false;
                this.cfg.nestedInDialog = this.jqEl.parents('.ui-dialog:first').length == 1;

                this.bindCallbacks();

                //ajax update check
                if(this.cfg.popup) {
                    this.clearOrphanOverlay();
                }

                //create colorpicker
                this.jqEl.ColorPicker(this.cfg);

                //popup ui
                if(this.cfg.popup) {
                    PrimeFaces.skinButton(this.jqEl);
                    this.overlay = $(PrimeFaces.escapeClientId(this.jqEl.data('colorpickerId')));
                    this.livePreview = $(this.jqId + '_livePreview');
                }
            },

            bindCallbacks: function() {
                var _self = this;

                this.cfg.onChange = function(hsb, hex, rgb) {
                    _self.input.val(hex);

                    if(_self.cfg.popup) {

                        _self.livePreview.css('backgroundColor', '#' + hex);
                    }
                };

                this.cfg.onShow = function() {
                    if(_self.cfg.popup) {
                        _self.overlay.css('z-index', ++PrimeFaces.zindex);
                    }

                    var win = $(window),
                    positionOffset = _self.cfg.nestedInDialog ? '-' + win.scrollLeft() + ' -' + win.scrollTop() : null;

                    if(_self.cfg.nestedInDialog) {
                        _self.overlay.css('position', 'fixed');
                    }

                    //position the overlay relative to the button
                    _self.overlay.css({
                                left:'',
                                top:''
                        })
                        .position({
                            my: 'left top'
                            ,at: 'left bottom'
                            ,of: _self.jqEl,
                            offset : positionOffset
                        });
                }

                this.cfg.onHide = function(cp) {
                    _self.overlay.css('z-index', ++PrimeFaces.zindex);

                    $('#colorId3').html(_self.input.val()); // -> ADDED BY ME

                    $(cp).fadeOut('fast');
                    return false;
                }
            },

            /**
             * When a popup colorpicker is updated with ajax, a new overlay is appended to body and old overlay
             * would be orphan. We need to remove the old overlay to prevent memory leaks.
             */
            clearOrphanOverlay: function() {
                var _self = this;

                $(document.body).children('.ui-colorpicker-container').each(function(i, element) {
                    var overlay = $(element),
                    options = overlay.data('colorpicker');

                    if(options.id == _self.id) {
                        overlay.remove();
                        return false;   //break;
                    }
                });
            }

        });

        </script>

この部分を追加しました: $('#colorId3').html(_self.input.val());

JQuery を知っている人 (私は知りません) が、この関数にコンパクトなスクリプトを記述できることを願っています。しかし、これは私にとってはうまくいきました。

これについて私に意見をください;) 私もここで初めてです。

于 2013-09-17T17:04:31.023 に答える