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);

我从这里得到分析器:JQuery - Widget Public Methods

希望这可以帮助将来的人!

于 2013-07-16T09:52:35.327 回答