forked from RubyLouvre/avalon
/
avalon.tabs.js
208 lines (193 loc) · 8.12 KB
/
avalon.tabs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
define(["avalon"], function(avalon) {
var styleEl = document.getElementById("avalonStyle")
avalon.ui.tabs = function(element, data, vmodels) {
var el, tabsParent, tabs = [], tabpanels = []
var options = data.tabsOptions
var $element = avalon(element)
// 清空它内部所有节点，并收集其内容，构建成tabs与tabpanels两个数组
while (el = element.firstChild) {
if (el.tagName === "UL" || el.tagName === "OL") {
tabsParent = el
}
if (el.tagName === "DIV") {
tabpanels.push({
content: el.innerHTML,
contentType: 'content'
})
}
element.removeChild(el)
}
for (var i = 0; el = tabsParent.children[i++]; ) {
var tabOptions = avalon(el).data()
tabs.push({
title: el.innerHTML,
removable: tabOptions.removable == undefined ? options.removable : tabOptions.removable,
disabled: tabOptions.disabled == undefined ? false : tabOptions.disabled
})
}
// 构建组建的ViewModel
var vmodel = avalon.define(data.tabsId, function(vm) {
vm.active = options.active
vm.collapsible = options.collapsible
vm.collapsed = false
vm.removable = options.removable
vm.tabs = tabs
vm.tabpanels = tabpanels
vm.event = options.event
vm.activate = function(e, index) {
e.preventDefault()
if (vm.tabs[index].disabled === true) {
return
}
if (vm.event == 'click' && vm.active == index && vm.collapsible) {
vm.collapsed = !vm.collapsed
return
}
if (vm.collapsible) {
vm.collapsed = false
}
if (vm.event != index) {
avalon.nextTick(function() {
vm.active = index;
options.activate.call(this, e, vmodel)
})
}
}
vm.collapse = function(e, index) {
e.preventDefault()
if (vm.tabs[index].disabled === true) {
return
}
if (vm.collapsible) {
vm.collapsed = !vm.collapsed
}
}
vm.disable = function(index, disable) {
disable = typeof disable == "undefined" ? true : disable
if (!avalon.isArray(index)) {
index = [index]
}
var total = vm.tabs.length
index.forEach(function(idx) {
if (idx >= 0 && total > idx) {
vm.tabs[idx].disabled = disable
}
})
}
vm.enable = function(index) {
vm.disable(index, false)
}
vm.add = function(config) {
var title = config.title || 'Tab Tile'
var content = config.content || '<div></div>'
var exsited = false
vm.tabpanels.forEach(function(panel) {
if (panel.contentType == 'include' && panel.content == config.content) {
exsited = true
}
})
if (exsited === true) {
return
}
vm.tabpanels.push({
content: content,
contentType: config.contentType
})
vm.tabs.push({
title: title,
removable: vm.removable,
disabled: false
})
if (config.actived) {
avalon.nextTick(function() {
vm.active = vm.tabs.length - 1
})
}
}
vm.remove = function(e) {
e.preventDefault()
var index = this.$vmodel.$index
if (vm.tabs[index].disabled === true) {
return
}
vm.tabs.removeAt(index)
vm.tabpanels.removeAt(index)
index = index > 1 ? index - 1 : 0
avalon.nextTick(function() {
vm.active = index
vm.collapsed = false
})
}
vm.bottom = options.bottom
})
avalon.nextTick(function() {
$element.addClass("ui-tabs ui-widget ui-widget-content ui-corner-all")
var collapse = options.event !== 'click' ? ' ms-click="collapse($event,$index)"' : ''
// 设置动态模板
var tablist = '<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header"' +
' ms-class-ui-corner-bottom="bottom" ms-class-ui-corner-all="!bottom" ms-each-tab="tabs">' +
'<li class="ui-state-default" ' +
' ms-class-0="ui-corner-top:!bottom"' +
' ms-class-1="ui-corner-bottom:bottom"' +
' ms-class-2="ui-tabs-active:active == $index"' +
' ms-class-3="ui-state-active:active == $index && !tab.disabled"' +
' ms-class-4="ui-state-disabled:tab.disabled"' +
' ms-' + options.event + '="activate($event,$index)"' + collapse +
' ms-hover="ui-state-hover:!tab.disabled">' + // float: left; margin: 0.4em 0.2em 0 0; cursor: pointer;这样jquery ui没有封装进去
' <a href="#">{{tab.title | html}}</a>' +
'<span ms-visible="tab.removable && !tab.disabled"' +
' class="ui-icon ui-icon-close"' +
' style="float: left; margin: 0.4em 0.2em 0 0; cursor: pointer;"' +
' ms-click="remove"></span></li></ul>';
var panels = '<div ms-each-panel="tabpanels" >' +
'<div ms-if="panel.contentType == \'content\' && active == $index"' +
' class="ui-tabs-panel ui-widget-content"' +
' ms-class="ui-corner-bottom:!bottom"' +
' ms-visible="active == $index && !(collapsed && collapsible)" >{{panel.content | html}}' +
'</div>' +
'<div ms-if="panel.contentType == \'include\' && active == $index"' +
' class="ui-tabs-panel ui-widget-content"' +
' ms-class="ui-corner-bottom:!bottom"' +
' ms-visible="active == $index && !(collapsed && collapsible)"' +
' ms-include-src="panel.content" >' +
'</div></div>'
//jquery ui的.ui-helper-clearfix 类不支持对IE6清除浮动，这时需要fix一下
if (!avalon.ui.fixUiHelperClearfix && typeof styleEl.style.maxHeight == "undefined") {
styleEl.styleSheet.cssText += ".ui-helper-clearfix {_zoom:1;}"
avalon.ui.fixUiHelperClearfix = true
}
element.innerHTML = vmodel.bottom ? panels + tablist : tablist + panels
element.setAttribute("ms-class-1", "ui-tabs-collapsible:collapsible")
element.setAttribute("ms-class-2", "tabs-bottom:bottom")
avalon.scan(element, [vmodel].concat(vmodels))
})
return vmodel
}
avalon.ui.tabs.defaults = {
active: 0, //默认打开第几个面板
event: "click", //打开面板的事件，移过(mouseover)还是点击(click)
collapsible: false,
bottom: false, //按钮位于上方还是上方
removable: false, //按钮的左上角是否出现X，用于移除按钮与对应面板
activate: avalon.noop// 切换面板后触发的回调
}
return avalon
})
/*
<div ms-ui="tabs">
<ul>
<li>xxxxxxxxxxxx</li>
<li>yyyyyyyyyyyyy</li>
<li>zzzzzzzzzzzz</li>
</ul>
<div>
xxx 第1个面板
</div>
<div>
xxx 第2个面板
</div>
<div>
xxx 第3个面板
</div>
</div>
*/