JAVASCRIPT EXAMPLES Decorated Confirm Dialog
In this example, the confirm and inform instance methods of the Uize.Widget widget base class are being used to display decorated confirm and inform dialogs. The decorated dialog windows are implemented using HTML and provide a substitute for the somewhat less than attractive dialogs provided by the browser through the built-in confirm and alert global functions. The decorated dialogs can be styled to your Web site's choosing with a little bit of CSS. Unlike the built-in dialogs, the skinnable dialogs can also display a state icon.
Use the buttons below to launch the confirm and inform dialogs. First, click the "SHOW A DELETE CONFIRMATION" button to show the sample delete confirmation dialog. If you click either of the "DON'T DELETE" or "X" (close) buttons in this dialog, then an inform dialog is displayed to verify that you canceled the delete. If you instead click the "DELETE" button, then an inform dialog is displayed to verify that your hypothetical items were successfully deleted. The "SHOW AN INFO DIALOG" button just shows an inform dialog with a neutral info icon. This provides a glimpse of the range of decorated dialogs that can be displayed.
Worth pointing out is that you'll notice, if you look at the source code for this page, that the page does not initially source in or set up any dialog widgets. This is because the functionality is implemented in such a way that
all the JavaScript and HTML necessary for the decorated dialogs is only loaded in and wired up when necessary. This is an example of lazy loading (or deferred loading). Because the dialog functionality is implemented in the Uize.Widget.Page page widget class, any page that uses this class, and any widget that is on the page widget's widget tree, will have access to this functionality.