c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<div class="intro">
090376d4be54e832a15be873e1561b95d3e94e0aJeff Conniff This example demonstrates how to create a reusable dialog for messages and confirmations.
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<div class="example yui3-skin-sam">
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff {{>dialog-css-interactive-example}}
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff {{>dialog-css}}
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff {{>dialog-html}}
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff YUI().use("panel", "escape", function (Y) { // loading escape only for security on this page
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff {{>dialog-js}}
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff {{>dialog-js-interactive-example}}
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<h2>Creating a reusable dialog</h2>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<h3>The HTML</h3>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<p>Panel requires you to have the class
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff`yui3-skin-sam` on a parent element, commonly the `<body>` tag.</p>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<body class="yui3-skin-sam">
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff <!-- We'll use this button to just represent some user initiated event -->
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff <button class='yui3-button btn-show'>Show Dialog</button>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<h3>Setting Up The YUI Instance</h3>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff ConniffThe only module you need is the `panel` module.
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff ConniffYUI().use('panel', function (Y) {
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff // We'll write example code here
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<h3>Instantiating the Panel</h3>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<p>The JavaScript to instantiate the panel is as follows:</p>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff ConniffYUI().use("panel", function (Y) { // loading escape only for security on this page
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff{{>dialog-js}}
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<h3>Reuse the Dialog</h3>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff ConniffSince it's common to want the user to give their confirmation before some action
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniffhappens, this example passes a callback function to the dialog.
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff // a function to do when the user clicks the "OK" button in the dialog.
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff var doSomething = function(){
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff Y.log('Something was done.');
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff ConniffEach time you want to show a dialog for a different purpose, you can reuse the same
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniffdialog and just:
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<li>Set the message text.</li>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<li>Change the icon.</li>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<li>Assign a function to the "OK" button (optional).</li>
40366a772eaf4aa3b8c9142c19fb818f6a565553Jeff ConniffIn this example, there's a callback property on the dialog object.
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff ConniffIf you want to, you can set its value with a reference to your own
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Connifffunction so the dialog can trigger different actions each time it's shown.
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff ConniffThis example removes the callback reference each time a dialog button is
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniffclicked to make sure it's not unintentionally persisted.
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff ConniffIf you use a callback, you'll need to add it every time the dialog is shown.
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff ConniffY.one('.btn-show').on('click', function(){
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff // set the content you want in the message
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff Y.one('#dialog .message').setContent('Are you sure you want to [take some action]?');
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff // set the icon (or none) that appears next to the message.
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff // the Class 'message' also needs to be maintained.
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff Y.one('#dialog .message').set('className', 'message icon-bubble');
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff /* classnames and images provided in the CSS are:
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff .icon-bubble
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff .icon-question
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff .icon-success
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff // set the callback to reference a function
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<h3>The CSS</h3>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff{{>dialog-css}}
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<h3>The Icon Source Files</h3>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff ConniffHere we provide the
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniff<a href="{{{componentAssets}}}/icon_image_source_files.zip">original source files</a>
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Connifffor the icons, in case you'd like to modify them, or create others. We created
c2e84dfa3d5903f5bf0f10a70508b3effc3d26eeJeff Conniffthem ourselves, just for you, so you can be sure they are open source.