<!DOCTYPE html>
|
<html>
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>Dijit Theme Tester</title>
|
|
<script type="text/javascript" src="../tests/boilerplate.js"></script>
|
|
<script>
|
var startTime = new Date();
|
</script>
|
|
<style type="text/css">
|
html, body {
|
height: 100%;
|
width: 100%;
|
padding: 0;
|
border: 0;
|
}
|
|
#main {
|
height: 100%;
|
width: 100%;
|
border: 0;
|
}
|
|
/***
|
Uncomment this rule to test border-box sizing
|
* {
|
-moz-box-sizing: border-box;
|
box-sizing: border-box;
|
}
|
***/
|
|
#header {
|
margin: 0;
|
}
|
|
#leftAccordion {
|
width: 25%;
|
}
|
|
#bottomTabs {
|
height: 40%;
|
}
|
|
#hs-1width {
|
width: 400px;
|
height: 40px;
|
}
|
|
/* pre-loader specific stuff to prevent unsightly flash of unstyled content */
|
#loader {
|
padding: 0;
|
margin: 0;
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: #ededed;
|
z-index: 999;
|
vertical-align: middle;
|
}
|
|
#loaderInner {
|
padding: 5px;
|
position: relative;
|
left: 0;
|
top: 0;
|
width: 175px;
|
background: #3c3;
|
color: #fff;
|
}
|
|
#indTestBar,
|
#setTestBar {
|
width: 400px;
|
}
|
|
hr.spacer {
|
border: 0;
|
background-color: #ededed;
|
width: 80%;
|
height: 1px;
|
}
|
|
/* rules used to test custom setting of TextBox padding */
|
.inputPadding0 .dijitInputField {
|
padding: 0 !important;
|
}
|
|
.inputPadding1 .dijitInputField {
|
padding: 1px !important;
|
}
|
|
.inputPadding2 .dijitInputField {
|
padding: 2px !important;
|
}
|
|
.inputPadding3 .dijitInputField {
|
padding: 3px !important;
|
}
|
|
.inputPadding4 .dijitInputField {
|
padding: 4px !important;
|
}
|
|
.inputPadding5 .dijitInputField {
|
padding: 5px !important;
|
}
|
</style>
|
|
<!-- a check for stray globals: not needed! -->
|
<script type="text/javascript">
|
window.__globalList = {
|
// ignore globals created by this file
|
setBackground: true,
|
dojo: true,
|
dijit: true,
|
dojox: true,
|
showDialog: true,
|
showDialogAb: true,
|
setTextBoxPadding: true,
|
logStrayGlobals: true,
|
logWidgets: true, tearDown: true,
|
continentStore: true,
|
continentModel: true,
|
dom: true,
|
registry: true,
|
require: true,
|
dojoConfig: true
|
};
|
|
// ignore natural globals
|
for(var i in window){
|
window.__globalList[i] = true;
|
}
|
</script>
|
|
|
<script type="text/javascript">
|
require([
|
"dojo/_base/array", "dojo/_base/fx", "dojo/_base/window", "dojo/dom", "dojo/dom-class", "dojo/dom-geometry", "dojo/dom-style",
|
"dojo/hccss", "dojo/date/locale", "dojo/parser", "dojo/store/Memory",
|
"dijit/registry", "dijit/tree/ObjectStoreModel",
|
|
"dijit/CheckedMenuItem", "dijit/RadioMenuItem", "dijit/MenuSeparator",
|
|
// Editors used by InlineEditBox. Must be pre-loaded.
|
"dijit/form/Textarea", "dijit/form/DateTextBox", "dijit/form/TimeTextBox", "dijit/form/FilteringSelect",
|
|
// These plugins are used by the Editor, and need to be pre-loaded
|
"dijit/_editor/plugins/LinkDialog", // for createLink
|
"dijit/_editor/plugins/FontChoice", // for fontName
|
|
// Modules referenced by the parser
|
"dijit/Menu", "dijit/PopupMenuItem", "dijit/ColorPalette", "dijit/layout/BorderContainer", "dijit/MenuBar",
|
"dijit/PopupMenuBarItem", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dijit/ConfirmTooltipDialog",
|
"dijit/Tree", "dijit/layout/TabContainer", "dijit/form/ComboButton", "dijit/form/ToggleButton",
|
"dijit/form/CheckBox", "dijit/form/RadioButton", "dijit/form/CurrencyTextBox", "dijit/form/NumberSpinner",
|
"dijit/form/Select", "dijit/Editor", "dijit/form/VerticalSlider", "dijit/form/VerticalRuleLabels",
|
"dijit/form/VerticalRule", "dijit/form/HorizontalSlider", "dijit/form/HorizontalRuleLabels",
|
"dijit/form/HorizontalRule", "dijit/TitlePane", "dijit/ProgressBar", "dijit/InlineEditBox", "dojo/dnd/Source",
|
"dijit/ConfirmDialog",
|
|
// Don't call the parser until the DOM has finished loading
|
"dojo/domReady!"
|
], function(array, baseFx, win, dom, domClass, domGeom, domStyle, has, locale, parser, Memory, registry, ObjectStoreModel,
|
CheckedMenuItem, RadioMenuItem, MenuSeparator){
|
// If you are doing box-model sizing then need to tell dom-geometry, see #15104
|
if(domStyle.get(document.body, "boxSizing") == "border-box" ||
|
domStyle.get(document.body, "MozBoxSizing") == "border-box"){
|
domGeom.boxModel = "border-box";
|
}
|
|
// various function ripped out of inline script type=dojo/* blocks
|
showDialog = function(){
|
var dlg = registry.byId('dialog1');
|
dlg.show();
|
// avoid (trying to) restore focus to a closed menu, go to MenuBar instead
|
dlg._savedFocus = dom.byId("header");
|
};
|
|
showDialogAb = function(){
|
var dlg = registry.byId('dialogAB');
|
dlg.show();
|
// avoid (trying to) restore focus to a closed menu, go to MenuBar instead
|
dlg._savedFocus = dom.byId("header");
|
};
|
|
//var setTextBoxPadding;
|
// current setting (if there is one) to override theme default padding on TextBox based widgets
|
var currentInputPadding = "";
|
|
setTextBoxPadding = function(){
|
// summary:
|
// Handler for when a MenuItem is clicked to set non-default padding for
|
// TextBox widgets
|
|
// Effectively ignore clicks on the currently checked MenuItem
|
if(!this.get("checked")){
|
this.set("checked", true);
|
}
|
|
// val will be "theme default", "0px", "1px", ..., "5px"
|
var val = this.get("label");
|
|
// Set class on body to get requested padding, and remove any previously set class
|
if(currentInputPadding){
|
domClass.remove(win.body(), currentInputPadding);
|
currentInputPadding = "";
|
}
|
if(val != "theme default"){
|
currentInputPadding = "inputPadding" + val.replace("px", "");
|
domClass.add(win.body(), currentInputPadding);
|
}
|
|
// Clear previously checked MenuItem (radio-button effect).
|
array.forEach(this.getParent().getChildren(), function(mi){
|
if(mi != this){
|
mi.set("checked", false);
|
}
|
}, this);
|
};
|
|
logStrayGlobals = function(){
|
// summary:
|
// Print all the global variables that we've created [by mistake] inside of dojo
|
var strayGlobals = [];
|
for(var i in window){
|
if(!window.__globalList[i]){
|
strayGlobals.push(i);
|
}
|
}
|
if(strayGlobals.length){
|
console.warn("Stray globals: " + strayGlobals.join(", "));
|
}
|
};
|
|
logWidgets = function(){
|
// summary:
|
// Print all the widgets to console
|
console.log("Widgets in registry:");
|
registry.forEach(function(w){
|
console.log(w);
|
});
|
};
|
|
tearDown = function(){
|
// summary:
|
// Destroy all widgets, top down, and then check for any orphaned widgets
|
registry._destroyAll();
|
logWidgets();
|
};
|
|
// Data for Tree, ComboBox, InlineEditBox
|
var data = [
|
{ id: "earth", name: "The earth", type: "planet", population: "6 billion"},
|
{ id: "AF", name: "Africa", type: "continent", population: "900 million", area: "30,221,532 sq km",
|
timezone: "-1 UTC to +4 UTC", parent: "earth"},
|
{ id: "EG", name: "Egypt", type: "country", parent: "AF" },
|
{ id: "KE", name: "Kenya", type: "country", parent: "AF" },
|
{ id: "Nairobi", name: "Nairobi", type: "city", parent: "KE" },
|
{ id: "Mombasa", name: "Mombasa", type: "city", parent: "KE" },
|
{ id: "SD", name: "Sudan", type: "country", parent: "AF" },
|
{ id: "Khartoum", name: "Khartoum", type: "city", parent: "SD" },
|
{ id: "AS", name: "Asia", type: "continent", parent: "earth" },
|
{ id: "CN", name: "China", type: "country", parent: "AS" },
|
{ id: "IN", name: "India", type: "country", parent: "AS" },
|
{ id: "RU", name: "Russia", type: "country", parent: "AS" },
|
{ id: "MN", name: "Mongolia", type: "country", parent: "AS" },
|
{ id: "OC", name: "Oceania", type: "continent", population: "21 million", parent: "earth"},
|
{ id: "AU", name: "Australia", type: "country", population: "21 million", parent: "OC"},
|
{ id: "EU", name: "Europe", type: "continent", parent: "earth" },
|
{ id: "DE", name: "Germany", type: "country", parent: "EU" },
|
{ id: "FR", name: "France", type: "country", parent: "EU" },
|
{ id: "ES", name: "Spain", type: "country", parent: "EU" },
|
{ id: "IT", name: "Italy", type: "country", parent: "EU" },
|
{ id: "NA", name: "North America", type: "continent", parent: "earth" },
|
{ id: "MX", name: "Mexico", type: "country", population: "108 million", area: "1,972,550 sq km",
|
parent: "NA" },
|
{ id: "Mexico City", name: "Mexico City", type: "city", population: "19 million", timezone: "-6 UTC", parent: "MX"},
|
{ id: "Guadalajara", name: "Guadalajara", type: "city", population: "4 million", timezone: "-6 UTC", parent: "MX" },
|
{ id: "CA", name: "Canada", type: "country", population: "33 million", area: "9,984,670 sq km", parent: "NA" },
|
{ id: "Ottawa", name: "Ottawa", type: "city", population: "0.9 million", timezone: "-5 UTC", parent: "CA"},
|
{ id: "Toronto", name: "Toronto", type: "city", population: "2.5 million", timezone: "-5 UTC", parent: "CA" },
|
{ id: "US", name: "United States of America", type: "country", parent: "NA" },
|
{ id: "SA", name: "South America", type: "continent", parent: "earth" },
|
{ id: "BR", name: "Brazil", type: "country", population: "186 million", parent: "SA" },
|
{ id: "AR", name: "Argentina", type: "country", population: "40 million", parent: "SA" }
|
];
|
|
// Create test store.
|
continentStore = new Memory({
|
data: data
|
});
|
|
// Since dojo.store.Memory doesn't have various store methods we need, we have to add them manually
|
continentStore.getChildren = function(object){
|
// Add a getChildren() method to store for the data model where
|
// children objects point to their parent (aka relational model)
|
return this.query({parent: this.getIdentity(object)});
|
};
|
|
// Create the model for the Tree
|
continentModel = new ObjectStoreModel({store: continentStore, query: {id: "earth"}});
|
|
var loadCompleteTime = +new Date();
|
console.log("Total load time: " + (loadCompleteTime - startTime) + "ms");
|
|
parser.parse(dom.byId('container')).then(function(){
|
console.info("Total parse time: " + (+new Date() - loadCompleteTime) + "ms");
|
|
dom.byId('loaderInner').innerHTML += " done.";
|
setTimeout(function hideLoader(){
|
baseFx.fadeOut({
|
node: 'loader',
|
duration: 500,
|
onEnd: function(n){
|
n.style.display = "none";
|
}
|
}).play();
|
}, 250);
|
|
logStrayGlobals();
|
|
// availableThemes[] is just a list of 'official' dijit themes, you can use ?theme=String
|
// for 'un-supported' themes, too. (eg: yours)
|
var availableThemes = [
|
{ theme: "claro", author: "Dojo", baseUri: "../themes/" },
|
{ theme: "tundra", author: "Dojo", baseUri: "../themes/" },
|
{ theme: "soria", author: "nikolai", baseUri: "../themes/" },
|
{ theme: "nihilo", author: "nikolai", baseUri: "../themes/" }
|
];
|
|
// Get current theme, a11y, and dir setting for page
|
var curTheme = location.search.replace(/.*theme=([a-z]+).*/, "$1") || "claro",
|
a11y = has("highcontrast") || /a11y=true/.test(location.search),
|
rtl = document.body.parentNode.dir == "rtl";
|
console.log("Theme: " + curTheme + ", high contrast = " + a11y + ", dir = " + (rtl ? "rtl" : "ltr"));
|
|
function setUrl(theme, rtl, a11y){
|
// Function to reload page with specified theme, rtl, and a11y settings
|
location.search = "?theme=" + theme + (rtl ? "&dir=rtl" : "") + (a11y ? "&a11y=true" : "");
|
}
|
|
// Create menu choices and links to test other themes
|
var tmpString = '';
|
array.forEach(availableThemes, function(theme){
|
if(theme != curTheme){
|
tmpString +=
|
'<a href="?theme=' + theme.theme + '">' + theme.theme + '</' + 'a> (' +
|
'<a href="?theme=' + theme.theme + '&dir=rtl">RTL</' + 'a> ' +
|
'<a href="?theme=' + theme.theme + '&a11y=true">high-contrast</' + 'a> ' +
|
'<a href="?theme=' + theme.theme + '&dir=rtl&a11y=true">RTL+high-contrast</' + 'a> )' +
|
' - by: ' + theme.author + ' <br>';
|
}
|
});
|
dom.byId('themeData').innerHTML = tmpString;
|
|
// Create menu choices to test other themes
|
array.forEach(availableThemes, function(theme){
|
registry.byId('themeMenu').addChild(new RadioMenuItem({
|
id: theme.theme + "_radio",
|
label: theme.theme,
|
group: "theme",
|
checked: theme.theme == curTheme,
|
onClick: function(){
|
// Change theme, keep current a11y and rtl settings
|
setUrl(theme.theme, a11y, rtl);
|
}
|
}));
|
});
|
registry.byId('themeMenu').addChild(new MenuSeparator({}));
|
registry.byId('themeMenu').addChild(new CheckedMenuItem({
|
label: "RTL",
|
checked: rtl,
|
onChange: function(val){
|
// Keep current theme and a11y setting, but use new dir setting
|
setUrl(curTheme, val, a11y);
|
}
|
}));
|
registry.byId('themeMenu').addChild(new CheckedMenuItem({
|
label: "high contrast",
|
checked: a11y,
|
onChange: function(val){
|
// Keep current theme and dir setting, but use high-contrast (or not-high-contrast) setting
|
setUrl(curTheme, rtl, val);
|
}
|
}));
|
|
// It's the server's responsibility to localize the date displayed in the (non-edit) version of an InlineEditBox,
|
// but since we don't have a server we'll hack it in the client
|
registry.byId("backgroundArea").set('value', locale.format(new Date(2005, 11, 30), { selector: 'date' }));
|
|
var nineAm = new Date(0);
|
nineAm.setHours(9);
|
registry.byId("timePicker").set('value', locale.format(nineAm, { selector: 'time' }));
|
});
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<!-- basic preloader: -->
|
<div id="loader">
|
<div id="loaderInner" style="direction:ltr;">Loading themeTester ...</div>
|
</div>
|
|
<script type="dojo/require">
|
dom: "dojo/dom",
|
registry: "dijit/registry"
|
</script>
|
|
<!-- contentMenu popup --> <!-- redundant display:none required here? -->
|
<div data-dojo-type="dijit/Menu" id="submenu1" data-dojo-props='contextMenuForWindow:true, style:"display:none"'
|
style="display: none;">
|
<div data-dojo-type="dijit/MenuItem"
|
data-dojo-props="onClick:function(){ alert('Hello world'); }">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:'dijitIconCut', onClick: function(){ alert('not actually cutting anything. Just a test!'); }">
|
Cut
|
</div>
|
<div data-dojo-type="dijit/MenuItem"
|
data-dojo-props="iconClass:'dijitIconCopy', onClick:function(){ alert('not actually copying anything, just a test!'); }">
|
Copy
|
</div>
|
<div data-dojo-type="dijit/MenuItem"
|
data-dojo-props="iconClass:'dijitIconPaste', onClick: function(){ alert('not actually pasting anything, just a test!'); }">
|
Paste
|
</div>
|
<div data-dojo-type="dijit/MenuSeparator"></div>
|
<div data-dojo-type="dijit/PopupMenuItem">
|
<span>Enabled Submenu</span>
|
|
<div data-dojo-type="dijit/Menu" id="submenu2">
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick: function(){ alert('Submenu 1!') }">Submenu
|
Item One
|
</div>
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick: function(){ alert('Submenu 2!') }">Submenu
|
Item Two
|
</div>
|
<div data-dojo-type="dijit/PopupMenuItem">
|
<span>Deeper Submenu</span>
|
|
<div data-dojo-type="dijit/Menu" id="submenu4">
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('Sub-submenu 1!')}">
|
Sub-sub-menu Item One
|
</div>
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('Sub-submenu 2!')}">
|
Sub-sub-menu Item Two
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div data-dojo-type="dijit/PopupMenuItem" data-dojo-props="disabled:true">
|
<span>Disabled Submenu</span>
|
|
<div data-dojo-type="dijit/Menu" id="submenu3" style="display: none;">
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('Submenu 1!')}">Submenu Item
|
One
|
</div>
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('Submenu 2!')}">Submenu Item
|
Two
|
</div>
|
</div>
|
</div>
|
<div data-dojo-type="dijit/PopupMenuItem">
|
<span>Different popup</span>
|
|
<div data-dojo-type="dijit/ColorPalette"></div>
|
</div>
|
<div data-dojo-type="dijit/PopupMenuItem">
|
<span>Different popup</span>
|
|
<div data-dojo-type="dijit/Calendar"></div>
|
</div>
|
</div>
|
<!-- end contextMenu -->
|
|
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="liveSplitters:false, design:'sidebar'">
|
|
<div id="header" data-dojo-type="dijit/MenuBar" data-dojo-props="region:'top'">
|
<div data-dojo-type="dijit/PopupMenuBarItem" id="file">
|
<span>File</span>
|
|
<div data-dojo-type="dijit/Menu" id="fileMenu">
|
<div data-dojo-type="dijit/MenuItem" id="globals" data-dojo-props="onClick: logStrayGlobals">Log globals
|
</div>
|
<div data-dojo-type="dijit/MenuItem" id="widgets" data-dojo-props="onClick: logWidgets">Log widgets</div>
|
<div data-dojo-type="dijit/MenuItem" id="destroy"
|
data-dojo-props="iconClass:'dijitIconDelete', onClick:tearDown">Destroy All
|
</div>
|
</div>
|
</div>
|
<div data-dojo-type="dijit/PopupMenuBarItem" id="edit">
|
<span>Edit</span>
|
|
<div data-dojo-type="dijit/Menu" id="editMenu">
|
<div data-dojo-type="dijit/MenuItem" id="cut" data-dojo-props="
|
iconClass:'dijitIconCut',
|
onClick:function(){ console.log('not actually cutting anything, just a test!') }
|
">Cut
|
</div>
|
<div data-dojo-type="dijit/MenuItem" id="copy" data-dojo-props="
|
iconClass:'dijitIconCopy',
|
onClick: function(){ console.log('not actually copying anything, just a test!') }
|
">Copy
|
</div>
|
<div data-dojo-type="dijit/MenuItem" id="paste" data-dojo-props="iconClass:'dijitIconPaste',
|
onClick: function(){ console.log('not actually pasting anything, just a test!') }">Paste
|
</div>
|
<div data-dojo-type="dijit/MenuSeparator" id="separator"></div>
|
<div data-dojo-type="dijit/MenuItem" id="undo" data-dojo-props="iconClass:'dijitIconUndo'">Undo</div>
|
</div>
|
</div>
|
<div data-dojo-type="dijit/PopupMenuBarItem" id="view">
|
<span>View</span>
|
|
<div data-dojo-type="dijit/Menu" id="viewMenu">
|
<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 data-dojo-type="dijit/Menu" id="zoomMenu">
|
<div data-dojo-type="dijit/RadioMenuItem" data-dojo-props="group:'zoom'">50%</div>
|
<div data-dojo-type="dijit/RadioMenuItem" data-dojo-props="group:'zoom'">75%</div>
|
<div data-dojo-type="dijit/RadioMenuItem" data-dojo-props="group:'zoom', checked:true">100%</div>
|
<div data-dojo-type="dijit/RadioMenuItem" data-dojo-props="group:'zoom'">150%</div>
|
<div data-dojo-type="dijit/RadioMenuItem" data-dojo-props="group:'zoom'">200%</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div data-dojo-type="dijit/PopupMenuBarItem" id="themes">
|
<span>Themes</span>
|
|
<div data-dojo-type="dijit/Menu" id="themeMenu"></div>
|
</div>
|
<div data-dojo-type="dijit/PopupMenuBarItem" id="dialogs">
|
<span>Dialogs</span>
|
|
<div data-dojo-type="dijit/Menu" id="dialogMenu">
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick: showDialog">slow loading</div>
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick: showDialogAb">action bar</div>
|
</div>
|
</div>
|
<div data-dojo-type="dijit/PopupMenuBarItem" id="inputPadding">
|
<span>TextBox Padding</span>
|
|
<div data-dojo-type="dijit/Menu" id="inputPaddingMenu">
|
<div data-dojo-type="dijit/RadioMenuItem" data-dojo-props="group:'padding', onClick:setTextBoxPadding, checked:true">theme
|
default
|
</div>
|
<div data-dojo-type="dijit/RadioMenuItem" data-dojo-props="group:'padding', onClick:setTextBoxPadding">0px</div>
|
<div data-dojo-type="dijit/RadioMenuItem" data-dojo-props="group:'padding', onClick:setTextBoxPadding">1px</div>
|
<div data-dojo-type="dijit/RadioMenuItem" data-dojo-props="group:'padding', onClick:setTextBoxPadding">2px</div>
|
<div data-dojo-type="dijit/RadioMenuItem" data-dojo-props="group:'padding', onClick:setTextBoxPadding">3px</div>
|
<div data-dojo-type="dijit/RadioMenuItem" data-dojo-props="group:'padding', onClick:setTextBoxPadding">4px</div>
|
<div data-dojo-type="dijit/RadioMenuItem" data-dojo-props="group:'padding', onClick:setTextBoxPadding">5px</div>
|
</div>
|
</div>
|
<div data-dojo-type="dijit/PopupMenuBarItem" id="help">
|
<span>Help</span>
|
|
<div data-dojo-type="dijit/Menu" id="helpMenu">
|
<div data-dojo-type="dijit/MenuItem">Help Topics</div>
|
<div data-dojo-type="dijit/MenuItem">About Dijit</div>
|
</div>
|
</div>
|
<div data-dojo-type="dijit/PopupMenuBarItem" data-dojo-props="disabled:true">
|
<span>Disabled</span>
|
|
<div data-dojo-type="dijit/Menu">
|
<div data-dojo-type="dijit/MenuItem">You should not see this</div>
|
</div>
|
</div>
|
</div>
|
|
<div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="region:'leading', splitter:true, minSize:20"
|
style="width: 300px;" id="leftAccordion">
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Popups and Alerts"'>
|
<div style="padding:8px">
|
<h2>Tooltips</h2>
|
<ul>
|
<li>
|
<span id="ttRich"><b>rich</b> <i>text</i> tooltip</span>
|
<span data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'ttRich'" style="display:none;">
|
Embedded <b>bold</b> <i>RICH</i> text <span
|
style="color:#309; font-size:x-large;">weirdness!</span>
|
</span>
|
</li>
|
|
<li><a id="ttOne" href='#bogus'>anchor tooltip</a>
|
<span data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:"ttOne"' style="display:none;">tooltip on anchor</span>
|
</li>
|
</ul>
|
|
<table style="width: 100%;">
|
<tr>
|
<td></td>
|
<td>
|
<div id="ttBelow">tooltip below</div>
|
<div data-dojo-type="dijit/Tooltip"
|
data-dojo-props="connectId:'ttBelow', position:['below-centered']"
|
style="display:none; width: 100px;">I'm <i>below</i>!
|
</div>
|
</td>
|
<td></td>
|
</tr>
|
<tr>
|
<td>
|
<div id="ttRight">tooltip after</div>
|
<div data-dojo-type="dijit/Tooltip"
|
data-dojo-props="connectId:'ttRight', position:['after-centered']" style="display:none;">
|
I'm on the <i>right</i>!<br>(or left on RTL systems)
|
</div>
|
</td>
|
<td></td>
|
<td>
|
<div id="ttLeft">tooltip before</div>
|
<div data-dojo-type="dijit/Tooltip"
|
data-dojo-props="connectId:'ttLeft', position:['before-centered','after-centered']"
|
style="display:none;">I'm on the <i>left</i>!<br>(or right on RTL systems)
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td></td>
|
<td>
|
<div id="ttAbove">tooltip above</div>
|
<div data-dojo-type="dijit/Tooltip"
|
data-dojo-props="connectId:'ttAbove', position:['above-centered']" style="display:none;">
|
I'm <i>above</i>!
|
</div>
|
</td>
|
<td></td>
|
</tr>
|
</table>
|
|
<hr class="spacer">
|
|
<h2>Dialogs</h2>
|
<ul>
|
<li><a href="#" onclick="registry.byId('dialog1').show()">slow loading modal dialog</a></li>
|
<li><a href="#" onclick="registry.byId('dialogAB').show()">modal dialog w/action bar</a></li>
|
</ul>
|
|
<div data-dojo-type="dijit/form/DropDownButton">
|
<span>Show Tooltip Dialog</span>
|
|
<div data-dojo-type="dijit/ConfirmTooltipDialog" id="tooltipDlg" data-dojo-props='
|
title:"Enter Login information",
|
execute: function(){ alert("submitted w/args:\n" + dojo.toJson(arguments[0], true)); }
|
'>
|
<table>
|
<tr>
|
<td><label for="user">User:</label></td>
|
<td><input data-dojo-type="dijit/form/TextBox" type="text" id="user" name="user"></td>
|
</tr>
|
<tr>
|
<td><label for="pwd">Password:</label></td>
|
<td><input data-dojo-type="dijit/form/TextBox" type="password" id="pwd" name="pwd"></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Tree"'>
|
<!-- tree widget -->
|
<div data-dojo-type="dijit/Tree"
|
data-dojo-props="model: continentModel, query:{ type:'continent'}, label:'Continents', openOnClick:true"
|
></div>
|
</div>
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Rootless Tree'">
|
<div id="rootlessTree" data-dojo-type="dijit/Tree" data-dojo-props="
|
model:continentModel,
|
query:{ type:'continent' },
|
showRoot: false,
|
openOnClick:true
|
"></div>
|
</div>
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='selected:true, title:"Calendar"'>
|
<!-- calendar widget pane -->
|
<input id="calendar1" data-dojo-type="dijit/Calendar">
|
</div>
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Color Picker"'>
|
<p>
|
Selecting a color will change the background color of the page.
|
Use this to test how tooltips and drop downs appear with different backgrounds.
|
</p>
|
|
<h2 class="testHeader">3x4</h2>
|
<script>
|
function setBackground(color){
|
dojo.query('.dijitAccordionBody').style('background', color);
|
dojo.query('.dijitTabPaneWrapper').style('background', color);
|
}
|
</script>
|
<div data-dojo-type="dijit/ColorPalette" data-dojo-props="palette:'3x4', onChange:setBackground"></div>
|
<h2 class="testHeader">7x10</h2>
|
|
<div data-dojo-type="dijit/ColorPalette" data-dojo-props="onChange:setBackground"></div>
|
</div>
|
</div>
|
<!-- end AccordionContainer -->
|
|
<!-- top tabs (marked as "center" to take up the main part of the BorderContainer) -->
|
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center', tabStrip:true" id="topTabs">
|
|
<div id="basicFormTab" data-dojo-type="dijit/layout/ContentPane"
|
data-dojo-props="title:'Basic Form Widgets', style:'padding:10px;display:none;'">
|
|
<h2>Buttons</h2>
|
|
<p>Buttons can do an action, display a menu, or both:</p>
|
|
Enabled:
|
|
<button data-dojo-type="dijit/form/Button"
|
data-dojo-props="iconClass:'dijitIconTask', onClick:function(){ console.debug('clicked simple') }">
|
Simple
|
</button>
|
|
<div data-dojo-type="dijit/form/DropDownButton" data-dojo-props="iconClass:'dijitIconEdit'">
|
<span>Drop Down</span>
|
|
<div data-dojo-type="dijit/Menu" id="editMenu1" style="display: none;">
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="
|
iconClass:'dijitIconCut',
|
onClick:function(){ console.debug('not actually cutting anything, just a test!') }
|
">Cut
|
</div>
|
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="
|
iconClass:'dijitIconCopy',
|
onClick:function(){ console.debug('not actually copying anyything, just a test!'); }
|
">Copy
|
</div>
|
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="
|
iconClass:'dijitIconPaste',
|
onClick:function(){ console.debug('not actually pasting anyything, just a test!'); }
|
">Paste
|
</div>
|
</div>
|
</div>
|
|
<div data-dojo-type="dijit/form/ComboButton"
|
data-dojo-props='iconClass:"dijitIconSave", optionsTitle:"save options", onClick:function(){ console.log("clicked combo save"); }'>
|
<span>Combo</span>
|
|
<div data-dojo-type="dijit/Menu" id="saveMenu1" style="display: none;">
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="
|
iconClass:'dijitIconSave',
|
onClick: function(){ console.debug('not actually saving anything, just a test!') }
|
">Save
|
</div>
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="
|
onClick: function(){ console.debug('not actually saving anything, just a test!') }
|
">Save As
|
</div>
|
</div>
|
</div>
|
|
<div data-dojo-type="dijit/form/ToggleButton" data-dojo-props="
|
checked:true,
|
onChange: function(a){ console.log('toggle button checked=' + a); }, iconClass:'dijitCheckBoxIcon'
|
"> Toggle
|
</div>
|
|
<hr class="spacer">
|
|
Disabled:
|
|
<button data-dojo-type="dijit/form/Button" data-dojo-props='iconClass:"dijitIconTask", disabled:true' disabled>
|
Simple
|
</button>
|
|
<div data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"dijitIconEdit", disabled:true'>
|
<span>Drop Down</span>
|
<ul data-dojo-type="dijit/Menu" id="editMenu2" style="display: none;">
|
<li data-dojo-type="dijit/MenuItem" data-dojo-props="
|
iconClass:'dijitIconCut',
|
onClick: function(){ console.debug('not actually cutting anything, just a test!') }
|
">Cut
|
</li>
|
|
<li data-dojo-type="dijit/MenuItem" data-dojo-props="
|
iconClass:'dijitIconCopy',
|
onClick: function(){ console.debug('not actually copying anything, just a test!') }
|
">Copy
|
</li>
|
|
<li data-dojo-type="dijit/MenuItem" data-dojo-props="
|
iconClass:'dijitIconPaste',
|
onClick: function(){ console.debug('not actually pasting anything, just a test!') }
|
">Paste
|
</li>
|
</ul>
|
</div>
|
|
<div data-dojo-type="dijit/form/ComboButton"
|
data-dojo-props="iconClass:'dijitIconSave', optionsTitle:'save options', disabled:true">
|
<span>Combo</span>
|
|
<div data-dojo-type="dijit/Menu" id="saveMenu2" style="display: none;">
|
<div data-dojo-type="dijit/MenuItem" data-dojo-props="
|
iconCLass:'dijitIconSave',
|
onClick:function(){ console.log('not actually saving anything, just a test!' ); }
|
">Save
|
</div>
|
<div data-dojo-type="dijit/MenuItem"
|
onClick="console.debug('not actually saving anything, just a test!')">
|
Save As
|
</div>
|
</div>
|
</div>
|
|
<button data-dojo-type="dijit/form/ToggleButton"
|
data-dojo-props="checked:true, disabled:true, iconClass:'dijitCheckBoxIcon'">
|
Toggle
|
</button>
|
|
<hr class="spacer">
|
|
<h2>CheckBox</h2>
|
<fieldset>
|
<input id="check1" type="checkBox" data-dojo-type="dijit/form/CheckBox">
|
<label for="check1">unchecked</label>
|
|
<input id="check2" type="checkBox" data-dojo-type="dijit/form/CheckBox" data-dojo-props="checked:true"
|
checked="checked">
|
<label for="check2">checked</label>
|
|
<input id="check3" type="checkBox" data-dojo-type="dijit/form/CheckBox" data-dojo-props='disabled:true'
|
disabled>
|
<label for="check3">disabled</label>
|
|
<input id="check4" type="checkBox" data-dojo-type="dijit/form/CheckBox"
|
data-dojo-props='disabled:true, checked:true' checked="checked" disabled>
|
<label for="check4">disabled and checked</label>
|
</fieldset>
|
|
<h2>Radio Buttons</h2>
|
<fieldset>
|
<input type="radio" name="g1" id="g1rb1" value="news" data-dojo-type="dijit/form/RadioButton">
|
<label for="g1rb1">news</label>
|
<input type="radio" name="g1" id="g1rb2" value="talk" data-dojo-type="dijit/form/RadioButton"
|
data-dojo-props='checked:true' checked>
|
<label for="g1rb2">talk</label>
|
<input type="radio" name="g1" id="g1rb3" value="weather" data-dojo-type="dijit/form/RadioButton"
|
data-dojo-props='disabled:true' disabled>
|
<label for="g1rb3">weather <span dir="ltr">(disabled)</span></label>
|
</fieldset>
|
</div>
|
<!-- end of basic form widgets -->
|
|
<div id="textboxTab" data-dojo-type="dijit/layout/ContentPane"
|
data-dojo-props='title:"Text Input Widgets", style:"padding:10px;display:none;"'>
|
|
<h2>dijit/form/DateTextBox</h2>
|
<label for="date1">Enabled w/placeHolder:</label>
|
<input id="date1" name="date1" type="text" data-dojo-type="dijit/form/DateTextBox"
|
data-dojo-props="placeHolder:'Birthday'">
|
<label for="date2">Disabled w/placeHolder:</label>
|
<input id="date2" name="date2" type="text" data-dojo-type="dijit/form/DateTextBox"
|
data-dojo-props='placeHolder:"Birthday", disabled:true'>
|
<label for="date2">Disabled w/value:</label>
|
<input id="date3" name="date3" type="text" data-dojo-type="dijit/form/DateTextBox"
|
data-dojo-props='value:"2008-12-25", disabled:true'>
|
|
<h2>dijit/form/TimeTextBox</h2>
|
<label for="time1">Enabled:</label>
|
<input id="time1" name="time1" type="text" data-dojo-type="dijit/form/TimeTextBox" value="T17:45:00">
|
<label for="time2">Disabled:</label>
|
<input id="time2" name="time2" type="text" data-dojo-type="dijit/form/TimeTextBox" value="T17:45:00"
|
data-dojo-props='disabled:true' disabled>
|
|
<h2>dijit/form/CurrencyTextBox</h2>
|
<label for="currency1">Enabled:</label>
|
<input id="currency1" type="text" name="income1" value="54775.53" data-dojo-type="dijit/form/CurrencyTextBox"
|
data-dojo-props="
|
required:true, constraints:{ fractional:true }, currency:'USD',
|
value:54775.53,
|
invalidMessage:'Invalid amount. Include dollar sign, commas, and cents. Cents are mandatory.'
|
">
|
<label for="currency2">Disabled:</label>
|
<input id="currency2" type="text" name="income1" value="54775.53"
|
data-dojo-type="dijit/form/CurrencyTextBox" data-dojo-props="required:true, constraints:{ fractional:true },
|
currency:'USD', invalidMessage:'Invalid amount. Include dollar sign, commas, and cents. Cents are mandatory.',
|
disabled:true
|
">
|
|
<hr class="spacer">
|
|
<h2>dijit/form/NumberSpinner max=100</h2>
|
<label for="spinner1">Enabled: </label>
|
<input data-dojo-type="dijit/form/NumberSpinner" data-dojo-props='constraints:{max:100,places:0}, value:10'
|
id="spinner1">
|
<label for="spinner2">Disabled: </label>
|
<input data-dojo-type="dijit/form/NumberSpinner"
|
data-dojo-props='constraints:{max:100,places:0}, value:10, disabled:true' id="spinner2">
|
|
</div>
|
|
<div id="selectTab" data-dojo-type="dijit/layout/ContentPane"
|
data-dojo-props="title:'Select Widgets', style:'padding:10px;display:none;'">
|
|
<h2>dijit/form/Select</h2>
|
<!-- fixme: <label for=""> but target a form element like input select etc -->
|
<label>Enabled:</label>
|
|
<div id="selectEnabled" data-dojo-type="dijit/form/Select" data-dojo-props="value:'AK'">
|
<span data-dojo-value="AL"><b>Alabama</b></span>
|
<span data-dojo-value="AK"><span style="color:red">A</span><span style="color:orange">l</span><span
|
style="color:yellow">a</span><span style="color:green">s</span><span style="color:blue">k</span><span
|
style="color:purple">a</span></span>
|
<span data-dojo-value="AZ"><i>Arizona</i></span>
|
<span data-dojo-value="AR"><span class="ark">Arkansas</span></span>
|
<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span
|
style="font-size:75%">l</span><span style="font-size:90%">i</span><span
|
style="font-size:100%">f</span><span style="font-size:125%">o</span><span
|
style="font-size:133%">r</span><span style="font-size:150%">n</span><span
|
style="font-size:175%">i</span><span style="font-size:200%">a</span></span>
|
<span data-dojo-value="NM">New<br> Mexico</span>
|
</div>
|
|
<label>Disabled: </label>
|
|
<div id="selectDisabled" data-dojo-props="value:'AK', disabled:true" data-dojo-type="dijit/form/Select">
|
<span data-dojo-value="AL"><b>Alabama</b></span>
|
<span data-dojo-value="AK"><span style="color:red">A</span><span style="color:orange">l</span><span
|
style="color:yellow">a</span><span style="color:green">s</span><span style="color:blue">k</span><span
|
style="color:purple">a</span></span>
|
<span data-dojo-value="AZ"><i>Arizona</i></span>
|
<span data-dojo-value="AR"><span class="ark">Arkansas</span></span>
|
<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span
|
style="font-size:75%">l</span><span style="font-size:90%">i</span><span
|
style="font-size:100%">f</span><span style="font-size:125%">o</span><span
|
style="font-size:133%">r</span><span style="font-size:150%">n</span><span
|
style="font-size:175%">i</span><span style="font-size:200%">a</span></span>
|
<span data-dojo-value="NM">New<br> Mexico</span>
|
</div>
|
|
<hr class="spacer">
|
|
<h2>dijit/form/FilteringSelect</h2>
|
<label for="filteringSelect">Enabled w/placeHolder: </label>
|
<input id="filteringSelect" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="
|
placeHolder:'place',
|
store:continentStore,
|
searchAttr:'name',
|
name:'state2'
|
">
|
|
<label for="filteringSelect2">Disabled w/placeHolder: </label>
|
<input id="filteringSelect2" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="
|
disabled:true, store:continentStore, name:'state2', searchAttr:'name'
|
">
|
|
<label for="filteringSelect3">Disabled w/value: </label>
|
<input id="filteringSelect3" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="
|
store: continentStore, searchAttr:'name', disabled:true, value:'CA'
|
">
|
|
</div>
|
|
<div id="textareaTab" data-dojo-type="dijit/layout/ContentPane"
|
data-dojo-props='title:"Textarea", style:"padding:10px;"'>
|
|
<!-- ‪ and ‬ are inserted solely for testing purposes to mark the beginning and end of left-to-right text so that
|
cogniscent browsers don't render garbled punctuation nor exhibit strange home/end key behavior while in right-to-left mode -->
|
<h2>dijit/form/Textarea</h2>
|
|
<p>Enabled:</p>
|
<textarea data-dojo-type="dijit/form/Textarea" data-dojo-props='name:"areText"' name="areText">This text area will
|
expand and contract as you type ‪text.‬
|
|
Lorem ipsum dolor sit ‪amet,‬
|
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
|
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
|
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo ‪consequat.‬
|
</textarea>
|
|
<br>
|
|
<p>Disabled:</p>
|
<textarea data-dojo-type="dijit/form/Textarea" data-dojo-props="disabled: true">This text
|
area is disabled and you shouldn't be able to type in ‪it.‬
|
</textarea>
|
|
|
<h2>dijit/form/SimpleTextarea</h2>
|
|
<p></p>
|
|
<p>Enabled:</p>
|
<textarea data-dojo-type="dijit/form/SimpleTextarea">This text area has a constant height and displays a scrollbar
|
when ‪necessary.‬
|
|
Lorem ipsum dolor sit ‪amet,‬
|
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
|
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
|
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
|
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie ‪consequat,‬
|
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
|
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
|
nulla ‪facilisi.‬
|
</textarea>
|
|
<p>Disabled:</p>
|
<textarea data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props="disabled: true">Lorem ipsum dolor sit ‪amet,‬
|
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
|
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
|
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
|
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie ‪consequat,‬
|
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
|
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
|
nulla ‪facilisi.‬
|
</textarea>
|
</div>
|
<!-- end of Textarea tab -->
|
|
<div id="editorTab" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Editor", style:"padding:10px;"'>
|
<p>Enabled:</p>
|
<!-- FIXME:
|
set height on this node to size the whole editor, but causes the tab to not scroll
|
until you select another tab and come back. alternative is no height: here, but that
|
causes editor to become VERY tall, and size to a normal height when selected (like the
|
dijit/form/TextArea in "Form Feel" Tab), but in reverse. refs #3980 and is maybe new bug?
|
-->
|
<div data-dojo-type="dijit/Editor"
|
data-dojo-props="height:175, extraPlugins:['|', 'createLink', 'fontName'], styleSheets:'../themes/claro/document.css'">
|
<ul>
|
<li>Lorem <a href="http://dojotoolkit.org">and a link</a>, what do you think?</li>
|
<li>This is the Editor with a Toolbar attached.</li>
|
</ul>
|
</div>
|
<p>Disabled:</p>
|
|
<div data-dojo-type="dijit/Editor"
|
data-dojo-props="height:175, extraPlugins:['|', 'createLink', 'fontName'], styleSheets:'../themes/claro/document.css', disabled:true">
|
<ul>
|
<li>Lorem <a href="http://dojotoolkit.org">and a link</a>, what do you think?</li>
|
<li>This is the Editor with a Toolbar attached.</li>
|
</ul>
|
</div>
|
</div>
|
<!-- end of Editor tab -->
|
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Sliders', style:'padding:10px;display:none;'">
|
|
<!-- Sliders: -->
|
|
<h2>Enabled</h2>
|
|
<div style="float:right;">
|
<div id='slider2' data-dojo-type="dijit/form/VerticalSlider" data-dojo-props="
|
onChange: function(a){ dom.byId('slider2input').value = a; },
|
value:10, maximum:100, minimum:0, discreetValues:11, style:'height:176px; clear:both'
|
">
|
<ol data-dojo-type="dijit/form/VerticalRuleLabels"
|
data-dojo-props="container:'leftDecoration', style:'width:2em;', labelStyle:'right:0px;'">
|
<li>0
|
<li>100
|
</ol>
|
|
<div data-dojo-type="dijit/form/VerticalRule"
|
data-dojo-props="container:'leftDecoration', style:'width:5px;', count:11"></div>
|
<div data-dojo-type="dijit/form/VerticalRule"
|
data-dojo-props="container:'rightDecoration', style:'width:5px;', count:11"></div>
|
<ol data-dojo-type="dijit/form/VerticalRuleLabels"
|
data-dojo-props="container:'rightDecoration', style:'width:2em;', maximum:100, count:6, numericMargin:1, constraints:{ pattern:'#' }"></ol>
|
</div>
|
<br> Slider2 Value:<input disabled id="slider2input" size="3" value="10" autocomplete="off">
|
</div>
|
|
<div id="horizontal1" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="
|
value:10, maximum:100, minimum:0, showButtons:false, intermediateChanges:true, style:'width:50%; height:20px',
|
onChange: function(a){ dom.byId('slider1input').value = dojo.number.format(a / 100, { places:1, pattern:'#%' }) }
|
">
|
<ol data-dojo-type="dijit/form/HorizontalRuleLabels"
|
data-dojo-props='container:"topDecoration", style:"height:1.2em;font-size:75%;", numericMargin:1, count:6'></ol>
|
<div data-dojo-type="dijit/form/HorizontalRule"
|
data-dojo-props='container:"topDecoration", count:11, style:"height:5px;"'></div>
|
<div data-dojo-type="dijit/form/HorizontalRule"
|
data-dojo-props='container:"bottomDecoration", count:5, style:"height:5px;"'></div>
|
<ol data-dojo-type="dijit/form/HorizontalRuleLabels"
|
data-dojo-props='container:"bottomDecoration", style:"height:1em;font-size:75%;"'>
|
<li>lowest
|
<li>normal
|
<li>highest
|
</ol>
|
</div>
|
<br>Value: <input disabled id="slider1input" size="5" value="10.0%" autocomplete="off">
|
|
<div id="horizontal2" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="
|
minimum:1, value:2, maximum:3, discreteValues:3, showButtons:false, intermediateChanges:true,
|
style:'width:300px; height:40px'
|
">
|
<div data-dojo-type="dijit/form/HorizontalRule"
|
data-dojo-props='container:"bottomDecoration", count:3, style:"height:5px;"'></div>
|
<ol data-dojo-type="dijit/form/HorizontalRuleLabels"
|
data-dojo-props='container:"bottomDecoration", style:"height:1em;font-size:75%;"'>
|
<li><img width=10 height=10 src="../tests/images/note.gif"><br><span style="font-size: small">small</span>
|
<li><img width=15 height=15 src="../tests/images/note.gif"><br><span style="font-size: medium">medium</span>
|
<li><img width=20 height=20 src="../tests/images/note.gif"><br><span style="font-size: large">large</span>
|
</ol>
|
</div>
|
|
<h2 style="clear:both">Disabled</h2>
|
|
<div style="float:right;">
|
<div data-dojo-type="dijit/form/VerticalSlider" data-dojo-props="
|
value:10, maximum:100, minimum:0, discreteValues:11,
|
style:'height:175px; clear:both', disabled:true
|
">
|
<ol data-dojo-type="dijit/form/VerticalRuleLabels"
|
data-dojo-props='container:"leftDecoration", style:"width:2em;", labelStyle:"right:0px;"'>
|
<li>0
|
<li>100
|
</ol>
|
|
<div data-dojo-type="dijit/form/VerticalRule"
|
data-dojo-props='container:"leftDecoration", count:11, style:"width:5px;"'></div>
|
<div data-dojo-type="dijit/form/VerticalRule"
|
data-dojo-props='container:"rightDecoration", count:11, style:"width:5px;"'></div>
|
<ol data-dojo-type="dijit/form/VerticalRuleLabels"
|
data-dojo-props='container:"rightDecoration", style:"width:2em;", maximum:100, count:6, numericMargin:1, constraints:{ pattern:"#"}'></ol>
|
</div>
|
</div>
|
|
<div data-dojo-type="dijit/form/HorizontalSlider" id="hs-1width" data-dojo-props="
|
value:10, maximum:100, minimum:0, showButtons:false, intermediateChanges:true, disabled:true
|
">
|
<ol data-dojo-type="dijit/form/HorizontalRuleLabels"
|
data-dojo-props='container:"topDecoration", style:"height:1.2em;font-size:75%;", numericMargin:1, count:6'></ol>
|
<div data-dojo-type="dijit/form/HorizontalRule"
|
data-dojo-props='container:"topDecoration", count:11, style:"height:5px;"'></div>
|
<div data-dojo-type="dijit/form/HorizontalRule"
|
data-dojo-props='container:"bottomDecoration", count:5, style:"height:5px;"'></div>
|
<ol data-dojo-type="dijit/form/HorizontalRuleLabels"
|
data-dojo-props='container:"bottomDecoration", style:"height:1em;font-size:75%;"'>
|
<li>lowest
|
<li>normal
|
<li>highest
|
</ol>
|
</div>
|
|
<div data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="
|
minimum:1, value:2, maximum:3, discreteValues:3, showButtons:false, intermediateChanges:true,
|
style:'width:300px; height:40px', disabled:true
|
">
|
<div data-dojo-type="dijit/form/HorizontalRule"
|
data-dojo-props='container:"bottomDecoration", count:3, style:"height:5px;"'></div>
|
<ol data-dojo-type="dijit/form/HorizontalRuleLabels"
|
data-dojo-props='container:"bottomDecoration", style:"height:1em;font-size:75%;"'>
|
<li><img width=10 height=10 src="../tests/images/note.gif"><br><span style="font-size: small">small</span>
|
<li><img width=15 height=15 src="../tests/images/note.gif"><br><span style="font-size: medium">medium</span>
|
<li><img width=20 height=20 src="../tests/images/note.gif"><br><span style="font-size: large">large</span>
|
</ol>
|
</div>
|
</div>
|
|
<div id="variousTab" data-dojo-type="dijit/layout/ContentPane"
|
data-dojo-props='title:"Various Dijits", style:"padding:10px; display:none;"'>
|
|
<h2>TitlePane</h2>
|
|
<div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'my pane', width:275">
|
<p>This is a title pane. It can be expanded and collapsed.</p>
|
|
<p>Sed sollicitudin suscipit risus. Nam
|
ullamcorper. Sed nisl lectus, pellentesque nec,
|
malesuada eget, ornare a, libero. Lorem ipsum dolor
|
sit amet, consectetuer adipiscing elit.</p>
|
|
</div>
|
<!-- end title pane -->
|
|
<hr class="spacer">
|
|
<h2>ProgressBar</h2>
|
|
<div data-dojo-props="maximum:200, value:20" id="setTestBar" data-dojo-type="dijit/ProgressBar"></div>
|
|
Indeterminate:
|
<div id="indTestBar" data-dojo-props="indeterminate:true" data-dojo-type="dijit/ProgressBar"></div>
|
|
</div>
|
<!-- end:various dijits upper tab -->
|
|
<div id="InlineEditBoxTab" data-dojo-type="dijit/layout/ContentPane"
|
data-dojo-props='title:"InlineEditBox", style:"padding:10px;"'>
|
|
<h2 class="testTitle">dijit/InlineEditBox + dijit/form/TextBox on <h3></h2>
|
|
(HTML before)
|
<h3 id="editable" style="font-size:larger;" data-dojo-type="dijit/InlineEditBox">
|
Edit me - I trigger the onChange callback
|
</h3>
|
(HTML after)
|
|
<hr class="spacer">
|
|
<h2>dijit/InlineEditBox + dijit/form/Textarea</h2>
|
|
(HTML before)
|
<p id="areaEditable" data-dojo-type="dijit/InlineEditBox"
|
data-dojo-props='editor: "dijit/form/Textarea", autoSave:false'>
|
I'm one big ‪paragraph.‬ Go ahead and edit ‪me.‬ I dare ‪you.‬
|
The quick brown fox jumped over the lazy ‪dog.‬ Blah blah blah blah blah blah ‪blah ...‬
|
</p>
|
(HTML after)
|
|
<p>
|
These links will
|
<a href="#" onclick="registry.byId('areaEditable').set('disabled', true)">disable</a> /
|
<a href="#" onclick="registry.byId('areaEditable').set('disabled', false)">enable</a>
|
the text area above.
|
</p>
|
|
<hr class="spacer">
|
|
<h2>dijit/form/DateTextBox</h2>
|
|
(HTML inline before)
|
<!-- set programmatically to match locale; a server might generate this content also. -->
|
<span id="backgroundArea" data-dojo-type="dijit/InlineEditBox"
|
data-dojo-props="editor: 'dijit/form/DateTextBox', width:'170px'"></span>
|
(HTML after)
|
<hr class="spacer">
|
|
<h2>dijit/form/TimeTextBox</h2>
|
|
(HTML inline before)
|
<!-- set programmatically to match (; a server might generate this content also. -->
|
<span id="timePicker" data-dojo-type="dijit/InlineEditBox"
|
data-dojo-props='editor: "dijit/form/TimeTextBox", width:"150px"'></span>
|
(HTML after)
|
|
<hr class="spacer">
|
|
|
<h2>dijit/form/FilteringSelect + Inline + remote data store</h2>
|
(HTML inline before)
|
<span id="backgroundArea2" data-dojo-type="dijit/InlineEditBox" data-dojo-props='
|
editor: "dijit/form/FilteringSelect",
|
editorParams:{ store: continentStore, autoComplete: true, promptMessage: "Please enter a place"},
|
width:"300px"
|
'>The earth</span>
|
(HTML after)
|
|
</div>
|
<!-- end InlineEditBox tab -->
|
|
<div id="dndTab" data-dojo-type="dijit/layout/ContentPane"
|
data-dojo-props='title:"DnD", style:"padding:10px; display:none;"'>
|
<div style="float:left; margin:5px;">
|
<h3>Vertical Source</h3>
|
|
<div data-dojo-type="dojo/dnd/Source" style="border:3px solid #ccc; padding: 1em 3em; ">
|
<div class="dojoDndItem">Item <strong>X</strong></div>
|
<div class="dojoDndItem">Item <strong>Y</strong></div>
|
<div class="dojoDndItem">Item <strong>Z</strong></div>
|
</div>
|
</div>
|
<div style="float:left; margin:5px; ">
|
<h3>Horizontal</h3>
|
|
<div data-dojo-type="dojo/dnd/Source" data-dojo-props="horizontal: true"
|
style="border:3px solid #ccc; padding: 1em 3em; ">
|
<div class="dojoDndItem">Item <strong>1</strong></div>
|
<div class="dojoDndItem">Item <strong>2</strong></div>
|
<div class="dojoDndItem">Item <strong>3</strong></div>
|
</div>
|
</div>
|
</div>
|
<!-- end DnD tab -->
|
|
<div data-dojo-type="dijit/layout/TabContainer"
|
data-dojo-props="closable:true, title:'Nested TabContainer', nested:true" id="inlined">
|
<div data-dojo-type="dijit/layout/ContentPane" id="tab1href"
|
href='../tests/layout/tab1.html' title="SubTab 1"></div>
|
<div data-dojo-type="dijit/layout/ContentPane" id="tab2href"
|
href='../tests/layout/tab2.html' title="SubTab 2"></div>
|
<div data-dojo-type="dijit/layout/ContentPane" id="subtab3" title="SubTab 3">
|
<h1>I am tab 3, inlined.</h1>
|
</div>
|
<div data-dojo-type="dijit/layout/ContentPane" id="subtab4" title="SubTab 4">
|
<h1>I am tab 4, inlined.</h1>
|
</div>
|
</div>
|
|
<div id="closableTab" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Closable",
|
style:"display:none; padding:10px;", closable:true'>
|
This pane is closable, just for the icon ...
|
</div>
|
</div>
|
<!-- end of region="center" TabContainer -->
|
|
<!-- bottom right tabs -->
|
<div data-dojo-type="dijit/layout/TabContainer" id="bottomTabs"
|
data-dojo-props="
|
tabPosition:'bottom', selectedchild:'btab1', region:'bottom',
|
splitter:true, tabStrip:true
|
">
|
<!-- btab 1 -->
|
<div id="btab1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Info", style:" padding:10px; "'>
|
<p>You can explore this single page after applying a Theme
|
for use in creation of your own theme.</p>
|
|
<p>I am whole slew of Widgets on a page. Jump to <a href="../tests/">dijit tests</a> to
|
test individual components.</p>
|
|
<p>There is a right-click [context] pop-up menu here, as well.</p>
|
</div>
|
<!-- end:info btab1 -->
|
|
<div id="btab2" data-dojo-type="dijit/layout/ContentPane"
|
data-dojo-props='title:"Alternate Themes", style:"padding:20px;"'>
|
<span id="themeData"></span>
|
</div>
|
<!-- btab2 -->
|
|
<div id="btab3" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Bottom 3", closable:true'>
|
<p>I am the last Tab</p>
|
|
<div id="dialog2" data-dojo-type="dijit/Dialog" data-dojo-props='title:"Encased Dialog", style:"display:none;"'>
|
I am the second dialog. I am
|
parented by the Low Tab Pane #3
|
</div>
|
</div>
|
<!-- btab3 -->
|
|
</div>
|
<!-- end Bottom TabContainer -->
|
|
</div>
|
<!-- end of BorderContainer -->
|
|
<!-- dialog in body -->
|
<div id="dialog1" data-dojo-type="dijit/ConfirmDialog" style="display:none;" data-dojo-props="
|
title:'Floating Modal Dialog from href',
|
href:'../tests/layout/getResponse.php?delay=3000&messId=3',
|
style: 'width: 400px;',
|
refreshOnShow:true
|
"></div>
|
<div id="dialogAB" data-dojo-type="dijit/ConfirmDialog" data-dojo-props="title:'Floating Modal Dialog'" style="display:none;">
|
<table>
|
<tr>
|
<td><label for="name">Name: </label></td>
|
<td><input data-dojo-type="dijit/form/TextBox" type="text" name="name" id="name"></td>
|
</tr>
|
<tr>
|
<td><label for="loc">Location: </label></td>
|
<td><input data-dojo-type="dijit/form/TextBox" type="text" name="loc" id="loc"></td>
|
</tr>
|
<tr>
|
<td><label for="date">Date: </label></td>
|
<td><input data-dojo-type="dijit/form/DateTextBox" type="text" name="date" id="date"></td>
|
</tr>
|
</table>
|
</div>
|
|
</body>
|
</html>
|
