forked from vitmalina/w2ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
338 lines (323 loc) · 19.6 KB
/
popup.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
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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<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="../dist/w2ui.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/w2popup.js"></script>
<script type="text/javascript" src="../src/w2grid.js"></script>
<script>
jQuery.noConflict();
//<![CDATA[
var items = [{"id":1,"fname":"Katsia","lname":"Yadav","email":"[email protected]","manager":"--","snumber":7958936,"sdate":893300000000,"text":"Katsia Yadav"},{"id":2,"fname":"Katsia","lname":"Johnson","email":"[email protected]","manager":"--","snumber":5233710,"sdate":1890000000000,"text":"Katsia Johnson"},{"id":3,"fname":"John","lname":"Johnson","email":"[email protected]","manager":"--","snumber":9588870,"sdate":1387700000000,"text":"John Johnson"},{"id":4,"fname":"Snehal","lname":"Rene","email":"[email protected]","manager":"--","snumber":559456,"sdate":23300000000,"text":"Snehal Rene"},{"id":5,"fname":"Katsia","lname":"Rene","email":"[email protected]","manager":"--","snumber":2688870,"sdate":42800000000,"text":"Katsia Rene"},{"id":6,"fname":"Olivia","lname":"Vaishnav","email":"[email protected]","manager":"--","snumber":4256597,"sdate":1819500000000,"text":"Olivia Vaishnav"},{"id":7,"fname":"John","lname":"Vaishnav","email":"[email protected]","manager":"--","snumber":8736615,"sdate":1031500000000,"text":"John Vaishnav"},{"id":8,"fname":"Peter","lname":"Rene","email":"[email protected]","manager":"--","snumber":3843721,"sdate":756700000000,"text":"Peter Rene"},{"id":9,"fname":"Thomas","lname":"Sidorov","email":"[email protected]","manager":"--","snumber":425232,"sdate":1939300000000,"text":"Thomas Sidorov"},{"id":10,"fname":"Olivia","lname":"Yadav","email":"[email protected]","manager":"--","snumber":3354272,"sdate":919700000000,"text":"Olivia Yadav"},{"id":11,"fname":"Thomas","lname":"Johnson","email":"[email protected]","manager":"--","snumber":1952237,"sdate":400400000000,"text":"Thomas Johnson"},{"id":12,"fname":"Olivia","lname":"Yadav","email":"[email protected]","manager":"--","snumber":3255552,"sdate":851000000000,"text":"Olivia Yadav"},{"id":13,"fname":"Thomas","lname":"Rene","email":"[email protected]","manager":"--","snumber":8584320,"sdate":588400000000,"text":"Thomas Rene"},{"id":14,"fname":"Sergei","lname":"Sidorov","email":"[email protected]","manager":"--","snumber":2627941,"sdate":87400000000,"text":"Sergei Sidorov"},{"id":15,"fname":"Thomas","lname":"Johnson","email":"[email protected]","manager":"--","snumber":6673430,"sdate":1046300000000,"text":"Thomas Johnson"},{"id":16,"fname":"John","lname":"Sidorov","email":"[email protected]","manager":"--","snumber":2497066,"sdate":41700000000,"text":"John Sidorov"},{"id":17,"fname":"Vitali","lname":"Yadav","email":"[email protected]","manager":"--","snumber":5692213,"sdate":1096300000000,"text":"Vitali Yadav"},{"id":18,"fname":"Divia","lname":"Yadav","email":"[email protected]","manager":"--","snumber":7819398,"sdate":487200000000,"text":"Divia Yadav"},{"id":19,"fname":"Avinash","lname":"Johnson","email":"[email protected]","manager":"--","snumber":8941140,"sdate":132000000000,"text":"Avinash Johnson"},{"id":20,"fname":"John","lname":"Johnson","email":"[email protected]","manager":"--","snumber":8133699,"sdate":976000000000,"text":"John Johnson"},{"id":21,"fname":"Peter","lname":"Sidorov","email":"[email protected]","manager":"--","snumber":7125464,"sdate":1508400000000,"text":"Peter Sidorov"},{"id":22,"fname":"Avinash","lname":"Cuban","email":"[email protected]","manager":"--","snumber":2706137,"sdate":1920100000000,"text":"Avinash Cuban"},{"id":23,"fname":"Thomas","lname":"Vasiliev","email":"[email protected]","manager":"--","snumber":5294190,"sdate":1147300000000,"text":"Thomas Vasiliev"},{"id":24,"fname":"Olivia","lname":"Sidorov","email":"[email protected]","manager":"--","snumber":6656162,"sdate":707900000000,"text":"Olivia Sidorov"},{"id":25,"fname":"Vitali","lname":"Cuban","email":"[email protected]","manager":"--","snumber":2285937,"sdate":662100000000,"text":"Vitali Cuban"},{"id":26,"fname":"Olivia","lname":"Yadav","email":"[email protected]","manager":"--","snumber":5547711,"sdate":722600000000,"text":"Olivia Yadav"},{"id":27,"fname":"Katsia","lname":"Rene","email":"[email protected]","manager":"--","snumber":6941307,"sdate":1111400000000,"text":"Katsia Rene"},{"id":28,"fname":"Olivia","lname":"Yadav","email":"[email protected]","manager":"--","snumber":5386227,"sdate":1158600000000,"text":"Olivia Yadav"},{"id":29,"fname":"Vitali","lname":"Yadav","email":"[email protected]","manager":"--","snumber":9961690,"sdate":481800000000,"text":"Vitali Yadav"},{"id":30,"fname":"Avinash","lname":"Johnson","email":"[email protected]","manager":"--","snumber":4428523,"sdate":1595300000000,"text":"Avinash Johnson"},{"id":31,"fname":"Sue","lname":"Johnson","email":"[email protected]","manager":"--","snumber":2673901,"sdate":915600000000,"text":"Sue Johnson"},{"id":32,"fname":"John","lname":"Peterson","email":"[email protected]","manager":"--","snumber":4740847,"sdate":1994700000000,"text":"John Peterson"},{"id":33,"fname":"Katsia","lname":"Cuban","email":"[email protected]","manager":"--","snumber":1917820,"sdate":1648000000000,"text":"Katsia Cuban"},{"id":34,"fname":"Peter","lname":"Vasiliev","email":"[email protected]","manager":"--","snumber":6593386,"sdate":1809900000000,"text":"Peter Vasiliev"},{"id":35,"fname":"Peter","lname":"Vasiliev","email":"[email protected]","manager":"--","snumber":1401708,"sdate":863700000000,"text":"Peter Vasiliev"},{"id":36,"fname":"Thomas","lname":"Vaishnav","email":"[email protected]","manager":"--","snumber":4612052,"sdate":1510300000000,"text":"Thomas Vaishnav"},{"id":37,"fname":"Katsia","lname":"Vaishnav","email":"[email protected]","manager":"--","snumber":1497013,"sdate":77700000000,"text":"Katsia Vaishnav"},{"id":38,"fname":"Snehal","lname":"Vaishnav","email":"[email protected]","manager":"--","snumber":8596229,"sdate":859800000000,"text":"Snehal Vaishnav"},{"id":39,"fname":"Sue","lname":"Vasiliev","email":"[email protected]","manager":"--","snumber":1865468,"sdate":974200000000,"text":"Sue Vasiliev"},{"id":40,"fname":"Peter","lname":"Vasiliev","email":"[email protected]","manager":"--","snumber":512986,"sdate":953200000000,"text":"Peter Vasiliev"},{"id":41,"fname":"John","lname":"Peterson","email":"[email protected]","manager":"--","snumber":2480910,"sdate":1598300000000,"text":"John Peterson"},{"id":42,"fname":"Katsia","lname":"Twist","email":"[email protected]","manager":"--","snumber":7820813,"sdate":1033900000000,"text":"Katsia Twist"},{"id":43,"fname":"Snehal","lname":"Vasiliev","email":"[email protected]","manager":"--","snumber":5173687,"sdate":1181700000000,"text":"Snehal Vasiliev"},{"id":44,"fname":"Thomas","lname":"Yadav","email":"[email protected]","manager":"--","snumber":444415,"sdate":1093500000000,"text":"Thomas Yadav"},{"id":45,"fname":"Olivia","lname":"Vaishnav","email":"[email protected]","manager":"--","snumber":9915039,"sdate":9400000000,"text":"Olivia Vaishnav"},{"id":46,"fname":"Vitali","lname":"Vaishnav","email":"[email protected]","manager":"--","snumber":2802999,"sdate":1311300000000,"text":"Vitali Vaishnav"},{"id":47,"fname":"Sergei","lname":"Cuban","email":"[email protected]","manager":"--","snumber":9298839,"sdate":526800000000,"text":"Sergei Cuban"},{"id":48,"fname":"Olivia","lname":"Vasiliev","email":"[email protected]","manager":"--","snumber":3020811,"sdate":232900000000,"text":"Olivia Vasiliev"},{"id":49,"fname":"Thomas","lname":"Cuban","email":"[email protected]","manager":"--","snumber":4161736,"sdate":1210100000000,"text":"Thomas Cuban"},{"id":50,"fname":"Divia","lname":"Johnson","email":"[email protected]","manager":"--","snumber":1014931,"sdate":1127100000000,"text":"Divia Johnson"}];
// w2popup.load({
// url: 'popup-template.html',
// showMax: true,
// onMax: function (event) {
// console.log('max', event);
// },
// onMin: function (event) {
// console.log('min', event);
// },
// onOpen: function (event) {
// console.log('open', event);
// event.onComplete = function () {
// jQuery('#w2ui-popup #date').w2field('color', {
// items: items
// });
// }
// },
// onClose: function (event) {
// console.log('close', event);
// event.onComplete = function () {
// console.log('closed');
// }
// },
// onKeydown: function (event) {
// console.log('key', event);
// }
// });
function showOverlay(el) {
jQuery(el).w2overlay({
html: '<div style="padding: 10px;">Some html</div>',
css: { width: '200px', padding: '10px' }
});
}
function showOverlayGrid(el) {
jQuery(el).w2overlay({
html: '<div id="grid" style="padding: 0px; border: 0px; width: 320px; height: 400px;"></div>',
css: { width: '200px', padding: '10px' },
name: 'grid-overlay',
onShow: function (event) {
jQuery('#w2ui-overlay-grid-overlay #grid').w2render('grid');
}
});
}
function showMenu(el) {
jQuery(el).w2menu({
items: [
{ id: 1, text: 'Edit', img: 'icon-folder', hint: 'edit' },
{ id: 2, text: '--'},
{ id: 3, text: 'Copy', img: 'icon-folder' },
{ id: 4, text: 'Paste', img: 'icon-page', disabled: true },
{ id: 5, text: 'Hidden', img: 'icon-page', hidden: true },
{ id: 6, text: '--'},
{ id: 7, text: 'Delete Item', img: 'icon-page' },
],
onSelect: function (event) {
console.log(event);
}
});
}
function checkMenu(el) {
jQuery(el).w2menu({
type: 'radio',
items: [
{ id: 1, text: 'Iten A', checked: true },
{ id: 2, text: '--' },
{ id: 3, text: 'Item 1' },
{ id: 4, text: 'Item 2', disabled: true },
{ id: 5, text: 'Item 3' },
{ id: 6, text: 'Item 4' },
{ id: 7, text: '--' },
{ id: 8, text: 'Item 5' },
],
onSelect: function (event) {
console.log(event);
}
});
}
function myConfirm () {
w2confirm({
title: 'Title',
msg: 'Message',
width: 500,
height: 250,
yes_text: 'Yes',
no_text: 'No',
callBack: function (btn) {
console.log('Common call back '+ btn);
},
onOpen: function (event) {
console.log('confirm open', event)
},
onClose: function (event) {
console.log('confirm close', event)
}
})
.yes(function () {
console.log('Yes clicked');
})
.no(function () {
console.log('No clicked');
});
}
function myPrompt () {
w2prompt({
title: 'Title',
msg: 'Message',
width: 500,
height: 250,
yes_text: 'Yes',
no_text: 'No',
callBack: function (btn) {
console.log('Common call back '+ btn);
},
onOpen: function () {
console.log('prompt open', event)
},
onClose: function () {
console.log('prompt close', event)
}
})
.ok(function () {
console.log('Ok clicked');
})
.change(function (text) {
console.log('Change: ', text);
});
}
function myActions() {
w2popup.open({
title: 'Actions',
body: 'some',
actions: {
"Action 1": function (action) {
console.log('Popup Action 1', action)
},
action2: {
text1: "Action 2 Text",
class: 'w2ui-btn-blue',
style: 'border-radius: 0',
onClick: function (action) {
console.log('Popup Action 2', action)
}
},
help: ' Some help string'
},
onAction: function (action) {
console.log(action)
}
})
}
function popup3 () {
w2popup.open({
title : 'Some title',
buttons : '<button id="btnConfirm" class="w2ui-btn">Open Confirm</button>',
width : 600,
height : 400,
onOpen : function (event) {
event.onComplete = function () {
_tmp();
jQuery('#w2ui-popup #btnConfirm').on('click', _tmp);
};
function _tmp() {
w2confirm('Click "NO" to open an w2alert.')
.no(function () {
w2alert('You clicked "NO" button.');
});
}
}
});
}
function popupGrid() {
w2popup.open({
title : 'Grid and Form',
width : 700,
height : 500,
showMax : true,
body : '<div id="grid" style="position: absolute; left: 10px; right: 10px; top: 10px; height: 50%;"></div>'+
'<div id="form" style="position: absolute; left: 10px; right: 10px; bottom: 10px; height: 50%;"></div>',
onOpen : function (event) {
event.onComplete = function () {
jQuery('#w2ui-popup #grid').w2render('grid');
jQuery('#w2ui-popup #form').w2render('form');
}
}
})
}
function popupLayout() {
w2popup.open({
title : 'Layout Inside Popup',
width : 700,
height : 500,
showMax : true,
body : '<div id="layout" style="position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px"></div>',
buttons : '<button class="w2ui-btn" onclick="w2alert(22)">Message</button>',
onOpen : function (event) {
event.onComplete = function () {
jQuery('#w2ui-popup #layout').w2render('layout');
}
}
})
}
function contextMenu2(event) {
jQuery('body').w2menu({
items: [
{ id: 1, text: 'First item' },
{ id: 2, text: 'Second item' },
],
onSelect: function (event) {
console.log('select', event);
},
originalEvent: event
})
event.preventDefault();
}
jQuery(function () {
jQuery().w2grid({ name: 'grid',
show: { toolbar: true },
// selectType: 'cell',
columns: [
{ text: 'First', field: 'fname', size: '100%', editable: { type: 'text' }, searchable: true },
{ text: 'Second', field: 'lname', size: '100%', editable: { type: 'text' }, searchable: true }
],
records: [
{ recid: 1, fname: 'John', lname: 'Cook' },
{ recid: 2, fname: 'Jane', lname: 'Doe' }
]
});
jQuery().w2form({
name: 'form',
fields: [
{ field: 'fname', html: { label: 'First Name' }},
{ field: 'lname', html: { label: 'Last Name' }}
]
});
jQuery().w2layout({ name: 'layout', panels: [
{ type: 'top', style: 'border: 1px solid silver', size: '100px', resizable: true,
toolbar: {
items: [
{ id: 'btn1', type: 'menu', text: 'Menu', items: [{ id: 1, text: 'Item 1'}, { id: 2, text: 'item 2'}] }
]
}
},
{ type: 'right', style: 'border-left: 1px solid silver', size: '100px', resizable: true }
]});
})
//]]>
</script>
</head>
<body>
<div style="padding: 10px; border: 1px solid gray" oncontextmenu="contextMenu2(event)">
<button class="w2ui-btn" value="Popup" onclick="jQuery().w2popup('open', { url: 'popup-template.html' })">Popup from File</button>
<button class="w2ui-btn" value="Popup2" onclick="jQuery('#popup1').w2popup({ showMax: true })">Popup from HTML</button>
<button class="w2ui-btn" value="Popup5" onclick="popup3()">Popup & Confirm</button>
<button class="w2ui-btn" value="Popup3" onclick="popupGrid()">Popup Grid</button>
<button class="w2ui-btn" value="Popup4" onclick="popupLayout()">Popup Layout</button>
<button class="w2ui-btn" value="Overlay" onclick="showOverlay(this)">Overlay</button>
<button class="w2ui-btn" value="Overlay" onclick="showOverlayGrid(this)">Overlay Grid</button>
<button class="w2ui-btn" value="Menu" onclick="showMenu(this)">Menu</button>
<button class="w2ui-btn" value="Menu" onclick="checkMenu(this)">Check Menu</button>
<button class="w2ui-btn" value="Alert" onclick="w2alert('message');">Alert</button>
<button class="w2ui-btn" value="Confirm" onclick="myConfirm()">Confirm</button>
<button class="w2ui-btn" value="Confirm" onclick="myPrompt()">Prompt</button>
<button class="w2ui-btn" value="Actions" onclick="myActions()">Actions</button>
</div>
<hr/>
<div id="popup1" style="display: none1; width: 650px; height: 400px; overflow: auto">
<div rel="title">
Popup #1 Title
</div>
<div rel="body">
<div style="padding: 10; font-size: 11px; line-height: 150%;" id="some">
<div style="float:left; background-color: white; width:150px; height:80px; border: 1px solid silver; margin:5px;">
</div>
This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
<br/>
<input id="date" type="text"/>
</div>
</div>
<div rel="buttons">
<button class="w2ui-btn" onclick="jQuery('#popup2').w2popup({ transition: 'slide-left', showMax: false })" style="width: 150px">Switch to Popup 2</button>
<button class="w2ui-btn" onclick="jQuery('#popup2').w2popup('message', { html: '<div class=\'w2ui-centered\'><div>some text</div></div><div style=\'position: absolute; left: 0px; right: 0px; height: 35px; bottom: 0px; text-align: center;\'><button class=\'w2ui-btn\' onclick=\'w2popup.message();\'>Close</button></div>' })">Message</button>
</div>
</div>
<hr/>
<div id="popup2" style="display1: none; width: 600px; height: 300px; overflow: auto">
<div rel="title">
Popup #2
</div>
<div rel="body">
<div style="padding: 10; font-size: 11px; line-height: 150%;">
Some other popup text. Some other popup text. Some other popup text. Some other popup text. Some other popup text.
Some other popup text. Some other popup text. Some other popup text. Some other popup text. Some other popup text.
</div>
</div>
<div rel="buttons">
<button class="w2ui-btn" onclick="jQuery('#popup1').w2popup({ transition: 'slide-right', showMax: true })">Switch to Popup 1</button>
</div>
</div>
</body>
</html>