dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
716 lines (656 loc) • 35 kB
HTML
<html lang='en'>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Dialog Widget Tests</title>
<script type="text/javascript" src="boilerplate.js"></script>
<style type="text/css">
form { margin-bottom : 0; }
table { border: none; }
#dialog3_underlay { background-color: #027 }
#fifthDlg_underlay { background-color: yellow; }
</style>
<script type="text/javascript">
require([
"dojo/_base/lang",
"dojo/date/stamp",
"dojo/dom",
"dojo/parser",
"dijit/registry",
"dijit/Dialog",
// used by parser
"dijit/Editor",
"dijit/_editor/plugins/AlwaysShowToolbar",
"dijit/InlineEditBox",
"dijit/Menu",
"dijit/MenuItem",
"dijit/MenuSeparator",
"dijit/form/Button",
"dijit/form/TextBox",
"dijit/form/DateTextBox",
"dijit/form/TimeTextBox",
"dijit/form/FilteringSelect",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dojo/domReady!"
], function(lang, stamp, dom, parser, registry, Dialog){
var thirdDlg;
createDialog = function(){
if(!thirdDlg){
var pane = dom.byId('thirdDialog');
// should specify a width on dialogs with <p> tags, otherwise they get too wide
thirdDlg = new dijit.Dialog({
id: "dialog3",
title: "Programmatic Dialog Creation",
style: {width: '300px'}
},pane);
}
setTimeout(function(){ thirdDlg.show(); },"3000");
};
open2Dialogs = function (){
registry.byId('dialog1').show();
setTimeout(lang.hitch(registry.byId('fifthDlg'), 'show'), 1000);
};
showSelfDestructDlg = function(){
//for testing #12436
var dlg = new Dialog({
id: 'SelfDestructDlg',
title: 'Self-Destruct Dialog',
content: 'This dialog will destroy itself onHide.<br/><input type="text" id="SelfDestructDlgInput" />',
onHide: function(){
// Use setTimeout() to avoid memory leak warning for sIEve
setTimeout(function(){
dlg.destroyRecursive();
}, 0);
}
});
dlg.show();
};
parser.parse();
});
</script>
</head>
<body class="claro" role="main">
<script type="dojo/require">
dom: "dojo/dom",
registry: "dijit/registry"
</script>
<h1 class="testTitle">Dijit.Dialog tests</h1>
<h2>General Dialogs:</h2>
<button id="dialog1button" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("dialog1").show() }'>Show Dialog</button> |
<div id="dialog1" data-dojo-type="dijit/Dialog" data-dojo-props='title:"First Dialog",
"aria-describedby":"intro",
onFocus:function(){ console.log("user focus handler") },
onBlur:function(){ console.log("user blur handler") },
execute:function(args){ console.log("submitted w/args: ", args); }'>
<div id="intro" style="width:30em;">Introductory information spoken by screen reader if aria-describedby is
added to the declaration of dialog above with value equal to the id of the container element for this text. This technique
will work in Dojo 1.4. </div>
<table style="position:relative;" role="presentation">
<tr>
<td><label for="name">Name: </label></td>
<td><input id="name" data-dojo-type="dijit/form/TextBox" data-dojo-props='type:"text", name:"name" '/></td>
</tr>
<tr>
<td><label for="loc">Location: </label></td>
<td><input id="loc" data-dojo-type="dijit/form/TextBox" data-dojo-props='type:"text", name:"loc" '/></td>
</tr>
<tr>
<td><label for="date">Date: </label></td>
<td><input id="date" data-dojo-type="dijit/form/DateTextBox" data-dojo-props='type:"text", name:"date" '/></td>
</tr>
<tr>
<td><label>Time: </label></td>
<td><div id="time" data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/form/TimeTextBox", editorParams:{type:"text", name:"time"}, width:"100px", style:"width:100px;"'></div></td>
</tr>
<tr>
<td><label for="desc">Description: </label></td>
<td><input id="desc" data-dojo-type="dijit/form/TextBox" data-dojo-props='type:"text", name:"desc" '/></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<button id="ok" data-dojo-type="dijit/form/Button" type="submit">OK</button></td>
</tr>
</table>
</div>
<div id="dialog1ContextMenu" data-dojo-type="dijit/Menu" data-dojo-props='targetNodeIds:["dialog1"], style:"display: none;"'>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='disabled:true'
id="firstMenuItem">Dialog1 Menu</div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='onClick:function(){ console.log("Hello world"); }'
id="enabledMenuItem">Enabled Item</div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='disabled:true'>Disabled Item</div>
<div data-dojo-type="dijit/MenuSeparator"></div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
onClick:function(){ console.log("not actually cutting anything, just a test!") }'>Cut</div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
onClick:function(){ console.log("not actually copying anything, just a test!") }'>Copy</div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
onClick:function(){ console.log("not actually pasting anything, just a test!") }'>Paste</div>
</div>
<button data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ createDialog(); }, title:"shows after 3 second delay, with blue background"'>Programatic Dialog (3 second delay)</button> |
<div id="thirdDialog" style="display: none;">
<form>
<input>
<br>
<button>hello</button>
<br><label for="select3">select label</label>
<select id="select3">
<option>Lorem</option>
<option>ipsum</option>
<option>dolor</option>
<option>sit</option>
<option>amet</option>
</select>
</form>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
</div>
<button data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("tabDialog").show() }'>Show TabContainer Dialog</button> |
<div id="tabDialog" data-dojo-type="dijit/Dialog" data-dojo-props='title:"TabContainer Dialog"'>
<div id="tc" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"width: 400px; height: 400px;"'>
<div id="cp1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"First tab"'>
<p>
This is the first tab.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
</div>
<div id="cp2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Second tab"'>
<p>
This is the second tab.
</p>
<p>
Make it overflow. <a href="http://www.lipsum.com/">ipsum dolor sit amet</a>, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
</div>
</div>
</div>
<button data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("fifthDlg").show(); }'>Test slow loading HREF Dialog</button> |
<div id="fifthDlg" data-dojo-type="dijit/Dialog" data-dojo-props='href:"layout/getResponse.php?delay=3000&messId=3",
style:"width: 300px", title:"From HREF (slow network simulated)"'></div>
<button id="filebutton" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("file").show() }'>Show File Dialog</button>
<div id="file" data-dojo-type="dijit/Dialog" data-dojo-props='title:"File Dialog",
onFocus:function(){ console.log("user focus handler") },
onBlur:function(){ console.log("user blur handler") },
execute:function(args){ console.log("submitted w/args: ", args); }, style:"min-width: 350px"'>
<!-- note: style="min-width: 350px" to workaround FF bug where width is too short, see http://bugs.dojotoolkit.org/ticket/5976 -->
<label for="afile">ID File: </label>
<input id="afile" data-dojo-type="dijit/form/TextBox" data-dojo-props='type:"file", name:"afile" '/>
</div>
<button id="unmovablebutton" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("unmovable").show() }'>Show Unmovable</button>
<div id="unmovable" data-dojo-type="dijit/Dialog" data-dojo-props='title:"unmovable", draggable:false'>
<p>You should not be able to <br /> drag this dialog</p>
</div>
<button data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("preventer").show() }'>Show Close prevention</button>
<div id="preventer" data-dojo-type="dijit/Dialog" data-dojo-props='title:"Confirm Close"'>
I am done entering data:
<button id="preventerOK" data-dojo-type="dijit/form/Button" type="submit" onClick='return confirm("Are you sure?");'>OK</button>
</div>
<button data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("embedded").show() }'>Dialog w/embedded layout widgets</button> |
<div id="embedded" data-dojo-type="dijit/Dialog" data-dojo-props='title:"Embedded layout widgets",
onShow:function(){ this.domNode.setAttribute("aria-describedby", "describe"); } '>
<p id="describe">
The pane has some text, plus two embedded layout widgets, which should
appear correctly even though the pane is initially hidden.
</p>
<p>
Here's a BorderContainer:
</p>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='style:"height:200px; width:300px"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"left", style:"width:100px", splitter:true'>
1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
euismod, magna nulla viverra libero, sit amet lacinia odio diam id
risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
consequat quis, varius interdum, nulla. Donec neque tortor,
sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
ut eros sit amet ante pharetra interdum.
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'>
2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
euismod, magna nulla viverra libero, sit amet lacinia odio diam id
risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
consequat quis, varius interdum, nulla. Donec neque tortor,
sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
ut eros sit amet ante pharetra interdum.
</div>
</div>
<p>
And a TabContainer:
</p>
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"height:200px; width:300px"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Tab 1"'>
1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
euismod, magna nulla viverra libero, sit amet lacinia odio diam id
risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
consequat quis, varius interdum, nulla. Donec neque tortor,
sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
ut eros sit amet ante pharetra interdum.
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Tab 2"'>
2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
euismod, magna nulla viverra libero, sit amet lacinia odio diam id
risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
consequat quis, varius interdum, nulla. Donec neque tortor,
sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
ut eros sit amet ante pharetra interdum.
</div>
</div>
<p>
Text after the widgets.
</p>
</div>
<!-- Action Bar test case -->
<button id="ABDlg1Btn" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("ABDlg1").show() }'>Show Dialog With Action Buttons</button>
<div id="ABDlg1" data-dojo-type="dijit/Dialog" data-dojo-props='title:"ActionBar Dialog 1",
onExecute:function(){ console.log("OK button pressed") },
onCancel:function(){ console.log("Cancel button pressed") },
"aria-describedby":"intro",
execute:function(args){ console.log("submitted w/args: ", args); }'>
<div class="dijitDialogPaneContentArea">
<div id="ABintro1" style="width:30em;">Introductory information spoken by screen reader if aria-describedby is
added to the declaration of dialog above with value equal to the id of the container element for this text. This technique
will work in Dojo 1.4. </div>
</div>
<div class="dijitDialogPaneActionBar">
<button id="ABdialog1button1" data-dojo-type="dijit/form/Button" type="submit">OK</button>
<button id="ABdialog1button2" data-dojo-type="dijit/form/Button" type="button" data-dojo-props='onClick:function(){ registry.byId("ABDlg1").onCancel(); }
'>Cancel</button>
</div>
</div>
<button id="NABDlgBtn" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("NABDlg").show() }'>Show Dialog With No Action Buttons</button>
<div id="NABDlg" data-dojo-type="dijit/Dialog" data-dojo-props='title:"No Action Bar Dialog",
"aria-describedby":"intro",
onFocus:function(){ console.log("user focus handler") },
onBlur:function(){ console.log("user blur handler") },
execute:function(args){ console.log("submitted w/args: ", args); }'>
<div class="dijitDialogPaneContentArea">
<div id="NABintro" style="width:30em;">Introductory information spoken by screen reader if aria-describedby is
added to the declaration of dialog above with value equal to the id of the container element for this text. This technique
will work in Dojo 1.4. </div>
<table>
<tr>
<td><label for="NABname">Name: </label></td>
<td><input id="NABname" data-dojo-type="dijit/form/TextBox" data-dojo-props='type:"text", name:"NABname" '/></td>
</tr>
<tr>
<td><label for="NABloc">Location: </label></td>
<td><input id="NABloc" data-dojo-type="dijit/form/TextBox" data-dojo-props='type:"text", name:"NABloc" '/></td>
</tr>
<tr>
<td><label for="NABdate">Date: </label></td>
<td><input id="NABdate" data-dojo-type="dijit/form/DateTextBox" data-dojo-props='type:"text", name:"NABdate" '/></td>
</tr>
<tr>
<td><label for="NABdesc">Description: </label></td>
<td><input id="NABdesc" data-dojo-type="dijit/form/TextBox" data-dojo-props='type:"text", name:"NABdesc" '/></td>
</tr>
</table>
</div>
</div>
<button id="layeredDialogs" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:open2Dialogs'>Show 2 Dialogs</button>
<button id="iframeDlg" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("dlgFrame").show(); }'>Show iframe in dialog</button>
<div id="dlgFrame" data-dojo-type="dijit/Dialog" data-dojo-props='title:"Search"'>
<iframe title="Test IFrame" src="layout/getResponse.php?delay=3000&messId=3" style="width:600px; height: 400px;">
</iframe>
</div>
<button id="RadioButtonDlgBtn" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("RadioButtonDlg").show() }'>Show Dialog With Radio Button at End</button>
<div id="RadioButtonDlg" data-dojo-type="dijit/Dialog" data-dojo-props='title:"Radio Button Dialog"'>
<div class="dijitDialogPaneContentArea">
<textarea id="textarea-radio-test" width="400" height="200"></textarea>
<fieldset>
<legend>Best Pet</legend>
<input id="dograd" type="radio" name="pet" checked="checked"/>
<label for="dograd">Dog</label> -
<input id="catrad" type="radio" name="pet"/>
<label for="catrad">Cat</label>
</fieldset>
</div>
</div>
<button id="SelfDestructDlgBtn" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:showSelfDestructDlg'>Show Self-Destruct Dialog</button>
<div id="SelfDestructDlgBtn2" style="border: 1px solid black;" class="dijitInline" onclick="showSelfDestructDlg();" role="button">Show Self-Destruct Dialog (unfocusable div)</div>
<button data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ createDialog() }, title:"shows after 3 second delay, with blue background"'>Programatic Dialog (3 second delay)</button> |
<button id="unclosableButton" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("unclosable").show() }'>Show Unclosable Dialog</button> |
<div id="unclosable" data-dojo-type="dijit/Dialog" title="Unclosable Dialog" data-dojo-props="closable:false">
<div class="dijitDialogPaneContentArea">
This dialog has no close icon and the ESCAPE key won't close it. You need to use the buttons.
</div>
<div class="dijitDialogPaneActionBar">
<button id="unclosableSubmit" data-dojo-type="dijit/form/Button" type="submit">OK</button>
<button id="unclosableCancel" data-dojo-type="dijit/form/Button" type="button"
onClick='registry.byId("unclosable").onCancel();'>Cancel</button>
</div>
</div>
<button id="iebDialogBtn" data-dojo-type="dijit/form/Button"
data-dojo-props='onClick:function(){ registry.byId("iebDialog").show(); }'>
Show Dialog With InlineEditBox Editors
</button> |
<div id="iebDialog" data-dojo-type="dijit/Dialog" title="Test Dialog with Autosave Inline Rich Text Editors">
<h2>Editor 1</h2>
<div id="inlineRTE1" data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/Editor",
autoSave:true, renderAsHtml:true,
editorParams:{id: "RTE1", height: "", extraPlugins: ["dijit._editor.plugins.AlwaysShowToolbar"]}'>
first text
</div>
<h2>Editor 2</h2>
<div id="inlineRTE2" data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/Editor",
autoSave:true, renderAsHtml:true,
editorParams:{id: "RTE2", height: "", extraPlugins: ["dijit._editor.plugins.AlwaysShowToolbar"]}'>
second text
</div>
<h2>Editor 3</h2>
<div id="inlineRTE3" data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/Editor",
autoSave:true, renderAsHtml:true,
editorParams:{id: "RTE3", height: "", extraPlugins: ["dijit._editor.plugins.AlwaysShowToolbar"]}'>
third text
</div>
</div>
<h2>Simulated Editor with Dialog:</h2>
<div id="editorDialog" data-dojo-type="dijit/Dialog" title="Insert Text" data-dojo-props="refocus: false">
<script type="dojo/method" data-dojo-event="execute">
var editor = dom.byId("editor"), newVal = dom.byId("dialogTextarea").value;
console.log("focusing editor and setting value to " + newVal);
editor.focus();
editor.value = newVal;
</script>
<p>
Enter text then hit OK.
Focus will be shifted to "editor" below and text will be inserted.
</p>
<textarea id="dialogTextarea" style="width: 90%" placeholder="enter text here"></textarea>
<br>
<button data-dojo-type="dijit/form/Button" type="submit">OK</button>
</div>
<div style="background-color: #eee; border: solid gray 1px; width: 90%;">
<button id="insertTextButton" onclick="registry.byId('editorDialog').show();">insert text</button>
</div>
<textarea id="editor" style="width: 90%; border: solid gray 1px; border-top: none;">
The button above will open a Dialog to reset the text in this textarea.
</textarea>
<p><b><i>(scroll down to see more links to click, for testing positioning / scroll handling)</i></b></p>
<p>
Here's a form. Try clicking the programatic dialog link, then focusing on the form.
After the dialog closes focus should be returned to the form
</p>
<form>
<label for="plainInput">plainInput</label>
<input id="plainInput"/>
<br>
<button id="plainButton">hello</button>
<br>
<label for="plainButtonSelect">planeButton Select:</label>
<select id="plainButtonSelect">
<option>Lorem</option>
<option>ipsum</option>
<option>dolor</option>
<option>sit</option>
<option>amet</option>
</select>
</form>
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.
</p>
<form>
<div style="text-align:center;">
<label for="centerSelect">select:</label>
<select id="centerSelect">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
consectetuer dapibus eros. Aliquam nisl.
</p>
<div id="reallyWide">[spacer]</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.
</p>
<form>
<div style="text-align:center;">
<label for="twoOptionSelect">select:</label>
<select id="twoOptionSelect">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
consectetuer dapibus eros. Aliquam nisl.
</p>
<p>
<button data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("dialog1").show() }'>Show Dialog</button> |
<!-- showing a dialog from an anchor with inline onclick="" is a solution to page onUnLoad firing
but you must return false; alternatively, you can dojo.connect() to the anchor links, and
e.preventDefault() on the event object passed. using href="javascript:" inline causes onUnLoad
to destroy all widgets in IE6
-->
<a href="http://dojotoolkit.org" onclick="registry.byId('dialog1').show(); return false; ">Show Dialog</a>
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.
</p>
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
consectetuer dapibus eros. Aliquam nisl.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.
</p>
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
consectetuer dapibus eros. Aliquam nisl.
</p>
</body>
</html>