jQuery UI 小部件 - 在小部件 jQuery UI 之外设置选项答案

【问题标题】：jQuery UI Widget - Setting options outside of widget jQuery UIjQuery UI 小部件 - 在小部件 jQuery UI 之外设置选项
【发布时间】：2015-12-01 11:58:08
【问题描述】：

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

提前感谢您的帮助！ :)

【问题讨论】：

标签： jquery-ui jquery-ui-widget-factory

【解决方案1】：

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

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

我的分析器来自：JQuery - Widget Public Methods

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

【讨论】：