Tab.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. o2.widget = o2.widget || {};
  2. o2.widget.Tab = new Class({
  3. Implements: [Options, Events],
  4. Extends: o2.widget.Common,
  5. options: {
  6. "style": "default"
  7. },
  8. initialize: function(container, options){
  9. this.setOptions(options);
  10. this.pages = [];
  11. this.path = o2.session.path+"/widget/$Tab/";
  12. this.cssPath = o2.session.path+"/widget/$Tab/"+this.options.style+"/css.wcss";
  13. this._loadCss();
  14. this.css = Object.clone(this.css);
  15. this.showPage = null;
  16. this.node = $(container);
  17. },
  18. load: function(){
  19. if (this.fireEvent("queryLoad")){
  20. if (!this.tabNodeContainer) this.tabNodeContainer = new Element("div");
  21. this.tabNodeContainer.set("styles", this.css.tabNodeContainer);
  22. this.tabNodeContainer.inject(this.node);
  23. if (!this.tabNodeContainerRight) this.tabNodeContainerRight = new Element("div.tabNodeContainerRight");
  24. this.tabNodeContainerRight.set("styles", this.css.tabNodeContainerRight);
  25. this.tabNodeContainerRight.inject(this.tabNodeContainer);
  26. if (!this.tabNodeContainerLeft) this.tabNodeContainerLeft = new Element("div.tabNodeContainerLeft");
  27. this.tabNodeContainerLeft.set("styles", this.css.tabNodeContainerLeft);
  28. this.tabNodeContainerLeft.inject(this.tabNodeContainer);
  29. if (!this.tabNodeContainerArea) this.tabNodeContainerArea = new Element("div.tabNodeContainerArea");
  30. this.tabNodeContainerArea.set("styles", this.css.tabNodeContainerArea);
  31. this.tabNodeContainerArea.inject(this.tabNodeContainerLeft);
  32. if (!this.contentNodeContainer) this.contentNodeContainer = new Element("div");
  33. this.contentNodeContainer.set("name", "MWFcontentNodeContainer");
  34. this.contentNodeContainer.set("styles", this.css.contentNodeContainer);
  35. this.contentNodeContainer.inject(this.node);
  36. this.tabNodeContainerRight.addEvents({
  37. "mouseover": function(){this.tabNodeContainerRight.setStyles(this.css.tabNodeContainerRight_over)}.bind(this),
  38. "mouseout": function(){this.tabNodeContainerRight.setStyles(this.css.tabNodeContainerRight)}.bind(this)
  39. });
  40. o2.require("o2.xDesktop.Menu", function(){
  41. this.tabMenu = new o2.xDesktop.Menu(this.tabNodeContainerRight, {
  42. "style": "tab",
  43. "event": "click",
  44. "container": this.tabNodeContainerRight,
  45. "where": {"x": "right", "y": "bottom"},
  46. "onQueryShow": function(){
  47. this.loadOverMenu();
  48. }.bind(this)
  49. });
  50. this.tabMenu.load();
  51. }.bind(this));
  52. this.tabNodeContainerRight.hide();
  53. this.fireEvent("postLoad");
  54. }
  55. },
  56. rebuildTab: function(contentAreaNode,contentNode, pageNode){
  57. var tabPage = new o2.widget.TabPage(contentNode, "", this, {"isClose": false});
  58. tabPage.contentNodeArea = contentAreaNode;
  59. tabPage.tabNode = pageNode;
  60. tabPage.textNode = pageNode.getFirst();
  61. tabPage.closeNode = tabPage.textNode.getFirst();
  62. tabPage.options.title = tabPage.textNode.get("text");
  63. tabPage.load();
  64. this.pages.push(tabPage);
  65. return tabPage;
  66. },
  67. addTab: function(node, title, isclose, pageNode){
  68. var tabPage = new o2.widget.TabPage(node, title, this, {"isClose": isclose, "tabNode": pageNode});
  69. tabPage.load();
  70. this.pages.push(tabPage);
  71. return tabPage;
  72. },
  73. loadOverMenu: function(e){
  74. this.tabMenu.clearItems();
  75. var _self = this;
  76. for (var n=this.showTabIndex; n<this.pages.length; n++){
  77. var page = this.pages[n];
  78. var menuItem = this.tabMenu.addMenuItem(page.options.title || page.tabNode.get("text"), "click", function(){
  79. _self.showOverPage(this);
  80. });
  81. menuItem.tabPage = page;
  82. }
  83. },
  84. showOverPage: function(item){
  85. var page = item.tabPage;
  86. if (page){
  87. this.pages.erase(page);
  88. this.pages.unshift(page);
  89. page.tabNode.inject(this.tabNodeContainerArea, "top");
  90. page.showTabIm();
  91. this.resize();
  92. }
  93. },
  94. resize: function(){
  95. var size = this.tabNodeContainerLeft.getSize();
  96. var tabWidth = 0;
  97. for (var i=0; i<this.pages.length; i++){
  98. var tabSize = this.pages[i].tabNode.getSize();
  99. tabWidth += tabSize.x;
  100. if (tabWidth>size.x) break;
  101. }
  102. this.showTabIndex = i;
  103. if (tabWidth>size.x && i<this.pages.length){
  104. this.tabNodeContainerRight.show();
  105. }else{
  106. this.tabNodeContainerRight.hide();
  107. }
  108. }
  109. });
  110. o2.widget.TabPage = new Class({
  111. Implements: [Options, Events],
  112. options: {
  113. "isClose": true,
  114. "tabNode": null,
  115. "title": ""
  116. },
  117. initialize: function(node, title, tab, options){
  118. this.setOptions(options);
  119. this.options.title = title;
  120. this.tab = tab;
  121. this.contentNode = $(node);
  122. },
  123. load: function(){
  124. if (!this.contentNodeArea) this.contentNodeArea = new Element("div");
  125. this.contentNodeArea.set("styles", this.tab.css.contentNodeArea);
  126. if (!this.tabNode) this.tabNode = new Element("div");
  127. this.tabNode.set("styles", this.tab.css.tabNode);
  128. // this.tabNode.addEvent("mousedown", function(event){event.stop();});
  129. if (!this.textNode) this.textNode = new Element("div").inject(this.tabNode);
  130. this.textNode.set({
  131. "styles": this.tab.css.tabTextNode,
  132. "text": this.options.title
  133. });
  134. this.tabNode.addEvent("click", this._showTab.bind(this));
  135. this.tabNode.addEvent("mousedown", function(e){ e.stopPropagation();});
  136. if (this.options.isClose){
  137. if (!this.closeNode) this.closeNode = new Element("div").inject(this.tabNode);
  138. this.closeNode.set({
  139. "styles": this.tab.css.tabCloseNode
  140. });
  141. this.closeNode.addEvent("click", this.closeTab.bind(this));
  142. }
  143. this.contentNodeArea.inject(this.tab.contentNodeContainer);
  144. this.tabNode.inject(this.tab.tabNodeContainerArea);
  145. this.contentNode.inject(this.contentNodeArea);
  146. this.tab.resize();
  147. },
  148. loadExisted: function(){
  149. // this.tabNode.addEvent("mousedown", function(event){event.stop();});
  150. this.tabNode.addEvent("click", this._showTab.bind(this));
  151. this.tab.resize();
  152. },
  153. _showTab: function(){
  154. this.showTabIm();
  155. },
  156. showTabIm: function(callback){
  157. if (!this.isShow){
  158. // if (!this.tabNode.isIntoView()){
  159. // this.tab.pages.erase(this);
  160. // this.tab.pages.unshift(this);
  161. // this.tabNode.inject(this.tab.tabNodeContainerArea, "top");
  162. // this.tab.resize();
  163. // }
  164. this.tab.pages.each(function(page){
  165. if (page.isShow) page.hideIm();
  166. });
  167. this.showIm(callback);
  168. }
  169. },
  170. showTab: function(callback){
  171. if (!this.isShow){
  172. this.tab.pages.each(function(page){
  173. if (page.isShow) page.hide();
  174. });
  175. this.show(callback);
  176. }
  177. },
  178. showIm: function(callback){
  179. this.fireEvent("queryShow");
  180. this.tabNode.setStyle("display","");
  181. this.tabNode.set("styles", this.tab.css.tabNodeCurrent);
  182. if( this.tab.options.useMainColor ){
  183. this.tabNode.addClass("mainColor_color");
  184. this.tabNode.addClass("mainColor_border");
  185. }
  186. this.textNode.set("styles", this.tab.css.tabTextNodeCurrent);
  187. if (this.closeNode) this.closeNode.set("styles", this.tab.css.tabCloseNodeCurrent);
  188. this.contentNodeArea.setStyle("display", "block");
  189. this.contentNodeArea.setStyle("opacity", 1);
  190. this.isShow = true;
  191. this.tab.showPage = this;
  192. if (callback) callback();
  193. this.fireEvent("show");
  194. this.fireEvent("postShow");
  195. },
  196. show: function(callback){
  197. this.fireEvent("queryShow");
  198. this.tabNode.setStyle("display","");
  199. this.tabNode.set("styles", this.tab.css.tabNodeCurrent);
  200. if( this.tab.options.useMainColor ){
  201. this.tabNode.addClass("mainColor_color");
  202. this.tabNode.addClass("mainColor_border");
  203. }
  204. this.textNode.set("styles", this.tab.css.tabTextNodeCurrent);
  205. if (this.closeNode) this.closeNode.set("styles", this.tab.css.tabCloseNodeCurrent);
  206. this.contentNodeArea.setStyle("display", "block");
  207. this.contentNodeArea.setStyle("opacity", 1);
  208. if (!this.morph){
  209. this.morph = new Fx.Morph(this.contentNodeArea, {duration: 100});
  210. }
  211. this.morph.start({
  212. "opacity": 1
  213. }).chain(function(){
  214. this.isShow = true;
  215. this.tab.showPage = this;
  216. if (callback) callback();
  217. this.fireEvent("postShow");
  218. }.bind(this));
  219. this.fireEvent("show");
  220. },
  221. hideIm: function(){
  222. if (this.isShow){
  223. this.fireEvent("queryHide");
  224. this.tabNode.set("styles", this.tab.css.tabNode);
  225. if( this.tab.options.useMainColor ){
  226. this.tabNode.removeClass("mainColor_color");
  227. this.tabNode.removeClass("mainColor_border");
  228. }
  229. this.textNode.set("styles", this.tab.css.tabTextNode);
  230. if (this.closeNode) this.closeNode.set("styles", this.tab.css.tabCloseNode);
  231. this.contentNodeArea.setStyle("display", "none");
  232. this.contentNodeArea.setStyle("opacity", 0);
  233. this.isShow = false;
  234. this.fireEvent("hide");
  235. this.fireEvent("postHide");
  236. }
  237. },
  238. hide: function(){
  239. if (this.isShow){
  240. this.fireEvent("queryHide");
  241. this.tabNode.set("styles", this.tab.css.tabNode);
  242. if( this.tab.options.useMainColor ){
  243. this.tabNode.removeClass("mainColor_color");
  244. this.tabNode.removeClass("mainColor_border");
  245. }
  246. this.textNode.set("styles", this.tab.css.tabTextNode);
  247. if (this.closeNode) this.closeNode.set("styles", this.tab.css.tabCloseNode);
  248. if (!this.morph){
  249. this.morph = new Fx.Morph(this.contentNodeArea, {duration: 100});
  250. }
  251. this.morph.start({
  252. "opacity": 0
  253. }).chain(function(){
  254. this.contentNodeArea.setStyle("display", "none");
  255. this.isShow = false;
  256. this.fireEvent("postHide");
  257. }.bind(this));
  258. this.fireEvent("hide");
  259. }
  260. },
  261. enableTab : function( notShow ){
  262. this.disabled = false;
  263. if( notShow ){
  264. this.tabNode.show();
  265. }else{
  266. this.showTab();
  267. }
  268. },
  269. disableTab : function( notShowSibling ){
  270. this.disabled = true;
  271. this.hideTab( notShowSibling );
  272. },
  273. hideTab: function( notShowSibling ){
  274. this.fireEvent("queryHide");
  275. this.tabNode.hide();
  276. this.contentNodeArea.hide();
  277. var tmp = [];
  278. if( !notShowSibling ){
  279. var prevPage = this.getPrevPage();
  280. if (prevPage && !prevPage.disabled){
  281. prevPage.showTab();
  282. }else{
  283. if (this.tab.pages.length){
  284. for( var i=0; i<this.tab.pages.length; i++ ){
  285. var page = this.tab.pages[i];
  286. if( !page.disabled ){
  287. page.showTab();
  288. break;
  289. }
  290. }
  291. //this.tab.pages[this.tab.pages.length-1].showTab();
  292. }
  293. }
  294. }
  295. this.isShow = false;
  296. this.fireEvent("hide");
  297. },
  298. closeTab: function(){
  299. this.fireEvent("queryClose");
  300. var prevPage = this.getPrevPage();
  301. this.contentNodeArea.destroy();
  302. this.tabNode.destroy();
  303. var tmp = [];
  304. this.tab.pages = this.tab.pages.erase(this);
  305. // this.tab.pages.each(function(item){
  306. // if (item!=this){
  307. // tmp.push(item);
  308. // }
  309. // });
  310. // this.tab.pages = tmp;
  311. if (prevPage && !prevPage.disabled){
  312. prevPage.showTab();
  313. }else{
  314. if (this.tab.pages.length){
  315. for( var i=0; i<this.tab.pages.length; i++ ){
  316. var page = this.tab.pages[i];
  317. if( !page.disabled ){
  318. page.showTab();
  319. break;
  320. }
  321. }
  322. }
  323. //if (this.tab.pages.length) this.tab.pages[this.tab.pages.length-1].showTab();
  324. }
  325. this.fireEvent("close");
  326. },
  327. getPrevPage: function(){
  328. var idx = this.tab.pages.indexOf(this);
  329. var prevIdx = idx-1;
  330. if (prevIdx<0){
  331. return null;
  332. }else{
  333. return this.tab.pages[prevIdx];
  334. }
  335. }
  336. });