demo.html
1.65 KB
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
<div id="tab" class="page out" data-title="tab页插件">
<div id="tab-header"></div>
<div id="tab-main"></div>
</div>
<script type="text/javascript">
require(["NavHeader", "Tab"], function(NavHeader, Tab) {
var _u = require("mUtil");
var hasClsPicker = typeof clsPicker !== "undefined";
if(!hasClsPicker) {
new NavHeader({
el: "tab-header",
option: {
title:"tab页插件",
smallTitle:"tab"
}
}).render();
}
new Tab({
el: "tab-main",
option: {
tabs:[
{
tabName : "选项卡一",
tabContent : [
{el:"tab-a", type:"ColumnBreak", option:{content : "分栏插件动态数据示例"}},
{el:"tab-b", type:"ColumnBreak", option:{content : "分栏插件静态数据示例", align : "center"}},
]
},
{
tabName : "选项卡二",
tabContent : [
{
el: "tab-c",
type : "Html",
option: {
htm : [
'<ul>',
'<li>1.HTML控件</li>',
'<li>2.HTML控件</li>',
'<li>3.HTML控件</li>',
'</ul>'
].join('')
}
}
]
},
{
tabName : "选项卡三",
tabContent : []
}
]
}
}).render().then(function() {
if (!hasClsPicker) return;
_u.vetically("#tab-main");
clsPicker.golalSetting({
container: ".wev-comp-Tab",
type: "Tab"
});
setTimeout(() => {
new clsPicker({
selector: ".wev-comp-Tab",
lineYSkew: 50,
skew: [8, ""]
});
new clsPicker({
selector: ".wev-tab-content",
lineYSkew: 20,
skew: [5, ""]
});
new clsPicker({
selector: ".wev-tab-selected",
lineYSkew: 20
});
}, 100);
});
});
</script>