dijit.popup.open
dojo.require("dijit");
defined in dijit/_base/popup.js
Popup the widget at the specified position
Usage
function (/*
Object*/ args)
(view source)var widget = args.popup,
orient = args.orient || {'BL':'TL', 'TL':'BL'},
around = args.around,
id = (args.around && args.around.id) ? (args.around.id+"_dropdown") : ("popup_"+idGen++);
// make wrapper div to hold widget and possibly hold iframe behind it.
// we can't attach the iframe as a child of the widget.domNode because
// widget.domNode might be a <table>, <ul>, etc.
var wrapper = dojo.doc.createElement("div");
dijit.setWaiRole(wrapper, "presentation");
wrapper.id = id;
wrapper.className="dijitPopup";
wrapper.style.zIndex = beginZIndex + stack.length;
wrapper.style.visibility = "hidden";
if(args.parent){
wrapper.dijitPopupParent=args.parent.id;
}
dojo.body().appendChild(wrapper);
var s = widget.domNode.style;
s.display = "";
s.visibility = "";
s.position = "";
wrapper.appendChild(widget.domNode);
var iframe = new dijit.BackgroundIframe(wrapper);
// position the wrapper node
var best = around ?
dijit.placeOnScreenAroundElement(wrapper, around, orient, widget.orient ? dojo.hitch(widget, "orient") : null) :
dijit.placeOnScreen(wrapper, args, orient == 'R' ? ['TR','BR','TL','BL'] : ['TL','BL','TR','BR']);
wrapper.style.visibility = "visible";
// TODO: use effects to fade in wrapper
var handlers = [];
// Compute the closest ancestor popup that's *not* a child of another popup.
// Ex: For a TooltipDialog with a button that spawns a tree of menus, find the popup of the button.
var getTopPopup = function(){
for(var pi=stack.length-1; pi > 0 && stack[pi].parent === stack[pi-1].widget; pi--){
/* do nothing, just trying to get right value for pi */
}
return stack[pi];
}
// provide default escape and tab key handling
// (this will work for any widget, not just menu)
handlers.push(dojo.connect(wrapper, "onkeypress", this, function(evt){
if(evt.keyCode == dojo.keys.ESCAPE && args.onCancel){
dojo.stopEvent(evt);
args.onCancel();
}else if(evt.keyCode == dojo.keys.TAB){
dojo.stopEvent(evt);
var topPopup = getTopPopup();
if(topPopup && topPopup.onCancel){
topPopup.onCancel();
}
}
}));
// watch for cancel/execute events on the popup and notify the caller
// (for a menu, "execute" means clicking an item)
if(widget.onCancel){
handlers.push(dojo.connect(widget, "onCancel", null, args.onCancel));
}
handlers.push(dojo.connect(widget, widget.onExecute ? "onExecute" : "onChange", null, function(){
var topPopup = getTopPopup();
if(topPopup && topPopup.onExecute){
topPopup.onExecute();
}
}));
stack.push({
wrapper: wrapper,
iframe: iframe,
widget: widget,
parent: args.parent,
onExecute: args.onExecute,
onCancel: args.onCancel,
onClose: args.onClose,
handlers: handlers
});
if(widget.onOpen){
widget.onOpen(best);
}
return best;
parameter | type | description |
---|
args | Object | popup: Widget widget to display, parent: Widget the button etc. that is displaying this popup around: DomNode DOM node (typically a button); place popup relative to this node orient: Object structure specifying possible positions of popup relative to "around" node onCancel: Function callback when user has canceled the popup by 1. hitting ESC or 2. by using the popup widget's proprietary cancel mechanism (like a cancel button in a dialog); ie: whenever popupWidget.onCancel() is called, args.onCancel is called onClose: Function callback whenever this popup is closed onExecute: Function callback when user "executed" on the popup/sub-popup by selecting a menu choice, etc. (top menu only) examples: 1. opening at the mouse position dijit.popup.open({popup: menuWidget, x: evt.pageX, y: evt.pageY}); 2. opening the widget as a dropdown dijit.popup.open({parent: this, popup: menuWidget, around: this.domNode, onClose: function(){...} }); Note that whatever widget called dijit.popup.open() should also listen to it's own _onBlur callback (fired from _base/focus.js) to know that focus has moved somewhere else and thus the popup should be closed. |