You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
338 lines
16 KiB
338 lines
16 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>DojoX Dialog example</title> |
|
|
|
<!-- required: a default theme file --> |
|
<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/claro/claro.css"> |
|
<link rel="stylesheet" href="../Dialog/Dialog.css"> |
|
|
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
|
|
/* this is how you style underlays */ |
|
#thirdTest_underlay { background-color: #000 } |
|
#fourthTest_underlay, |
|
#secondTest_underlay { background-color: #369 } |
|
</style> |
|
|
|
<!-- required: dojo.js --> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async:true, parseOnLoad: true"></script> |
|
|
|
<!-- do not use! only for testing dynamic themes --> |
|
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> |
|
|
|
<script type="text/javascript"> |
|
require(["dojo/parser","dojox/widget/DialogSimple", "dojox/widget/Dialog", "dojo/fx/easing", "dijit/form/Button", "dojo/domReady!"], function(){ |
|
|
|
// a programatic test: |
|
var thinger = new dojox.widget.Dialog({ |
|
title:"foobar", |
|
dimensions: [200,200], |
|
draggable:false, |
|
easing: dojo.fx.easing.elasticOut, |
|
sizeDuration:900, |
|
sizeMethod:"combine" |
|
},"codeMade"); |
|
thinger.startup(); |
|
|
|
|
|
// make the "stock" buttons dijit Buttons, but skip the |
|
// dojoType="" for the purists. |
|
dojo.query("button") |
|
.forEach(function(n){ |
|
var oc = dojo.attr(n, "onclick"); |
|
var button = new dijit.form.Button({ |
|
onClick: oc |
|
}, n) |
|
}); |
|
|
|
// programatic with content: |
|
var thing2 = new dojox.widget.Dialog({ |
|
content:"<p>I am teh inner content</p>" |
|
}); |
|
thing2.startup(); |
|
|
|
new dijit.form.Button({ |
|
onClick:function(){ |
|
thing2.show() |
|
}, |
|
label:"show prog." |
|
}).placeAt("testholder"); |
|
|
|
// test double show (but #9147) |
|
var dblDialog = new dojox.widget.Dialog({ |
|
content:"<p>.show() is called twice on me</p>" |
|
}); |
|
dblDialog.startup(); |
|
|
|
new dijit.form.Button({ |
|
onClick:function(){ |
|
dblDialog.show(); |
|
dblDialog.show(); // intentially calling show() on an already shown dialog |
|
}, |
|
label:"double show." |
|
}).placeAt("testholder"); |
|
|
|
dojo.parser.parse(); |
|
|
|
}); |
|
|
|
</script> |
|
</head> |
|
<body class="claro"> |
|
|
|
<h1 class="testTitle">dojox.widget.Dialog module tests</h1> |
|
|
|
<p>This is the DojoX version of the dijit.Dialog. It is both very simple, and very different.</p> |
|
|
|
<div id='testholder' class="tests"> |
|
|
|
<h2>dojox.widget.DialogSimple</h2> |
|
|
|
<p>A Simple subclass mixing the capabilities of dojox.layout.ContentPane with default |
|
dijit.Dialog styles |
|
</p> |
|
|
|
<button onclick="dijit.byId('stest').show()">DialogSimple</button> |
|
<div id="stest" dojoType="dojox.widget.DialogSimple" style="width:200px"> |
|
<h2 style="margin-top:0">Wow!</h2> |
|
<p style="margin-top:0">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> |
|
</div> |
|
|
|
<button onclick="dijit.byId('stestjs').show()">DialogSimple:exejs</button> |
|
<div id="stestjs" title="Check the Console" |
|
dojoType="dojox.widget.DialogSimple" style="width:200px" executeScripts="true" href="withjs.html" |
|
></div> |
|
|
|
<h2>dojox.widget.Dialog</h2> |
|
<p>Fancy. Has more options. Different styles, too.</p> |
|
|
|
<button onclick="dijit.byId('firstTest').show()">Defaults only</button> |
|
|
|
<div id="firstTest" dojoType="dojox.widget.Dialog" title="A Dialog Thinger"> |
|
<p style="margin-top:0">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> |
|
</div> |
|
|
|
<button onclick="dijit.byId('secondTest').show()">Size to viewport, default padding (35)</button> |
|
|
|
<div id="secondTest" dojoType="dojox.widget.Dialog" sizeToViewport="true" title="A Dialog Thinger"> |
|
<p style="margin-top:0">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> |
|
</div> |
|
|
|
<button onclick="dijit.byId('thirdTest').show()">Size to viewport + 100 padding</button> |
|
|
|
<div id="thirdTest" dojoType="dojox.widget.Dialog" sizeToViewport="true" viewportPadding="100" title="A Dialog Thinger"> |
|
<p style="margin-top:0">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> |
|
</div> |
|
|
|
<button onclick="dijit.byId('fourthTest').show()">dimensions 600 x 420</button> |
|
<div id="fourthTest" dojoType="dojox.widget.Dialog" dimensions="[600,420]" title="A Dialog Thinger"> |
|
<p style="margin-top:0">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> |
|
</div> |
|
|
|
<button onclick="dijit.byId('anotherTest').show()">sizeDuration and easing</button> |
|
<div id="anotherTest" dojoType="dojox.widget.Dialog" sizeToViewport="true" |
|
viewportPadding="150" easing="dojo.fx.easing.backOut" sizeDuration="1400" |
|
title="A Dialog Thinger" |
|
> |
|
<h2 style="margin-top:0">Wow!</h2> |
|
<p style="margin-top:0">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> |
|
</div> |
|
|
|
<button onclick="dijit.byId('hrefText').show()">href + defaults</button> |
|
<div id="hrefText" dojoType="dojox.widget.Dialog" href="../../../dijit/tests/layout/getResponse.php?delay=3000&messId=3"></div> |
|
|
|
<button onclick="dijit.byId('yetanotherTest').show()">showTitle</button> |
|
<div id="yetanotherTest" dojoType="dojox.widget.Dialog" showTitle="true" title="I am A title!!!"> |
|
<h2 style="margin-top:0">Wow!</h2> |
|
<p style="margin-top:0"> |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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> |
|
</div> |
|
|
|
<button onclick="dijit.byId('yetanotherTest2').show()">draggable</button> |
|
<div id="yetanotherTest2" dojoType="dojox.widget.Dialog" draggable="true" showTitle="true" title="I am A title!!!"> |
|
<h2 style="margin-top:0">Wow!</h2> |
|
<p style="margin-top:0">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> |
|
</div> |
|
|
|
<button onclick="dijit.byId('yetanotherTest3').show()">method = combine, easing</button> |
|
<div id="yetanotherTest3" dojoType="dojox.widget.Dialog" sizeMethod="combine" |
|
easing="dojo.fx.easing.bounceOut" sizeDuration="600"> |
|
<h2 style="margin-top:0">Wow!</h2> |
|
<p style="margin-top:0">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> |
|
</div> |
|
|
|
<button onclick="dijit.byId('codeMade').show()">programatic</button> |
|
<div id="codeMade"><h2 style="margin-top:0">Wow!</h2><p>A small dialog</p></div> |
|
|
|
<button onclick="dijit.byId('modaltest').show()">modal:true</button> |
|
<div id="modaltest" dojoType="dojox.widget.Dialog" modal="true" |
|
easing="dojo.fx.easing.bounceOut" sizeDuration="600"> |
|
<h2 style="margin-top:0">Wow!</h2> |
|
<p style="margin-top:0">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> |
|
</div> |
|
|
|
</div> |
|
|
|
<p>There are several additional parameters to define how you want to display the dialog. It makes |
|
<em>some</em> assumption about how you want to size your pane.</p> |
|
|
|
<p>That's all folks, all of the supported options have buttons and inline tests.</p> |
|
<p>The names of these will be reversed in Dojo 2.0, should they survive the migration</p> |
|
|
|
</body> |
|
</html> |
|
|
|
|