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
133 lines (125 loc) • 4.88 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Dojo Toolkit - Background Iframe test</title>
<script type="text/javascript" src="boilerplate.js"></script>
<script type="text/javascript">
require([
"dojo/parser",
"dijit/Dialog",
"dijit/DropDownMenu",
"dijit/MenuItem",
"dijit/form/DateTextBox",
"dijit/form/Button",
"dijit/Tooltip",
"dojo/domReady!"
], function(parser){
parser.parse();
});
</script>
</head>
<body class="claro">
<span data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["one_pdf"]'>
This is one tooltip.
</span>
<span data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["two_pdf"]'>
This is another tooltip. A little longer...
</span>
<span data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["one_flash"]'>
This is one tooltip.
</span>
<span data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["two_flash"]'>
This is another tooltip. A little longer...
</span>
<button id="showDialog" data-dojo-type="dijit/form/Button">
Show Dialog
<script type="dojo/connect" data-dojo-event="onClick">
dialog.show();
</script>
</button>
<table>
<tr>
<td></td>
<td>
<input id="dateText_pdf" data-dojo-type="dijit/form/DateTextBox" data-dojo-props='type:"text" '/>
<button id="menuButton_pdf" title="edit title" value="Edit" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"noteIcon"'>
<span>Edit<b>!</b></span>
<span id="menu_pdf" data-dojo-type="dijit/DropDownMenu" >
<span id="cut_pdf" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
onClick:function(){ console.log("not actually cutting anything, just a test!"); }'>Cut</span>
<span id="copy_pdf" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
onClick:function(){ console.log("not actually copying anything, just a test!"); }'>Copy</span>
<span id="paste_pdf" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
onClick:function(){ console.log("not actually pasting anything, just a test!"); }'>Paste</span>
</span>
</button>
</td>
</tr>
<tr>
<td>
<div style="width: 200px;">
This <select> will disappear on IE6
when the dialog is displayed.
But the dialog's iframe shouldn't make it disappear because they shouldn't overlap.
</div>
<select id="dropDown_pdf">
<option>cat</option>
<option>dog</option>
<option>mouse</option>
</select>
<br><br>
<div id="one_pdf">Mouse over this to see the tooltip</div>
<br>
<div id="two_pdf">Mouse over this to see a different tooltip</div>
</td>
<td id="pdf_td">
<embed id="pdf" src="resources/helloWorld.pdf" width="500" height="375">
</td>
</tr>
</table>
<table>
<tr>
<td></td>
<td>
<input id="dateText_flash" data-dojo-type="dijit/form/DateTextBox" data-dojo-props='type:"text" '/>
<button id="menuButton_flash" title="edit title" value="Edit" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"noteIcon"'>
<span>Edit<b>!</b></span>
<span id="menu_flash" data-dojo-type="dijit/DropDownMenu" >
<span id="cut_flash" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
onClick:function(){ console.log("not actually cutting anything, just a test!"); }'>Cut</span>
<span id="copy_flash" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
onClick:function(){ console.log("not actually copying anything, just a test!"); }'>Copy</span>
<span id="paste_flash" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
onClick:function(){ console.log("not actually pasting anything, just a test!"); }'>Paste</span>
</span>
</button>
</td>
</tr>
<tr>
<td>
<div style="width: 200px;">
This select will disappear on IE6
when the dialog is displayed.
But the dialog's iframe shouldn't make it disappear because they shouldn't overlap.
</div>
<select id="dropDown_flash">
<option>cat</option>
<option>dog</option>
<option>mouse</option>
</select>
<br><br>
<div id="one_flash">Mouse over this to see the tooltip</div>
<br>
<div id="two_flash">Mouse over this to see a different tooltip</div>
</td>
<td>
<embed id="flash" src="../../dojox/av/resources/video.swf" width="400" height="300" />
</td>
</tr>
</table>
<div id="dialog" data-dojo-id="dialog" data-dojo-type="dijit/Dialog">
Hello!
</div>
</body>
</html>