dialog.mustache revision 40366a772eaf4aa3b8c9142c19fb818f6a565553
72N/A<div class="intro">
72N/A <p>
72N/A This example demonstrates how to create a reusable dialog for messagages and confirmations.
72N/A </p>
72N/A</div>
72N/A
72N/A<div class="example yui3-skin-sam">
72N/A <style>
72N/A {{>dialog-css-interactive-example}}
72N/A {{>dialog-css}}
72N/A </style>
72N/A {{>dialog-html}}
72N/A <script>
72N/A YUI().use("panel", "escape", function (Y) { // loading escape only for security on this page
72N/A
72N/A {{>dialog-js}}
72N/A {{>dialog-js-interactive-example}}
72N/A });
72N/A </script>
72N/A</div>
5680N/A
72N/A<h2>Creating a reusable dialog</h2>
5680N/A
5680N/A<h3>The HTML</h3>
5680N/A
4552N/A<p>Panel requires you to have the class
4552N/A`yui3-skin-sam` on a parent element, commonly the `<body>` tag.</p>
72N/A
72N/A```
72N/A<body class="yui3-skin-sam">
4546N/A <div id='dialog'></div>
72N/A
844N/A <!-- We'll use this button to just represent some user initiated event -->
4546N/A <button class='yui3-button btn-show'>Show Dialog</button>
1258N/A
72N/A</body>
4546N/A```
2899N/A<h3>Setting Up The YUI Instance</h3>
5680N/A
5680N/A<p>
72N/AThe only module you need is the `panel` module.
4546N/A</p>
4546N/A
4546N/A```
4546N/A<script>
4546N/AYUI().use('panel', function (Y) {
574N/A // We'll write example code here
574N/A});
574N/A</script>
5680N/A```
5680N/A
5680N/A<h3>Instantiating the Panel</h3>
5680N/A
5680N/A<p>The JavaScript to instantiate the panel is as follows:</p>
72N/A
4546N/A```
4546N/AYUI().use("panel", function (Y) { // loading escape only for security on this page
72N/A{{>dialog-js}}
4546N/A});
4546N/A```
4546N/A<h3>Reuse the Dialog</h3>
4546N/ASince it's common to want the user to give their confirmation before some action
4038N/Ahappens, this example passes a callback function to the dialog.
3817N/A```
3817N/A // a function to do when the user clicks the "OK" button in the dialog.
3817N/A var doSomething = function(){
4037N/A Y.log('Something was done.');
3817N/A };
```
Each time you want to show a dialog for a different purpose, you can reuse the same
dialog and just:
<ul>
<li>Set the message text.</li>
<li>Change the icon.</li>
<li>Assign a function to the "OK" button (optional).</li>
</ul>
In this example, there's a callback property on the dialog object.
If you want to, you can set its value with a reference to your own
function so the dialog can trigger different actions each time it's shown.
This example removes the callback reference each time a dialog button is
clicked to make sure it's not unintentionally persisted.
If you use a callback, you'll need to add it every time the dialog is shown.
```
Y.one('.btn-show').on('click', function(){
// set the content you want in the message
Y.one('#dialog .message').setContent('Are you sure you want to [take some action]?');
// set the icon (or none) that appears next to the message.
// the Class 'message' also needs to be maintained.
Y.one('#dialog .message').set('className', 'message icon-bubble');
/* classnames and images provided in the CSS are:
.icon-bubble
.icon-error
.icon-info
.icon-question
.icon-warn
.icon-success
.icon-none
*/
// set the callback to reference a function
dialog.callback = doSomething;
dialog.show();
});
```
<h3>The CSS</h3>
```
<style>
{{>dialog-css}}
</style>
```
<h3>The Icon Source Files</h3>
Here we provide the
<a href="{{{componentAssets}}}/icon_image_source_files.zip">original source files</a>
for the icons, in case you'd like to modify them, or create others. We created
them ourselves, just for you, so you can be sure they are open source.