Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Itsa Dialogbox (gallery-itsadialogbox) on cdn

Last Updated: 11/7/12

+ 1 -

Marco Asbreuk

YUI Contributor

See 4 more by this user.

Created: 10/30/12
Last CDN Push: 11/7/12
Build Tag: gallery-2012.11.07-21-32
Project: YUI 3
License: YUI BSD
YUI Version: 3.8.0pr1
Free for use.

Defines a Panel that holds several sugar messages.

YOU NEED TO INCLUDE the class 'yui3-skin-sam' to the body in order to make it work.

There are already some dialogboxes in the library that do a good job. Nevertheless, I found this need, because I wanted to have sugarmethods that were able to:

Always keep focus on buttons or input-element, even when clicked on an empty area
Tab and shift-Tab will shift between buttons (and optionally input)
Enter-press will lead to pressing the activebutton
Activebutton is clearly marked (not only primary-button)
Only one Callback that has information about which button is pressed an optionally inputdata
Eliminate the focusring arround the buttons and panel

Once the module is included, ItsaDialog is automaticly delared and bound to Y.Global. This because we don't need multiple instances when using more than one YUI-instance.

There are 7 sugar methods:

Y.Global.ItsaDialog.showErrorMessage();
Y.Global.ItsaDialog.showMessage();
Y.Global.ItsaDialog.showWarning();
Y.Global.ItsaDialog.getRetryConfirmation();
Y.Global.ItsaDialog.getConfirmation();
Y.Global.ItsaDialog.getInput();
Y.Global.ItsaDialog.getNumber();

ToDo:

Enable making dialogs that use custom FormElements

Tags:
itsasbreuk dialog panel message

Code Sample

<script src="http://yui.yahooapis.com/3.8.0pr1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.11.07-21-32'
}).use('gallery-itsadialogbox', function(Y) {
    Y.Global.ItsaDialog.showWarning('Oops, something went wrong.');
});
 
 
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.11.07-21-32'
}).use('gallery-itsadialogbox', function(Y) {
    var callback = function(e) {
        alert(e.buttonName+' --> '+e.value);
    };
    Y.Global.ItsaDialog.getNumber('Only Adults', 'Enter your age:', 25, 18, 100, callback);
});