digit之Dialog

来源：互联网发布：win10 pe 知乎编辑：程序博客网时间：2024/04/29 21:33

When looking to get information from the user, or serve a notification, the browser's nativealert and confirm methods simply aren't good enough. They're inflexible and ugly. Luckily, the Dojo Toolkit offers an alternative withdijit/Dialog. Much like dijit/Tooltip, dijit/Dialog allows for HTML content and easy theming. A sample usage ofdijit/Dialog would look like:

// Create a new instance of dijit/Dialogvar myDialog = new Dialog({    // The dialog's title    title: "The Dojo Toolkit",    // The dialog's content    content: "This is the dialog content.",    // Hard-code the dialog width    style: "width:200px;"});

One important fact to know about dijit/Dialog is that instances are added to a "stack" so that you may have instances on top of one another. Displaying dialogs are also backed up by an iFrame so that they are ensured to always be "on top" of other elements. A single dijit/DialogUnderlay instance is shared by all Dialogs.

Important dijit/Dialog properties include:

content - The HTML or text content for the Dialog
draggable - Represents if the Dialog should be draggable
href - If content is to be loaded by Ajax (xhrGet), a path to that content file
loadingMessage - Message to be shown while the Ajax content is loading.
open - Returns true if the Dialog instance is presently open
title - The title to display atop the Dialog

Notable dijit/Dialog methods include:

hide - Hides the dialog and underlay
refresh - Refreshes the content of the Dialog if it's Ajax-based
show - Displays the dialog and underlay

dijit/Dialog also provides the callback methods you'd expect from a Dijit widget: onShow, onHide, onLoad, onClick, and more.

<!doctype html><html lang="en" dir="ltr"><head>    <title>Dialog</title><link rel="stylesheet" href="dijit/themes/claro/claro.css" /><style type="text/css">body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }</style><script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad:true"></script><script>// Require the Dialog classrequire(["dijit/registry", "dojo/parser", "dijit/Dialog", "dijit/form/Button", "dojo/domReady!"], function(registry, parser){// Show the dialogshowDialog = function() {registry.byId("terms").show();}// Hide the dialoghideDialog = function() {registry.byId("terms").hide();}parser.parse();});</script></head><body class="claro"><button onclick="showDialog();">View Terms and Conditions</button><div class="dijitHidden"><div data-dojo-type="dijit/Dialog" style="width:600px;" data-dojo-props="title:'Terms and Conditions'" id="terms"><p><strong>Please agree to the following terms and conditions:</strong></p><div style="height:160px;overflow-y:scroll;border:1px solid #769dc4;padding:0 10px;width:600px"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed suscipit massa. Aenean vel turpis tincidunt velit gravida venenatis. In iaculis urna non quam tincidunt elementum. Nunc pellentesque aliquam dui, ac facilisis massa sollicitudin et. Donec tincidunt vulputate ultrices. Duis eu risus ut ipsum auctor scelerisque non quis ante. Nam tempor lobortis justo, et rhoncus mauris cursus et. Mauris auctor congue lectus auctor ultrices. Aenean quis feugiat purus. Cras ornare vehicula tempus. Nunc placerat, lorem adipiscing condimentum sagittis, augue velit ornare odio, eget semper risus est et erat....</p></div><button onclick="hideDialog();">I Agree</button><button onclick="alert('You must agree!');">I Don't Agree</button></div></div></body></html>

Stacked Dialogs

<!doctype html><html lang="en" dir="ltr"><head>    <title>StackedDialog</title><link rel="stylesheet" href="dijit/themes/claro/claro.css" /><style type="text/css">body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }</style><script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad:true"></script><script>// Require the Dialog classrequire(["dijit/Dialog"], function(Dialog) {// Create countervar counter = 1;// Create a new DialogcreateDialog = function(first) {// Create a new dialogvar dialog = new Dialog({// Dialog titletitle: "New Dialog " + counter,// Create Dialog contentcontent: (!first ? "I am a dialog on top of other dialogs" : "I am the bottom dialog") + "<br /><br /><button onclick='createDialog();'>Create another dialog.</button>"});dialog.show();counter++;}});</script></head><body class="claro"><button onclick="createDialog(true);">Create New Dialog</button></body></html>

Ajax Dialogs 例子：

<!doctype html><html lang="en" dir="ltr"><head>    <title>Ajax Dialogs with Black Underlay</title><link rel="stylesheet" href="dijit/themes/claro/claro.css" /><style type="text/css">body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }.claro .dijitDialogUnderlay { background:#000; }</style><script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad:true"></script><script>// Require the Dialog classrequire(["dijit/registry", "dojo/parser", "dijit/Dialog", "dojo/domReady!"], function(registry, parser){// Show the dialogshowDialog = function() {registry.byId("ajaxDialog").show();}parser.parse();});</script></head><body class="claro"><button onclick="showDialog();">Load Ajax Dialog</button><div class="dijitHidden"><!-- dialog that gets its content via ajax, uses loading message --><div data-dojo-type="dijit/Dialog" style="width:600px;" data-dojo-props="title:'Ajax Dialog',href:'dialog-ajax-content.html',loadingMessage:'Loading dialog content...'" id="ajaxDialog"></div></div></body></html>

dialog-ajax-content.html：

<h1>You are great!</h1>

0 0