0

jQuery UI ダイアログをその一部として使用する独自のウィジェットを作成しています。

いくつかのカスタマイズを行うために、ダイアログを拡張しました。私の問題は、ダイアログ ボックスを閉じるときに、メイン ウィジェットのオプションを更新する必要があることです。メソッドは(_setOptionsウィジェット内で) プライベートであるため、独自の非プライベート メソッドを作成しましたが、拡張機能から呼び出すことができません。

拡張機能でウィジェットからメソッドを呼び出すにはどうすればよいですか?

理解しやすいように、いくつかの単純化されたコードを貼り付けます。

(function( $ ) {

//Start of my widget
$.widget( "window.popOut", {

    options: {
        viewState: 1
        //Declaring the initial options value
    },

    _create: function() {
        this._openDialog();
    },

    _setOption: function( key, value ) {
        this.options[ key ] = value;
    },
    //My open button
    _openDialog: function(){
        var self = this;
        this.testButton = $('<button></button>')
            .addClass('testGateStateButton')
            .click(function(){
                self._setOption( "viewState" , 2);
                //viewState option changed to 2
                self._createPopOutWindow();

            })
            .appendTo('#body-container');
    },

    //creation of dialog box
    _createPopOutWindow: function(){
        $(this.element).dialog({
                options: {
                },
                autoOpen: true,
                title:'',
                dialogClass: "no-close",
                position: {
                    my: "center",
                    at: "center",
                    of: $("body") },
                create: function(event, ui) {

                }
            }
        );
    },
    destroy: function() {
        // Call the base destroy function.
        $.Widget.prototype.destroy.call( this );
    },

    setView: function(viewStatePar){
        self._setOption( "viewState" , viewStatePar);


    }

});

//adding another button to the Dialog box title in the dialog init function
var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
    var self = this;
    var dialog_id = this.uiDialogTitlebar.next().attr('id');
    _init.apply(this, arguments);
    this.uiDialogTitlebar.append('<button id='+ dialog_id +'minBtn role="button" aria-disabled="false" title="Minimise">'+
        '<span class="ui-button-icon-primary ui-icon ui-icon-minus"></span></button>');
    $('#' + dialog_id + 'minBtn').click(function(){
        self.minimise();
        //calling the minimise function below
     })

};
//extending the dialog widget to add the functionality for my new button
$.extend($.ui.dialog.prototype, {
    minimise: function() {
        var dialogName = this.element.attr("id");
        $('#'+dialogName).dialog("destroy").show();//close the dialog and show the original div
        var popout = $('#'+dialogName).popOut(); //create a variable of the popOut widget
        console.log(popout);//console logs to check ive got the correct element
        popout.setView(1); //calling the setView method on my popout variable but getting the error has no method 'setView'
        //attempting to set the options through the use of the setView functions parameters
    }
});

 $("#popOutContainer").popOut( { viewState: 1 } );
}( jQuery ) );

JSFiddle も作成しました: http://jsfiddle.net/Keelz/GRuPv/25/

よろしくお願いします。:)

4

1 に答える 1

0

私の構文が少し出てきたことがわかりました。ここで括弧と引用符の内側で呼び出そうとするメソッドが必要です。それを機能させるために、最小化関数に追加しました。

$('#' + dialogName).popOut('setView', 2);

そして、私がanserを取得した場所は次のとおりです：JQuery - Widget Public Methods

これが将来誰かを助けることができることを願っています!

于 2013-07-16T09:52:35.327 に答える