TabContainer.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dojox.mobile.TabContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojox.mobile.TabContainer"] = true;
  8. dojo.provide("dojox.mobile.TabContainer");
  9. dojo.require("dojox.mobile");
  10. // Deprecated. Use dojox.mobile.TabBar instead.
  11. dojo.declare(
  12. "dojox.mobile.TabContainer",
  13. dijit._WidgetBase,
  14. {
  15. iconBase: "",
  16. iconPos: "",
  17. fixedHeader: false,
  18. constructor: function(){
  19. dojo.deprecated("dojox.mobile.TabContainer is deprecated", "use dojox.mobile.TabBar instead", 2.0);
  20. },
  21. buildRendering: function(){
  22. var node = this.domNode = this.srcNodeRef;
  23. node.className = "mblTabContainer";
  24. var headerNode = this.tabHeaderNode = dojo.doc.createElement("DIV");
  25. var paneNode = this.containerNode = dojo.doc.createElement("DIV");
  26. // reparent
  27. for(var i = 0, len = node.childNodes.length; i < len; i++){
  28. paneNode.appendChild(node.removeChild(node.firstChild));
  29. }
  30. headerNode.className = "mblTabPanelHeader";
  31. headerNode.align = "center";
  32. if(this.fixedHeader){
  33. var view = dijit.getEnclosingWidget(this.domNode.parentNode); // parentNode is null if created programmatically
  34. view.domNode.insertBefore(headerNode, view.domNode.firstChild);
  35. dojo.style(headerNode, {
  36. position: "absolute",
  37. width: "100%",
  38. top: "0px",
  39. zIndex: "1"
  40. });
  41. view.fixedHeader = headerNode;
  42. }else{
  43. node.appendChild(headerNode);
  44. }
  45. paneNode.className = "mblTabPanelPane";
  46. node.appendChild(paneNode);
  47. },
  48. startup: function(){
  49. this.createTabButtons();
  50. this.inherited(arguments);
  51. },
  52. createTabButtons: function(){
  53. var div = dojo.doc.createElement("DIV");
  54. div.align = "center";
  55. var tbl = dojo.doc.createElement("TABLE");
  56. var cell = tbl.insertRow(-1).insertCell(-1);
  57. var children = this.containerNode.childNodes;
  58. for(var i = 0; i < children.length; i++){
  59. var pane = children[i];
  60. if(pane.nodeType != 1){ continue; }
  61. var widget = dijit.byNode(pane);
  62. if(widget.selected || !this._selectedPane){
  63. this._selectedPane = widget;
  64. }
  65. pane.style.display = "none";
  66. var tab = dojo.doc.createElement("DIV");
  67. tab.className = "mblTabButton";
  68. if(widget.icon){
  69. var imgDiv = dojo.create("DIV");
  70. var img = dojo.create("IMG");
  71. imgDiv.className = "mblTabButtonImgDiv";
  72. img.src = widget.icon;
  73. dojox.mobile.setupIcon(img, widget.iconPos);
  74. imgDiv.appendChild(img);
  75. tab.appendChild(imgDiv);
  76. }
  77. tab.appendChild(dojo.doc.createTextNode(widget.label));
  78. tab.pane = widget;
  79. widget.tab = tab;
  80. this.connect(tab, "onclick", "onTabClick");
  81. cell.appendChild(tab);
  82. }
  83. div.appendChild(tbl);
  84. this.tabHeaderNode.appendChild(div);
  85. this.selectTab(this._selectedPane.tab);
  86. },
  87. selectTab: function(/*DomNode*/tab){
  88. this._selectedPane.domNode.style.display = "none";
  89. dojo.removeClass(this._selectedPane.tab, "mblTabButtonSelected");
  90. this._selectedPane = tab.pane;
  91. this._selectedPane.domNode.style.display = "";
  92. dojo.addClass(tab, "mblTabButtonSelected");
  93. if(dojo.isBB){
  94. var ref = tab.nextSibling;
  95. tab.parentNode.insertBefore(tab.parentNode.removeChild(tab), ref);
  96. }
  97. var view = dijit.getEnclosingWidget(this.domNode.parentNode);
  98. if(this.fixedHeader){
  99. // This widget stacks multiple panes and controls their visibility.
  100. // Each pane cannot have its own scroll position status, because
  101. // the entire widget scrolls.
  102. // When in the fixedHeader mode, the user can always select a tab
  103. // even when the current pane is scrolled down to the bottom.
  104. // Even in such cases, the next page should be shown from the top.
  105. if(view && view.scrollTo){
  106. view.scrollTo({y:0});
  107. }
  108. }
  109. view.flashScrollBar && view.flashScrollBar();
  110. },
  111. onTabClick: function(e){
  112. var tab = e.currentTarget;
  113. dojo.addClass(tab, "mblTabButtonHighlighted");
  114. setTimeout(function(){
  115. dojo.removeClass(tab, "mblTabButtonHighlighted");
  116. }, 200);
  117. this.selectTab(tab);
  118. }
  119. });
  120. dojo.declare(
  121. "dojox.mobile.TabPane",
  122. dijit._WidgetBase,
  123. {
  124. label: "",
  125. icon: "",
  126. iconPos: "",
  127. selected: false,
  128. inheritParams: function(){
  129. var parent = this.getParentWidget();
  130. if(parent){
  131. if(!this.icon){ this.icon = parent.iconBase; }
  132. if(!this.iconPos){ this.iconPos = parent.iconPos; }
  133. }
  134. },
  135. buildRendering: function(){
  136. this.inheritParams();
  137. this.domNode = this.containerNode = this.srcNodeRef || dojo.doc.createElement("DIV");
  138. this.domNode.className = "mblTabPane";
  139. },
  140. getParentWidget: function(){
  141. var ref = this.srcNodeRef || this.domNode;
  142. return ref && ref.parentNode ? dijit.getEnclosingWidget(ref.parentNode) : null;
  143. }
  144. });
  145. }