forked from vitmalina/w2ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
tabs.html
52 lines (51 loc) · 2.58 KB
/
tabs.html
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
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.css" />
<script type="text/javascript" src="../libs/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../src/w2utils.js"></script>
<script type="text/javascript" src="../src/w2tabs.js"></script>
<script>
//<![CDATA[
jQuery.noConflict();
jQuery(function () {
jQuery('#tabs').w2tabs({
name : 'tabs',
active : 'tab1',
right : '12232',
flow : 'down',
tooltip : 'top',
routeData: { id: 8, vid: '2.32.3' },
tabs : [
{ id: 't1.1', text: 'Tab 1', route: '/tab1', tooltip: 'some tooltip', style: 'background-color: red; color: white' },
{ id: 't2.2', caption: 'Tab 2', route: '/tab2/:id', closable: true, tooltip: 'some other' },
{ id: 'tab3', caption: 'Tab 3', route: '/tab3/:id/view', closable: true, tooltip: 'none' },
{ id: 'tab4', caption: 'Tab 4', route: '/tab4/:id/some', closable: true },
{ id: 'tab5', caption: 'Tab 5', route: '/tab5/ok/:vid', closable: true },
{ id: 'tab6', caption: 'Tab 6', route: '/tab6/:id/:vid-:id', closable: true, class: 'classssssss' },
{ id: 'tab7', caption: 'Tab 7', route: '/tab7/:id', closable: true },
{ id: 'tab8', caption: 'Tab 8', route: '/tab8/:id', closable: true },
{ id: 'tab81', caption: 'Tab 81', route: '/tab8/:id', closable: true },
{ id: 'tab82', caption: 'Tab 82', route: '/tab8/:id', closable: true },
{ id: 'tab83', caption: 'Tab 83', route: '/tab8/:id', closable: true },
{ id: 'tab84', caption: 'Tab 84', route: '/tab8/:id', closable: true },
{ id: 'tab85', caption: 'Tab 85', route: '/tab8/:id', closable: true },
{ id: 'tab86', caption: 'Tab 86', route: '/tab8/:id', closable: true },
{ id: 'tab87', caption: 'Tab 87', route: '/tab8/:id', closable: true },
{ id: 'new', text: '+', style: 'padding-left: 10px; padding-right: 10px; font-weight: bold;' },
]
});
w2ui.tabs.right = '<span style="white-space: nowrap">new right</span>';
w2ui.tabs.refresh();
});
function changeTab() {
w2ui['tabs'].get('t2.2').text = '<div style="width: 300px">new and long</div>';
w2ui['tabs'].refresh();
}
//]]>
</script>
<body>
<br/><br/>
<div id="tabs"></div>
<br/>
<button class="w2ui-btn" onclick="changeTab()">Change Tab</button>
</body>