/**
|
* infoWindow的template
|
* @author Wenyb
|
* @date 2015/11/4
|
*/
|
define([
|
"base/BaseControl",
|
"dojo",
|
"dojo/_base/declare",
|
"dojo/text!controls/tab/TabControl.html",
|
"dojo/_base/lang",
|
"dojo/query",
|
"dojo/dom-construct",
|
"dojo/dom-style",
|
"dojo/dom-attr",
|
"dojo/on",
|
"dojo/dom-class",
|
"dojo/domReady!"
|
], function(
|
BaseControl,
|
dojo,
|
declare,
|
template,
|
lang,
|
query,
|
domConstruct,
|
domStyle,
|
domAttr,
|
on,
|
domClass
|
) {
|
var Widget = declare("TabControl", [BaseControl], {
|
templateString: template,
|
baseClass: "tabcontrol",
|
//{tab:[{type:"tab1",label:"TAB1",active:true},{type:"tab1",label:"TAB2"}]}
|
constructor: function(options, srcRefNode) {
|
this.activeTabType = null;
|
this.tabIndex = {};
|
},
|
startup: function() {
|
for (var i = 0; i < this.tab.length; i++) {
|
this._createTab(this.tab[i]);
|
}
|
this.inherited(arguments);
|
},
|
_createTab: function(tab) {
|
var className = this.baseClass + "-tabbutton ";
|
if (tab.active) {
|
className += this.baseClass + "-tabbutton-actived";
|
}
|
tab.span = domConstruct.create("div", {
|
className: className,
|
innerHTML: tab.label,
|
"data-type": tab.type
|
}, this.tabContainer);
|
on(tab.span, "click", lang.hitch(this, this._tabButtonClick));
|
this.tabIndex[tab.type] = tab;
|
},
|
postCreate: function() {
|
this.inherited(arguments);
|
},
|
changeActiveTab: function(type) {
|
if (this.activeTabType) {
|
var tab = this.tabIndex[this.activeTabType];
|
domClass.remove(tab.span, this.baseClass + "-tabbutton-actived");
|
if (tab.content) {
|
domStyle.set(tab.content, "display", "none");
|
}
|
this.activeTabType = null;
|
}
|
if (type) {
|
var tab = this.tabIndex[type];
|
domClass.add(tab.span, this.baseClass + "-tabbutton-actived");
|
if (tab.content) {
|
domStyle.set(tab.content, "display", "block");
|
}
|
this.activeTabType = type;
|
}
|
},
|
onChangeActiveTab: function(type) {
|
return type;
|
},
|
//将两个type的Content关联，即设为同一个dom，使得切换到两个tab时，显示状态一致的相同内容。如需根据type改变content内部行为，可对onChangeActiveTab进行拦截。
|
//type2需要已设置content，linkContent后type1的content将与type2的保持一致
|
linkContent: function(type1, type2) {
|
if (this.tabIndex[type2] && this.tabIndex[type2].content && this.tabIndex[type1]) {
|
this.tabIndex[type1].content = this.tabIndex[type2].content;
|
}
|
},
|
setContent: function(type, content) {
|
var tab = this.tabIndex[type];
|
if (tab.content) {
|
domConstruct.destroy(tab.content);
|
tab.content = null;
|
}
|
var style = "display:none";
|
if (this.activeTabType == type) {
|
style = "display:block";
|
}
|
tab.content = domConstruct.create("div", {
|
className: this.baseClass + "-tabcontent-box",
|
"data-type": type,
|
style: style
|
}, this.tabContent);
|
domConstruct.place(content, tab.content);
|
},
|
_tabButtonClick: function(evt) {
|
var type = domAttr.get(evt.currentTarget, "data-type");
|
if (this.activeTabType == type) {
|
if (!this.disableNoActiveTab) {
|
this.changeActiveTab(null);
|
this.onChangeActiveTab(null);
|
}
|
} else {
|
this.changeActiveTab(type);
|
this.onChangeActiveTab(type);
|
}
|
|
},
|
hideContent: function() {
|
this.changeActiveTab(null);
|
},
|
hideTab: function() {
|
domStyle.set(this.tabcontainer, "display", "none");
|
domStyle.set(this.content, "bottom", "0px");
|
},
|
show: function() {
|
domStyle.set(this.domNode, "display", "block");
|
},
|
hide: function() {
|
domStyle.set(this.domNode, "display", "none");
|
}
|
});
|
return Widget;
|
});
|
