SOURCE CODE: Decorated Confirm Dialog
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Decorated Confirm Dialog | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Widget.Page"/>
  <meta name="description" content="Why settle for ugly JavaScript alert and confirm dialogs when you can have stylish inline HTML dialogs, themed to your choosing with a bit of CSS!"/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Decorated Confirm Dialog
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/decorated-confirm.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, the <code>confirm</code> and <code>inform</code> instance methods of the <a href="../reference/Uize.Widget.html"><code>Uize.Widget</code></a> 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 <code>confirm</code> and <code>alert</code> 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.</p>

    <p>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.</p>

    <p>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 <a href="../reference/Uize.Widget.Page.html"><code>Uize.Widget.Page</code></a> 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.</p>
  </div>

  <center id="page_buttons"></center>
</div>

<!-- JavaScript code to wire up the page -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widgets.Container.Widget',
    'Uize.Widgets.Button.Widget'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** add the buttons for showing the dialogs ***/
      var buttons = page.addChild ('buttons',Uize.Widgets.Container.Widget,{built:false});

      /*** add the button for showing the delete confirmation dialog ***/
        buttons.addChild (
          'showDeleteConfirmationDialog',
          Uize.Widgets.Button.Widget,
          {
            text:'SHOW A DELETE CONFIRMATION',
            action:function () {
              page.confirm ({
                title:'Confirm Delete',
                message:'Are you sure you would like to delete the selected items?',
                okText:'DELETE',
                cancelText:'DON\'T DELETE',
                yesHandler:
                  function () {
                    page.inform ({
                      title:'Items Deleted',
                      message:'Your items were successfully deleted.',
                      state:'success'
                    })
                  },
                noHandler:
                  function () {
                    page.inform ({
                      title:'Canceled Delete!',
                      message:'You chose to NOT delete the items.',
                      state:'error'
                    })
                  }
              });
            }
          }
        );

      /*** add the button for showing the info dialog ***/
        buttons.addChild (
          'showInfoDialog',
          Uize.Widgets.Button.Widget,
          {
            text:'SHOW AN INFO DIALOG',
            action:function () {
              page.inform ({
                title:'Decorated Inform Dialog',
                message:'This is to inform you that the dialog window you are currently looking at is a decorated infom dialog. I hope this information is helpful to you.',
                okText:'DONE'
              })
            }
          }
        );

    /*** wire up the page widget ***/
      page.wireUi ();
  }
);

</script>

</body>
</html>