| CyloDialog Modal Dialog box V_0.1 |
This is version 0.1 of CyloDialog, which is a Modal dialog box built using JavaScript
To use CyloDialog, include the required scripts in your page using ...
js/CyloDialog.js and js/CyloUtils.js. Also include the CSS file using css/cylo.css
There are two functions to call, one for an OK type (1 button) dialog,and one for yes/no type dialog (2 buttons)
For the OK confirmation style, you should pass (7) parameters
1. Your message as text or HTML (escaping double and single quotes e.g. \" )
2. The action as JavaScript (escaping double and single quotes e.g. \" ) If you want the dialog to just close on the button click then pass SELF_CLOSE as the parameter.
3. The button Text as text
4. The size of the dialog as String. View the JavaScript file to see possible values
5. The title of the dialog as string. If this is empty then the default value of 'Confirmation' is used
6. The image to show as integer. View the JavaScript file to see possible values
7. This can be the effect of showing the box. The only options are "" for normal and "fade" for fade.
Below is an example of a call, notice how I pass SELF_CLOSE to force the dialog to close after executing the other code I pass into it.
For the yes/no confirmation style, you should pass (9) parameters
1. Your message as text or HTML (escaping double and single quotes e.g. \" )
2. The action for the POSITIVE action as JavaScript (escaping double and single quotes e.g. \" ) again pass SELF_CLOSE as the parameter to make the dialog close after the button is pressed.
3. The action for the NEGATIVE action as JavaScript
4. The button Text as text for the POSITIVE
5. The button Text as text for the NEGATIVE
6. The size of the dialog as String. View the JavaScript file to see possible values
7. The title of the dialog as string. If this is empty then the default value of 'Confirmation' is used
8. The image to show as integer. View the JavaScript file to see possible values
9. This can be the effect of showing the box. The only options are "" for normal and "fade" for fade.
Below is an example of a call, notice how I pass SELF_CLOSE to force the dialog to close after executing the other code I pass into it.
FEATURES!
1. The browser focus() is given to one of the buttons on the dialog, which allows the user to accept/interact with the box by pressing the space bar or the return key, just like a real dialog box.
2. The dialog box will flash if the user tries to click anything on the screen except the dialog box. This shows them that they must acknowledge the box before they can move on.
3. The dialog box follows the user if they scroll up and down the page. They can not escape the fact that the box is demanding their attention.
4. A fade effect can be used when displaying the box. Just pass 'fade' as the 7th or 9th parameter when calling the functions.
THINGS TO BE AWARE OF!
1. If you leave the SELF_CLOSE command out, the dialog will not close when you press a button.
2. If another dialog is called while one is already open, the one that is open will close and the second one will open.
3. When passing in JavaScript code for the button parameters, you must escape single and double quotes. You must also finish each command/line with a semicolon, just as you would any other code.
e.g
COMMENT ON THIS PLUG-IN
If you'd like to leave some feed back or would like to request a feature, please drop me a line on this google group ...
http://groups.google.com/group/cylo-web-tools?hl=en
To use CyloDialog, include the required scripts in your page using ...
js/CyloDialog.js and js/CyloUtils.js. Also include the CSS file using css/cylo.css
There are two functions to call, one for an OK type (1 button) dialog,and one for yes/no type dialog (2 buttons)
For the OK confirmation style, you should pass (7) parameters
1. Your message as text or HTML (escaping double and single quotes e.g. \" )
2. The action as JavaScript (escaping double and single quotes e.g. \" ) If you want the dialog to just close on the button click then pass SELF_CLOSE as the parameter.
3. The button Text as text
4. The size of the dialog as String. View the JavaScript file to see possible values
5. The title of the dialog as string. If this is empty then the default value of 'Confirmation' is used
6. The image to show as integer. View the JavaScript file to see possible values
7. This can be the effect of showing the box. The only options are "" for normal and "fade" for fade.
Below is an example of a call, notice how I pass SELF_CLOSE to force the dialog to close after executing the other code I pass into it.
CyloDialog.OKConfirmation("Your message text here",
"alert(\"This is the code to be executed.\"); SELF_CLOSE;",
"Press me","medium","Changable title and image",1,"");For the yes/no confirmation style, you should pass (9) parameters
1. Your message as text or HTML (escaping double and single quotes e.g. \" )
2. The action for the POSITIVE action as JavaScript (escaping double and single quotes e.g. \" ) again pass SELF_CLOSE as the parameter to make the dialog close after the button is pressed.
3. The action for the NEGATIVE action as JavaScript
4. The button Text as text for the POSITIVE
5. The button Text as text for the NEGATIVE
6. The size of the dialog as String. View the JavaScript file to see possible values
7. The title of the dialog as string. If this is empty then the default value of 'Confirmation' is used
8. The image to show as integer. View the JavaScript file to see possible values
9. This can be the effect of showing the box. The only options are "" for normal and "fade" for fade.
Below is an example of a call, notice how I pass SELF_CLOSE to force the dialog to close after executing the other code I pass into it.
CyloDialog.yesNoConfirmation("Your message
", "jsFunction111(); SELF_CLOSE","jsFunction222();",
"Option One","Option Two", "landscape","The title -----",5,"fade");FEATURES!
1. The browser focus() is given to one of the buttons on the dialog, which allows the user to accept/interact with the box by pressing the space bar or the return key, just like a real dialog box.
2. The dialog box will flash if the user tries to click anything on the screen except the dialog box. This shows them that they must acknowledge the box before they can move on.
3. The dialog box follows the user if they scroll up and down the page. They can not escape the fact that the box is demanding their attention.
4. A fade effect can be used when displaying the box. Just pass 'fade' as the 7th or 9th parameter when calling the functions.
THINGS TO BE AWARE OF!
1. If you leave the SELF_CLOSE command out, the dialog will not close when you press a button.
2. If another dialog is called while one is already open, the one that is open will close and the second one will open.
3. When passing in JavaScript code for the button parameters, you must escape single and double quotes. You must also finish each command/line with a semicolon, just as you would any other code.
e.g
"alert(\"Hello\");SELF_CLOSE;alert(\"Hello again\");"COMMENT ON THIS PLUG-IN
If you'd like to leave some feed back or would like to request a feature, please drop me a line on this google group ...
http://groups.google.com/group/cylo-web-tools?hl=en
VIEW SOURCE TO GET THE FILES