Question

我一直在创建自己的小部件，它使用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/

提前感谢您的帮助！：）

Answer 1

结果我的语法只是一点点，你需要让你试图在括号内调用的方法和引号这里是我添加到我的最小化函数，以使其工作：

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

和heres我从哪里得到了我的anser：JQuery - Widget Public Methods

希望这可以在将来帮助某人！

jQuery UI Widget - 在widget jQuery UI之外设置选项

1 个答案: