我一直在创建自己的小部件,它使用 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/
在此先感谢您的帮助!:)