if(!dojo._hasResource["dijit.layout.TabContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. dojo._hasResource["dijit.layout.TabContainer"] = true; dojo.provide("dijit.layout.TabContainer"); dojo.require("dijit.layout.StackContainer"); dojo.require("dijit._Templated"); dojo.declare("dijit.layout.TabContainer", [dijit.layout.StackContainer, dijit._Templated], { // summary: // A Container with Title Tabs, each one pointing at a pane in the container. // description: // A TabContainer is a container that has multiple panes, but shows only // one pane at a time. There are a set of tabs corresponding to each pane, // where each tab has the title (aka title) of the pane, and optionally a close button. // // Publishes topics [widgetId]-addChild, [widgetId]-removeChild, and [widgetId]-selectChild // (where [widgetId] is the id of the TabContainer itself. // // tabPosition: String // Defines where tabs go relative to tab content. // "top", "bottom", "left-h", "right-h" tabPosition: "top", templateString: null, // override setting in StackContainer templateString:"
\n\t
\n\t
\n
\n", // _controllerWidget: String // An optional parameter to overrider the default TabContainer controller used. _controllerWidget: "dijit.layout.TabController", postCreate: function(){ this.inherited(arguments); // create the tab list that will have a tab (a.k.a. tab button) for each tab panel var TabController = dojo.getObject(this._controllerWidget); this.tablist = new TabController({ id: this.id + "_tablist", tabPosition: this.tabPosition, doLayout: this.doLayout, containerId: this.id }, this.tablistNode); }, _setupChild: function(/* Widget */tab){ dojo.addClass(tab.domNode, "dijitTabPane"); this.inherited(arguments); return tab; // Widget }, startup: function(){ if(this._started){ return; } // wire up the tablist and its tabs this.tablist.startup(); this.inherited(arguments); if(dojo.isSafari){ // sometimes safari 3.0.3 miscalculates the height of the tab labels, see #4058 setTimeout(dojo.hitch(this, "layout"), 0); } if(dojo.isIE && !this.isLeftToRight() && this.tabPosition == "right-h" && this.tablist && this.tablist.pane2button){ //need rectify non-closable tab in IE, only for "right-h" mode for(var pane in this.tablist.pane2button){ var tabButton = this.tablist.pane2button[pane]; if(!tabButton.closeButton){ continue; } tabButtonStyle = tabButton.closeButtonNode.style; tabButtonStyle.position ="absolute"; if(dojo.isIE < 7){ tabButtonStyle.left = tabButton.domNode.offsetWidth + "px"; }else{ tabButtonStyle.padding = "0px"; } } } }, layout: function(){ // Summary: Configure the content pane to take up all the space except for where the tabs are if(!this.doLayout){ return; } // position and size the titles and the container node var titleAlign = this.tabPosition.replace(/-h/,""); var children = [ { domNode: this.tablist.domNode, layoutAlign: titleAlign }, { domNode: this.containerNode, layoutAlign: "client" } ]; dijit.layout.layoutChildren(this.domNode, this._contentBox, children); // Compute size to make each of my children. // children[1] is the margin-box size of this.containerNode, set by layoutChildren() call above this._containerContentBox = dijit.layout.marginBox2contentBox(this.containerNode, children[1]); if(this.selectedChildWidget){ this._showChild(this.selectedChildWidget); if(this.doLayout && this.selectedChildWidget.resize){ this.selectedChildWidget.resize(this._containerContentBox); } } }, destroy: function(){ if(this.tablist){ this.tablist.destroy(); } this.inherited(arguments); } }); //TODO: make private? dojo.declare("dijit.layout.TabController", dijit.layout.StackController, { // summary: // Set of tabs (the things with titles and a close button, that you click to show a tab panel). // description: // Lets the user select the currently shown pane in a TabContainer or StackContainer. // TabController also monitors the TabContainer, and whenever a pane is // added or deleted updates itself accordingly. templateString: "
", // tabPosition: String // Defines where tabs go relative to the content. // "top", "bottom", "left-h", "right-h" tabPosition: "top", // doLayout: Boolean // TODOC: deprecate doLayout? not sure. doLayout: true, // buttonWidget: String // The name of the tab widget to create to correspond to each page buttonWidget: "dijit.layout._TabButton", postMixInProperties: function(){ this["class"] = "dijitTabLabels-" + this.tabPosition + (this.doLayout ? "" : " dijitTabNoLayout"); this.inherited(arguments); }, //TODO: can this be accomplished in CSS? _rectifyRtlTabList: function(){ //Summary: Rectify the length of all tabs in rtl, otherwise the tab lengths are different in IE if(0 >= this.tabPosition.indexOf('-h')){ return; } if(!this.pane2button){ return; } var maxLen = 0; for(var pane in this.pane2button){ maxLen = Math.max(maxLen, dojo.marginBox(this.pane2button[pane].innerDiv).w); } //unify the length of all the tabs for(pane in this.pane2button){ this.pane2button[pane].innerDiv.style.width = maxLen + 'px'; } } }); dojo.declare("dijit.layout._TabButton", dijit.layout._StackButton, { // summary: // A tab (the thing you click to select a pane). // description: // Contains the title of the pane, and optionally a close-button to destroy the pane. // This is an internal widget and should not be instantiated directly. baseClass: "dijitTab", templateString:"
\n
\n
\n\t ${!label}\n\t \n\t x\n\t \n
\n
\n
\n", postCreate: function(){ if(this.closeButton){ dojo.addClass(this.innerDiv, "dijitClosable"); }else{ this.closeButtonNode.style.display="none"; } this.inherited(arguments); dojo.setSelectable(this.containerNode, false); } }); }