The most frequent dialogs are alert, confirm and prompt. In the case of an alert you just need to display a message to the user
and require no feedback besides user acknowledgement. Confirm dialog has similar purpose, but expects from the user a response
by accepting or declining the message. Prompt waits for user input. The w2ui library includes these dialogs for your convenience.
w2alert(msg, [title], [callBack])
The alert dialog can be called in the following way:
xxxxxxxxxx
1
w2alert('This is an alert')
2
First argument, msg, is a message to display. Second optional argument, title, is the title for the dialog. The third optional argument,
callBack, is a call back function when dialog is closed.
xxxxxxxxxx
1
w2alert('This is an alert')
2
.ok(function () {
3
// call back when alert closed
4
})
5
w2confirm (msg, [title], [callBack])
The confirm dialog can be called in the following way:
xxxxxxxxxx
1
w2confirm('Are you sure?')
2
.yes(() => {
3
console.log('Yes')
4
})
5
.no(() => {
6
console.log('Yes')
7
})
8
// OR
9
w2confirm('Are you sure?', functionbtn(answer) {
10
console.log(answer); // Yes or No -- case-sensitive
11
})
12
The method takes up to three arguments w2confirm(msg, [title], [callBack]), where msg is the message to display. You can optionally supply title for the message and a call back function.
w2confirm(options)
You can optionally call w2confirm passing an object with options. This options object has following structure:
xxxxxxxxxx
1
options= {
2
msg: '',
3
title: 'Confirmation',
4
width: 450, // width of the dialog
5
height: 220, // height of the dialog
6
btn_yes: {
7
text: 'Yes', // text for yes button (or yes_text)
8
class: '', // class for yes button (or yes_class)
9
style: '', // style for yes button (or yes_style)
10
onClick: null// callBack for yes button (or yes_callBack)
11
},
12
btn_no: {
13
text: 'No', // text for no button (or no_text)
14
class: '', // class for no button (or no_class)
15
style: '', // style for no button (or no_style)
16
onClick: null// callBack for no button (or no_callBack)
17
},
18
callBack: null, // common callBack
19
onOpen: null, // event when popup is opened
20
onClose: null// event when popup is closed
21
};
22
For convenience, w2confirm will return to you an object with yes() and no() methods that you can use in the following way:
xxxxxxxxxx
1
w2confirm('Are you sure?')
2
.yes(function () {
3
console.log('user clicked YES');
4
})
5
.no(function () {
6
console.log("user clicked NO")
7
});
8
w2prompt(label, [title], [callBack])
Prompts user to enter value. Instead of passing label, title, and callBack, you can call w2prompt in the following way:
xxxxxxxxxx
1
w2prompt({
2
label: 'Enter value',
3
value: '0',
4
attrs: 'size=6'
5
})
6
.change(function () {
7
console.log('Input value changed.');
8
})
9
.ok(function () {
10
console.log("User clicked ok.")
11
});
12
w2prompt(options)
Following properties are supported:
xxxxxxxxxx
1
options= {
2
title: 'Notification', // title of dialog
3
width: 400, // width of the dialog
4
height: 220, // height of dialog
5
label: '', // label for the input control
6
value: '', // initial value of input
7
attrs: '', // attributes for input control
8
btn_ok: {
9
text : 'Ok', // text for ok button (or ok_text)
10
class : '', // class for ok button (or ok_class)
11
style : '', // style for ok button (or ok_style)
12
click : null// callBack for ok button (or ok_callBack)
13
},
14
btn_cancel: {
15
text : 'Cancel', // text for cancel button (or cancel_text)
16
class : '', // class for cancel button (or cancel_class)
17
style : '', // style for cancel button (or cancel_style)
18
click : null// callBack for cancel button (or cancel_callBack)