forked from vitmalina/w2ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
toolbar.html
113 lines (111 loc) · 7.04 KB
/
toolbar.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
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
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../libs/font-awesome/font-awesome.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/w2fields.js"></script>
<script type="text/javascript" src="../src/w2toolbar.js"></script>
<script>
//<![CDATA[
jQuery.noConflict();
jQuery(function () {
jQuery('#toolbar').w2toolbar({
name: 'toolbar',
routeData: { id: 5, vid: '40-43' },
tooltip: 'top',
items: [
{ type: 'check', id: 'item1.1', text: 'Check', img: 'icon-page', tooltip: function () { return (new Date()).getTime(); },
checked: true, route: '/project' },
{ type: 'drop', id: 'item12', img: 'icon-page', icon: 'fa-star', tooltip: 'Drop button', html: 'so', route: '/project/:id/go', count: 4 },
{ type: 'break', id: 'break0' },
{ type: 'menu', id: 'item2', caption: 'Drop Down', img: 'icon-folder', icon: 'fa-camera', hint: 'Menu button',
items: [
{ text: 'Item 1', img: 'icon-page', route: '/project/:id/item1', tooltip: 'some' },
{ text: 'Item 2', img: 'icon-page', route: '/project/:id/item2', disabled: true },
{ text: 'Item 3', value: 'Item Three', img: 'icon-page', route: '/project/:id/item2' }
]
},
{ type: 'menu', id: 'item.2a@', img: 'icon-folder', icon: 'fa-heart', hint: 'This is some long hint',
items: [
{ id: 'item1', text: 'First Item', count: 3, icon: 'fa-heart' },
{ id: 'item2', text: 'Item 2', icon: 'fa-user', count: 12 },
{ id: 'item3', text: 'Item 3', icon: 'fa-star-empty' },
{ id: 'item4', text: 'Item 4', icon: 'fa-link', hotkey: '⌘A' },
{ id: 'item5', text: 'Without Image, Just Text', hotkey: '⌘B' }
], overlay: { top1: 10 }
},
{ type: 'menu-check', id: 'menucheck', text: 'Menu: Check',
items: [
{ id: 'item1', text: 'First Item', count: 3, icon: 'fa-heart' },
{ text: '--' },
{ id: 'item2', text: 'Item 2', icon: 'fa-user', count: 12, checked: true },
{ id: 'item3', text: 'Item 3', icon: 'fa-star-empty', hotkey: '⌘S' },
{ text: '--' },
{ id: 'item4', text: 'Item 4', icon: 'fa-link', hotkey: '⌘W', checked: true }
],
},
{ type: 'menu-radio', id: 'menu.radio', text: 'Menu: Radio',
items: [
{ id: 'item1', text: 'First Item', count: 3, icon: 'fa-heart' },
{ text: '--' },
{ id: 'item2', text: 'Item 2', icon: 'fa-user', count: 12, checked: true },
{ id: 'item3', text: 'Item 3', icon: 'fa-star-empty', checked: true },
{ text: '--' },
{ id: 'item4', text: 'Item 4', icon: 'fa-link', hotkey: '⌘L' },
{ id: 'item1a', text: 'First Item', count: 3, icon: 'fa-heart' },
{ text: '--' },
{ id: 'item2a', text: 'Item 2', icon: 'fa-user', count: 12, checked: true },
{ id: 'item3a', text: 'Item 3', icon: 'fa-star-empty', checked: true },
{ text: '--' },
{ id: 'item4a', text: 'Item 4', icon: 'fa-link', hotkey: '⌘L' }
],
},
{ type: 'break', id: 'break1' },
{ type: 'radio', id: 'item3', group: '1', caption: 'Radio 1', icon: 'fa-user', img1: 'icon-add', checked: true,
hint: 'This is some long hint', route: '/project/:id/view/:vid', style: "width: 100px; text-align: center",
},
{ type: 'radio', id: 'item4', group: '1', caption: 'Radio 2', icon: 'fa-group', img1: 'icon-add', disabled: false, count: 55,
hint: 'This is some long hint', route: '/project/:id/drop down/:vid/:id', style: "width: 100px; text-align: center",
},
{ type: 'break' },
{ type: 'drop', id: 'item7', caption: 'drop button', img: 'icon-folder',
hint: 'This is some <br/>very very<br/> very very<br/> very veryt long hint',
html : '<div style="padding: 10px; font-size: 11px">some html</div>',
route: 'another/project'
},
{ type: 'button', id: 'itemT', caption: 'Just Text', count: '1', hint: 'This is some very very very very very veryt long hint' },
{ type: 'color', id: 'item8', caption1: 'Color', icon1: 'fa-star', hint: 'Color', transparent: true, color: '888888' },
{ type: 'text-color', id: 'item9', caption1: 'Text Color', icon1: 'fa-star', hint: 'Text Color', transparent: true, color: 'FF9838' },
{ type: 'spacer' },
{ type: 'button', id: 'item5', caption: 'Item 5', img: 'icon-page', disabled: true, hint: 'This is some very very very very very veryt long hint' },
{ type: 'button', id: 'item6', caption: 'Item 6', img: 'icon-page', hint: 'This is some very very very very very veryt long hint' },
{ type: 'menu-radio', id: 'menu.radio2', text: 'Menu: Radio',
items: [
{ id: 'item1', text: 'First Item', count: 3, icon: 'fa-heart' },
{ text: '--' },
{ id: 'item2', text: 'Item 2', icon: 'fa-user', count: 12, checked: true },
{ id: 'item3', text: 'Item 3', icon: 'fa-star-empty', checked: true },
{ text: '--' },
{ id: 'item4', text: 'Item 4', icon: 'fa-link', hotkey: '⌘L' },
{ id: 'item1a', text: 'First Item', count: 3, icon: 'fa-heart' },
{ text: '--' },
{ id: 'item2a', text: 'Item 2', icon: 'fa-user', count: 12, checked: true },
{ id: 'item3a', text: 'Item 3', icon: 'fa-star-empty', checked: true },
{ text: '--' },
{ id: 'item4a', text: 'Item 4', icon: 'fa-link', hotkey: '⌘L' }
],
},
],
onClick: function (event) { console.log(event); }
});
});
function changeTab() {
w2ui['tabs'].get('tab2').caption = '<div style="width: 300px">new and long</div>';
w2ui['tabs'].refresh();
}
//]]>
</script>
<body style="margin: 50px 20px;">
<div id="toolbar" style="padding: 4px; background-color: #efefef;"></div>
</body>