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.
201 lines
8.5 KiB
201 lines
8.5 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> |
|
<meta name="apple-mobile-web-app-capable" content="yes"> |
|
<title>General widgets mobile test page</title> |
|
<link href="../icons/commonIcons.css" rel="stylesheet"> |
|
<script type="text/javascript" src="boilerplate.js"></script> |
|
|
|
<script language="JavaScript" type="text/javascript"> |
|
require([ |
|
"dojo/parser", |
|
|
|
"dijit/MenuBar", |
|
"dijit/PopupMenuBarItem", |
|
"dijit/DropDownMenu", |
|
"dijit/MenuItem", |
|
"dijit/MenuSeparator", |
|
"dijit/PopupMenuItem", |
|
"dijit/Menu", |
|
|
|
"dijit/Toolbar", |
|
"dijit/ToolbarSeparator", |
|
"dijit/ColorPalette", |
|
"dijit/TooltipDialog", |
|
"dijit/Dialog", |
|
|
|
"dijit/ProgressBar", |
|
"dijit/InlineEditBox", |
|
"dijit/TitlePane", |
|
|
|
"dijit/Tree", |
|
"dojo/data/ItemFileReadStore", |
|
"dijit/tree/ForestStoreModel", |
|
|
|
"dijit/form/Button", |
|
"dijit/form/DropDownButton", |
|
"dijit/form/ComboButton", |
|
"dijit/form/ToggleButton", |
|
"dijit/form/TextBox", |
|
"dijit/form/DateTextBox", |
|
"dijit/form/TimeTextBox", |
|
|
|
"dojo/domReady!" |
|
], function(parser){ |
|
parser.parse(); |
|
}); |
|
</script> |
|
</head> |
|
<body> |
|
<div id="menubar" data-dojo-type="dijit/MenuBar"> |
|
<div id="file" data-dojo-type="dijit/PopupMenuBarItem"> |
|
<span>File</span> |
|
<div id="fileMenu" data-dojo-type="dijit/DropDownMenu"> |
|
<div id="new" data-dojo-type="dijit/MenuItem">New</div> |
|
<div id="open" data-dojo-type="dijit/MenuItem">Open</div> |
|
<div id="separator" data-dojo-type="dijit/MenuSeparator"></div> |
|
<div id="save" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIconSave"'>Save</div> |
|
<div id="saveas" data-dojo-type="dijit/MenuItem">Save As...</div> |
|
</div> |
|
</div> |
|
<div id="edit" data-dojo-type="dijit/PopupMenuBarItem"> |
|
<span>Edit</span> |
|
<div id="editMenu" data-dojo-type="dijit/DropDownMenu"> |
|
<div id="cut" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut", |
|
onClick:function(){ console.log("not actually cutting anything, just a test!"); }, accelKey:"Ctrl+X"'>Cut</div> |
|
<div id="copy" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy", |
|
onClick:function(){ console.log("not actually copying anything, just a test!") }, accelKey:"Ctrl+C"'>Copy</div> |
|
<div id="paste" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste", |
|
onClick:function(){ console.log("not actually pasting anything, just a test!") }, accelKey:"Ctrl+V"'>Paste</div> |
|
</div> |
|
</div> |
|
<div id="view" data-dojo-type="dijit/PopupMenuBarItem"> |
|
<span>View</span> |
|
<div id="viewMenu" data-dojo-type="dijit/DropDownMenu"> |
|
<div data-dojo-type="dijit/MenuItem">Normal</div> |
|
<div data-dojo-type="dijit/MenuItem">Outline</div> |
|
<div data-dojo-type="dijit/PopupMenuItem"> |
|
<span>Zoom</span> |
|
<div id="zoomMenu" data-dojo-type="dijit/DropDownMenu"> |
|
<div data-dojo-type="dijit/MenuItem">50%</div> |
|
<div data-dojo-type="dijit/MenuItem">75%</div> |
|
<div data-dojo-type="dijit/MenuItem">100%</div> |
|
<div data-dojo-type="dijit/MenuItem">150%</div> |
|
<div data-dojo-type="dijit/MenuItem">200%</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="toolbar1" data-dojo-type="dijit/Toolbar"> |
|
<div id="toolbar1.cut" data-dojo-type="dijit/form/Button" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut", showLabel:false'>Cut</div> |
|
<div id="toolbar1.bold" data-dojo-type="dijit/form/ToggleButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBold", showLabel:false'>Bold2</div> |
|
<span data-dojo-type="dijit/ToolbarSeparator"></span> |
|
<div id="toolbar1.ttdialog" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"plusIcon", showLabel:true'> |
|
<span>TD</span> |
|
<div id="tooltipDlg" data-dojo-type="dijit/TooltipDialog" data-dojo-props='title:"Enter Login information", |
|
execute:function(args){ console.log("submitted w/args:\n" + JSON.stringify(args, true)); }'> |
|
<table> |
|
<tr> |
|
<td><label for="user">User:</label></td> |
|
<td><input id="user" data-dojo-type=dijit/form/TextBox type="text" name="user"></td> |
|
</tr> |
|
<tr> |
|
<td><label for="password">Password:</label></td> |
|
<td><input id="password" data-dojo-type=dijit/form/TextBox type="password" name="pwd"></td> |
|
</tr> |
|
<tr> |
|
<td colspan="2" style="text-align:center;"> |
|
<button data-dojo-type=dijit/form/Button data-dojo-props='type:"submit", name:"submit"'>Login</button></td> |
|
</tr> |
|
</table> |
|
</div |
|
></div> |
|
<div id="toolbar1.backcolor" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBackColor", showLabel:true'> |
|
<span>CP</span> |
|
<div id="toolbar1.colorPalette" data-dojo-type="dijit/ColorPalette" data-dojo-props='style:"display: none", palette:"7x10", onChange:function(){ console.log(this.value); }'></div> |
|
</div |
|
><div id="toolbar1.combo" data-dojo-type="dijit/form/ComboButton" data-dojo-props='optionsTitle:"save options", iconClass:"plusIcon", showLabel:true, |
|
onClick:function(){ console.log("clicked combo save") }'> |
|
<span>Menu</span> |
|
<div id="saveMenu" data-dojo-type="dijit/Menu" data-dojo-props='style:"display: none;"'> |
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave", |
|
onClick:function(){ console.log("not actually saving anything, just a test!") }'>Save</div> |
|
<div data-dojo-type="dijit/MenuItem" |
|
data-dojo-props='onClick:function(){ console.log("not actually saving anything, just a test!") }'>Save As</div> |
|
</div> |
|
</div> |
|
<div id="toolbar1.dialog" data-dojo-type="dijit/form/Button" onclick="dialog.show();" |
|
data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCreateLink"'>Dialog</div> |
|
</div> |
|
|
|
<div data-dojo-id="dialog" data-dojo-type="dijit/Dialog" data-dojo-props='title:"My Dialog", |
|
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:\n" + JSON.stringify(args, true)); }'> |
|
<div class="dijitDialogPaneContentArea"> |
|
<label for="fname">First:</label> |
|
<br> |
|
<input id="fname" name="fname" data-dojo-type="dijit/form/TextBox"> |
|
<br> |
|
|
|
<label for="lname">Last:</label> |
|
<br> |
|
<input id="lname" name="lname" data-dojo-type="dijit/form/TextBox"> |
|
<br> |
|
|
|
<label for="loc">Location:</label> |
|
<br> |
|
<input id="loc" name="loc" data-dojo-type="dijit/form/TextBox"> |
|
<br> |
|
|
|
<label for="date">Date:</label> |
|
<br> |
|
<input id="date" name="date" data-dojo-type="dijit/form/DateTextBox"> |
|
<br> |
|
|
|
<label for="time">Time:</label> |
|
<br> |
|
<input id="time" name="time" data-dojo-type="dijit/form/TimeTextBox"> |
|
<br> |
|
|
|
<label for="desc">Description:</label> |
|
<br> |
|
<input id="desc" name="desc" data-dojo-type="dijit/form/DateTextBox"> |
|
</div> |
|
<div class="dijitDialogPaneActionBar"> |
|
<button id="dialogbutton1" data-dojo-type="dijit/form/Button" data-dojo-props='type:"submit" '>OK</button> |
|
<button id="dialogbutton2" data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ dialog.onCancel(); } |
|
'>Cancel</button> |
|
</div> |
|
</div> |
|
|
|
<br> |
|
<div id="tp" data-dojo-type="dijit/TitlePane" data-dojo-props='title:"Title Pane #2"'> |
|
<form> |
|
<label for="age">Age:</label> <input id="age"><br> |
|
<label for="disc">Discount card:</label> <input id="disc" type="checkbox"><br> |
|
<button>Submit</button><br> |
|
</form> |
|
</div> |
|
|
|
<br> |
|
<div id="setTestBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:90%", |
|
maximum:200, value:"20" '></div> |
|
|
|
<br> |
|
<div data-dojo-id="continentStore" data-dojo-type="dojo/data/ItemFileReadStore" data-dojo-props='url:"_data/countries.json"'></div> |
|
<div data-dojo-id="continentModel" data-dojo-type="dijit/tree/ForestStoreModel" data-dojo-props='store:continentStore, query:{type:"continent"}, |
|
rootId:"continentRoot", rootLabel:"Continents", childrenAttrs:["children"]'></div> |
|
|
|
<div id="mytree" data-dojo-type="dijit/Tree" data-dojo-props='model:continentModel, openOnClick:true'> |
|
</div> |
|
|
|
<br> |
|
InlineEditBox: <span id="ieb" data-dojo-type="dijit/InlineEditBox" data-dojo-props='width:"200px", title:"recipient name"'></span> |
|
|
|
</body> |
|
</html>
|
|
|