You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
972 lines
36 KiB
HTML
972 lines
36 KiB
HTML
<html>
|
|
<head>
|
|
<title>Dijit Theme Tester</title>
|
|
|
|
<!-- required: a default theme -->
|
|
<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/tundra/tundra.css">
|
|
|
|
<style type="text/css">
|
|
@import "../../dojo/resources/dojo.css";
|
|
@import "../tests/css/dijitTests.css";
|
|
|
|
html, body { height: 100%; width: 100%; padding: 0; border: 0; }
|
|
#main { height: 100%; width: 100%; border: 0; }
|
|
#header { margin: 0px; }
|
|
#leftAccordion { width: 25%; }
|
|
#bottomTabs { height: 40%; }
|
|
|
|
/* 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;
|
|
}
|
|
|
|
hr.spacer { border:0; background-color:#ededed; width:80%; height:1px; }
|
|
|
|
/* for custom menu buttons, do not appear to have any effect */
|
|
.myCustomTheme .dijitButtonNode {
|
|
border:1px solid #000;
|
|
vertical-align: middle;
|
|
padding: 0.2em 0.2em;
|
|
background: url("themeTesterImages/blackButtonEnabled.gif") repeat-x bottom left #474747;
|
|
color: blue;
|
|
}
|
|
|
|
.myCustomTheme .dijitButtonHover .dijitButtonNode,
|
|
.myCustomTheme .dijitToggleButtonHover .dijitButtonNode {
|
|
background: url("themeTesterImages/blackButtonHover.gif") repeat-x bottom left #3b3b3b !important;
|
|
}
|
|
</style>
|
|
|
|
<!-- a check for stray globals: not needed! -->
|
|
<script type="text/javascript">
|
|
window.__globalList = {dojo: true, dijit: true, dojox: true, djConfig: true};
|
|
for(var i in window){
|
|
window.__globalList[i] = true;
|
|
}
|
|
</script>
|
|
|
|
<!-- required: dojo.js -->
|
|
<script type="text/javascript" src="../../dojo/dojo.js"
|
|
djConfig="parseOnLoad: false, isDebug: true"></script>
|
|
|
|
<!-- do not use: only for debugging / testing themes -->
|
|
<script type="text/javascript" src="../tests/_testCommon.js"></script>
|
|
<!--
|
|
<script type="text/javascript" src="http://prototypejs.org/assets/2007/10/16/prototype.js"></script>
|
|
-->
|
|
<script type="text/javascript" src="../dijit.js"></script>
|
|
<script type="text/javascript" src="../dijit-all.js" charset="utf-8"></script>
|
|
|
|
|
|
<script type="text/javascript"> // dojo.requires()
|
|
|
|
dojo.require("dijit.Menu");
|
|
dojo.require("dijit._Calendar");
|
|
dojo.require("dijit.ColorPalette");
|
|
dojo.require("dijit.ProgressBar");
|
|
dojo.require("dijit.TitlePane");
|
|
dojo.require("dijit.Tooltip");
|
|
dojo.require("dijit.Tree");
|
|
dojo.require("dijit.MenuBar");
|
|
|
|
// editor:
|
|
dojo.require("dijit.Editor");
|
|
dojo.require("dijit._editor.plugins.FontChoice");
|
|
dojo.require("dijit._editor.plugins.LinkDialog");
|
|
|
|
// dnd:
|
|
dojo.require("dojo.dnd.Source");
|
|
|
|
// various Form elemetns
|
|
dojo.require("dijit.form.CheckBox");
|
|
dojo.require("dijit.form.Textarea");
|
|
dojo.require("dijit.form.SimpleTextarea");
|
|
dojo.require("dijit.form.FilteringSelect");
|
|
dojo.require("dijit.form.TextBox");
|
|
dojo.require("dijit.form.DateTextBox");
|
|
dojo.require("dijit.form.TimeTextBox");
|
|
dojo.require("dijit.form.CurrencyTextBox");
|
|
dojo.require("dijit.form.Button");
|
|
dojo.require("dijit.InlineEditBox");
|
|
dojo.require("dijit.form.NumberSpinner");
|
|
dojo.require("dijit.form.VerticalSlider");
|
|
dojo.require("dijit.form.HorizontalSlider");
|
|
|
|
// layouts used in page
|
|
dojo.require("dijit.layout.AccordionContainer");
|
|
dojo.require("dijit.layout.ContentPane");
|
|
dojo.require("dijit.layout.TabContainer");
|
|
dojo.require("dijit.layout.BorderContainer");
|
|
dojo.require("dijit.Dialog");
|
|
|
|
// scan page for widgets and instantiate them
|
|
dojo.require("dojo.parser");
|
|
|
|
// humm?
|
|
dojo.require("dojo.date.locale");
|
|
|
|
// for the Tree
|
|
dojo.require("dojo.data.ItemFileReadStore");
|
|
|
|
// for the colorpalette
|
|
function setColor(color){
|
|
var theSpan = dojo.byId("outputSpan");
|
|
dojo.style(theSpan,"color",color);
|
|
theSpan.innerHTML = color;
|
|
}
|
|
|
|
// for the calendar
|
|
function myHandler(id,newValue){
|
|
console.debug("onChange for id = " + id + ", value: " + newValue);
|
|
}
|
|
|
|
dojo.addOnLoad(function() {
|
|
|
|
// this is just a list of 'official' dijit themes, you can use ?theme=String
|
|
// for 'un-supported' themes, too. (eg: yours)
|
|
var availableThemes = [
|
|
{ theme:"tundra", author:"Dojo", baseUri:"../themes/" },
|
|
{ theme:"soria", author:"nikolai", baseUri:"../themes/" },
|
|
//{ theme:"noir", author:"owen", baseUri:"../themes/"},
|
|
{ theme:"nihilo", author:"nikolai", baseUri:"../themes/" }
|
|
];
|
|
|
|
var holder = dojo.byId('themeData');
|
|
var tmpString='';
|
|
dojo.forEach(availableThemes,function(theme){
|
|
tmpString += '<a href="?theme='+theme.theme+'">'+theme.theme+'</'+'a> - by: '+theme.author+' <br>';
|
|
});
|
|
holder.innerHTML = tmpString;
|
|
|
|
var start = new Date().getTime();
|
|
dojo.parser.parse(dojo.byId('container'));
|
|
console.info("Total parse time: " + (new Date().getTime() - start) + "ms");
|
|
|
|
dojo.byId('loaderInner').innerHTML += " done.";
|
|
setTimeout(function hideLoader(){
|
|
var loader = dojo.byId('loader');
|
|
dojo.fadeOut({ node: loader, duration:500,
|
|
onEnd: function(){
|
|
loader.style.display = "none";
|
|
}
|
|
}).play();
|
|
}, 250);
|
|
|
|
var strayGlobals = [];
|
|
for(var i in window){
|
|
if(!window.__globalList[i]){ strayGlobals.push(i); }
|
|
}
|
|
if(strayGlobals.length){
|
|
console.warn("Stray globals: "+strayGlobals.join(", "));
|
|
}
|
|
});
|
|
|
|
dojo.addOnLoad(function(){
|
|
dijit.byId("backgroundArea").attr('value', dojo.date.locale.format(new Date(2005, 11, 30), { selector: 'date' }));
|
|
var nineAm = new Date(0);
|
|
nineAm.setHours(9);
|
|
dijit.byId("timePicker").attr('value', dojo.date.locale.format(nineAm, { selector: 'time' }));
|
|
});
|
|
|
|
/***
|
|
dojo.addOnLoad(function(){
|
|
// use "before advice" to print log message each time resize is called on a layout widget
|
|
var origResize = dijit.layout._LayoutWidget.prototype.resize;
|
|
dijit.layout._LayoutWidget.prototype.resize = function(mb){
|
|
console.log(this + ": resize({w:"+ mb.w + ", h:" + mb.h + "})");
|
|
origResize.apply(this, arguments);
|
|
};
|
|
|
|
// content pane has no children so just use dojo's builtin after advice
|
|
dojo.connect(dijit.layout.ContentPane.prototype, "resize", function(mb){
|
|
console.log(this + ": resize({w:"+ mb.w + ", h:" + mb.h + "})");
|
|
});
|
|
});
|
|
***/
|
|
</script>
|
|
</head>
|
|
<body class="tundra">
|
|
<!-- basic preloader: -->
|
|
<div id="loader"><div id="loaderInner">Loading themeTester ... </div></div>
|
|
|
|
<!-- data for tree and combobox -->
|
|
<div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore"
|
|
url="../tests/_data/countries.json"></div>
|
|
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
|
|
url="../tests/_data/states.json"></div>
|
|
<!-- contentMenu popup -->
|
|
<div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display: none;">
|
|
<div dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</div>
|
|
<div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div>
|
|
<div dojoType="dijit.MenuSeparator"></div>
|
|
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
|
|
onClick="alert('not actually cutting anything, just a test!')">Cut</div>
|
|
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
|
|
onClick="alert('not actually copying anything, just a test!')">Copy</div>
|
|
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
|
|
onClick="alert('not actually pasting anything, just a test!')">Paste</div>
|
|
<div dojoType="dijit.MenuSeparator"></div>
|
|
<div dojoType="dijit.PopupMenuItem">
|
|
<span>Enabled Submenu</span>
|
|
<div dojoType="dijit.Menu" id="submenu2">
|
|
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
|
|
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
|
|
<div dojoType="dijit.PopupMenuItem">
|
|
<span>Deeper Submenu</span>
|
|
<div dojoType="dijit.Menu" id="submenu4">
|
|
<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</div>
|
|
<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div dojoType="dijit.PopupMenuItem" disabled="true">
|
|
<span>Disabled Submenu</span>
|
|
<div dojoType="dijit.Menu" id="submenu3" style="display: none;">
|
|
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
|
|
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
|
|
</div>
|
|
</div>
|
|
<div dojoType="dijit.PopupMenuItem">
|
|
<span>Different popup</span>
|
|
<div dojoType="dijit.ColorPalette"></div>
|
|
</div>
|
|
<div dojoType="dijit.PopupMenuItem">
|
|
<span>Different popup</span>
|
|
<div dojoType="dijit._Calendar"></div>
|
|
</div>
|
|
</div>
|
|
<!-- end contextMenu -->
|
|
|
|
<div id="main" dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar">
|
|
|
|
<div id="header" dojoType="dijit.MenuBar" region="top">
|
|
<div dojoType="dijit.PopupMenuBarItem" id="file">
|
|
<span>File</span>
|
|
<div dojoType="dijit.Menu" id="fileMenu">
|
|
<div dojoType="dijit.MenuItem" id="new">New</div>
|
|
<div dojoType="dijit.MenuItem" id="open">Open</div>
|
|
<div dojoType="dijit.MenuSeparator" id="separator"></div>
|
|
<div dojoType="dijit.MenuItem" id="save" iconClass="dijitEditorIconSave">Save</div>
|
|
<div dojoType="dijit.MenuItem" id="saveas">Save As...</div>
|
|
</div>
|
|
</div>
|
|
<div dojoType="dijit.PopupMenuBarItem" id="edit">
|
|
<span>Edit</span>
|
|
<div dojoType="dijit.Menu" id="editMenu">
|
|
<div dojoType="dijit.MenuItem" id="cut" iconClass="dijitEditorIcon dijitEditorIconCut"
|
|
onClick="console.log('not actually cutting anything, just a test!')">Cut</div>
|
|
<div dojoType="dijit.MenuItem" id="copy" iconClass="dijitEditorIcon dijitEditorIconCopy"
|
|
onClick="console.log('not actually copying anything, just a test!')">Copy</div>
|
|
<div dojoType="dijit.MenuItem" id="paste" iconClass="dijitEditorIcon dijitEditorIconPaste"
|
|
onClick="console.log('not actually pasting anything, just a test!')">Paste</div>
|
|
</div>
|
|
</div>
|
|
<div dojoType="dijit.PopupMenuBarItem" id="view">
|
|
<span>View</span>
|
|
<div dojoType="dijit.Menu" id="viewMenu">
|
|
<div dojoType="dijit.MenuItem">Normal</div>
|
|
<div dojoType="dijit.MenuItem">Outline</div>
|
|
<div dojoType="dijit.PopupMenuItem">
|
|
<span>Zoom</span>
|
|
<div dojoType="dijit.Menu" id="zoomMenu">
|
|
<div dojoType="dijit.MenuItem">50%</div>
|
|
<div dojoType="dijit.MenuItem">75%</div>
|
|
<div dojoType="dijit.MenuItem">100%</div>
|
|
<div dojoType="dijit.MenuItem">150%</div>
|
|
<div dojoType="dijit.MenuItem">200%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div dojoType="dijit.PopupMenuBarItem" id="help">
|
|
<span>Help</span>
|
|
<div dojoType="dijit.Menu" id="helpMenu">
|
|
<div dojoType="dijit.MenuItem">Help Topics</div>
|
|
<div dojoType="dijit.MenuItem">About Dijit</div>
|
|
</div>
|
|
</div>
|
|
<div dojoType="dijit.PopupMenuBarItem" disabled="true">
|
|
<span>Disabled</span>
|
|
<div dojoType="dijit.Menu">
|
|
<div dojoType="dijit.MenuItem">You should not see this</div>
|
|
</div>
|
|
</div>
|
|
<div dojoType="dijit.MenuBarItem" onclick="alert('no submenu, just a clickable MenuItem');">
|
|
Click me!
|
|
</div>
|
|
</div>
|
|
|
|
<div dojoType="dijit.layout.AccordionContainer"
|
|
minSize="20" style="width: 300px;" id="leftAccordion" region="leading" splitter="true">
|
|
|
|
<div dojoType="dijit.layout.ContentPane" 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 dojoType="dijit.Tooltip" 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 dojoType="dijit.Tooltip" connectId="ttOne" style="display:none;">tooltip on anchor</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<table style="width: 100%;">
|
|
<tr>
|
|
<td></td>
|
|
<td>
|
|
<div id="ttBelow" href="#bogus">tooltip below</div>
|
|
<div dojoType="dijit.Tooltip" connectId="ttBelow" style="display:none; width: 100px;" position="below" >I'm <i>below</i>!</div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="ttRight" href="#bogus">tooltip after</div>
|
|
<div dojoType="dijit.Tooltip" connectId="ttRight" style="display:none;" position="after" >I'm on the <i>right</i>!<br>(or left on RTL systems)</div>
|
|
</td>
|
|
<td></td>
|
|
<td>
|
|
<div id="ttLeft" href="#bogus">tooltip before</div>
|
|
<div dojoType="dijit.Tooltip" connectId="ttLeft" style="display:none;" position="before,after" >I'm on the <i>left</i>!<br>(or right on RTL systems)</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td>
|
|
<div id="ttAbove" href="#bogus">tooltip above</div>
|
|
<div dojoType="dijit.Tooltip" connectId="ttAbove" style="display:none;" position="above" >I'm <i>above</i>!</div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<hr class="spacer">
|
|
|
|
<h2>Dialogs</h2>
|
|
<ul>
|
|
<li><a href="#" onclick="dijit.byId('dialog1').show()">show Modal Dialog</a></li>
|
|
</ul>
|
|
|
|
<div dojoType="dijit.form.DropDownButton">
|
|
<span>Show Tooltip Dialog</span>
|
|
<div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information"
|
|
execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
|
|
<table>
|
|
<tr>
|
|
<td><label for="user">User:</label></td>
|
|
<td><input dojoType=dijit.form.TextBox type="text" id="user" name="user" ></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="pwd">Password:</label></td>
|
|
<td><input dojoType=dijit.form.TextBox type="password" id="pwd" name="pwd"></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" align="center">
|
|
<button dojoType=dijit.form.Button type="submit" name="submit">Login</button>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div dojoType="dijit.layout.ContentPane" title="Dojo Tree from Store">
|
|
<!-- tree widget -->
|
|
<div dojoType="dijit.Tree" store="continentStore" query="{type:'continent'}"
|
|
label="Continents">
|
|
</div>
|
|
</div>
|
|
|
|
<div dojoType="dijit.layout.ContentPane" title="Calendar" selected="true">
|
|
<!-- calendar widget pane -->
|
|
<input id="calendar1" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])">
|
|
</div>
|
|
|
|
<div dojoType="dijit.layout.ContentPane" 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 dojoType="dijit.ColorPalette" palette="3x4" onChange="setBackground(arguments[0]);"></div>
|
|
<h2 class="testHeader">7x10</h2>
|
|
<div dojoType="dijit.ColorPalette" onChange="setBackground(arguments[0]);"></div>
|
|
</div>
|
|
|
|
|
|
|
|
</div><!-- end AccordionContainer -->
|
|
|
|
<!-- top tabs (marked as "center" to take up the main part of the BorderContainer) -->
|
|
<div dojoType="dijit.layout.TabContainer" region="center" id="topTabs" tabStrip="true">
|
|
|
|
<div id="basicFormTab" dojoType="dijit.layout.ContentPane" 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 dojoType="dijit.form.Button" iconClass="plusIcon" onClick='console.debug("clicked simple")'>
|
|
Simple
|
|
</button>
|
|
|
|
<button dojoType="dijit.form.DropDownButton" iconClass="noteIcon">
|
|
<span>Drop Down</span>
|
|
<div dojoType="dijit.Menu" id="editMenu1" style="display: none;">
|
|
<div dojoType="dijit.MenuItem"
|
|
iconClass="dijitEditorIcon dijitEditorIconCut"
|
|
onClick="console.debug('not actually cutting anything, just a test!')">
|
|
Cut
|
|
</div>
|
|
|
|
<div dojoType="dijit.MenuItem"
|
|
iconClass="dijitEditorIcon dijitEditorIconCopy"
|
|
onClick="console.debug('not actually copying anything, just a test!')">
|
|
Copy
|
|
</div>
|
|
|
|
<div dojoType="dijit.MenuItem"
|
|
iconClass="dijitEditorIcon dijitEditorIconPaste"
|
|
onClick="console.debug('not actually pasting anything, just a test!')">
|
|
Paste
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<button dojoType="dijit.form.ComboButton" iconClass="noteIcon"
|
|
optionsTitle='save options'
|
|
onClick='console.debug("clicked combo save")'>
|
|
<span>Combo</span>
|
|
<div dojoType="dijit.Menu" id="saveMenu1" style="display: none;">
|
|
<div dojoType="dijit.MenuItem"
|
|
iconClass="dijitEditorIcon dijitEditorIconSave"
|
|
onClick="console.debug('not actually saving anything, just a test!')">
|
|
Save
|
|
</div>
|
|
<div dojoType="dijit.MenuItem"
|
|
onClick="console.debug('not actually saving anything, just a test!')">
|
|
Save As
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<button dojoType="dijit.form.ToggleButton" checked onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitCheckBoxIcon">
|
|
Toggle
|
|
</button>
|
|
|
|
<hr class="spacer">
|
|
|
|
Disabled:
|
|
|
|
<button dojoType="dijit.form.Button" iconClass="plusIcon" disabled>
|
|
Simple
|
|
</button>
|
|
|
|
<button dojoType="dijit.form.DropDownButton" iconClass="noteIcon" disabled>
|
|
<span>Drop Down</span>
|
|
<div dojoType="dijit.Menu" id="editMenu2" style="display: none;">
|
|
<div dojoType="dijit.MenuItem"
|
|
iconClass="dijitEditorIcon dijitEditorIconCut"
|
|
onClick="console.debug('not actually cutting anything, just a test!')">
|
|
Cut
|
|
</div>
|
|
|
|
<div dojoType="dijit.MenuItem"
|
|
iconClass="dijitEditorIcon dijitEditorIconCopy"
|
|
onClick="console.debug('not actually copying anything, just a test!')">
|
|
Copy
|
|
</div>
|
|
|
|
<div dojoType="dijit.MenuItem"
|
|
iconClass="dijitEditorIcon dijitEditorIconPaste"
|
|
onClick="console.debug('not actually pasting anything, just a test!')">
|
|
Paste
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<button dojoType="dijit.form.ComboButton" iconClass="noteIcon"
|
|
optionsTitle='save options'
|
|
disabled>
|
|
<span>Combo</span>
|
|
<div dojoType="dijit.Menu" id="saveMenu2" style="display: none;">
|
|
<div dojoType="dijit.MenuItem"
|
|
iconClass="dijitEditorIcon dijitEditorIconSave"
|
|
onClick="console.debug('not actually saving anything, just a test!')">
|
|
Save
|
|
</div>
|
|
<div dojoType="dijit.MenuItem"
|
|
onClick="console.debug('not actually saving anything, just a test!')">
|
|
Save As
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<button dojoType="dijit.form.ToggleButton" checked disabled iconClass="dijitCheckBoxIcon">
|
|
Toggle
|
|
</button>
|
|
|
|
<hr class="spacer">
|
|
|
|
<h2>CheckBox</h2>
|
|
<fieldset>
|
|
<input id="check1" type="checkBox" dojoType="dijit.form.CheckBox">
|
|
<label for="check1">unchecked</label>
|
|
|
|
<input id="check2" type="checkBox" dojoType="dijit.form.CheckBox" checked="checked">
|
|
<label for="check2">checked</label>
|
|
|
|
<input id="check3" type="checkBox" dojoType="dijit.form.CheckBox" disabled>
|
|
<label for="check3">disabled</label>
|
|
|
|
<input id="check4" type="checkBox" dojoType="dijit.form.CheckBox" 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" dojoType="dijit.form.RadioButton">
|
|
<label for="g1rb1">news</label>
|
|
<input type="radio" name="g1" id="g1rb2" value="talk" dojoType="dijit.form.RadioButton" checked>
|
|
<label for="g1rb2">talk</label>
|
|
<input type="radio" name="g1" id="g1rb3" value="weather" dojoType="dijit.form.RadioButton" disabled>
|
|
<label for="g1rb3">weather (disabled)</label>
|
|
</fieldset>
|
|
</div> <!-- end of basic form widgets -->
|
|
|
|
<div id="textboxTab" dojoType="dijit.layout.ContentPane" title="Text Input Widgets" style="padding:10px;display:none;">
|
|
<div style="position:relative;"> <!-- workaround for #7733: IE7 strict DOCTYPE bug when using absolute positioning (eg Spinner) inside a scrollable div -->
|
|
|
|
<h2>dijit.form.DateTextBox</h2>
|
|
<label for="date1">Enabled:</label>
|
|
<input id="date1" name="date1" type="text" dojoType="dijit.form.DateTextBox" value="2008-12-25">
|
|
<label for="date2">Disabled:</label>
|
|
<input id="date2" name="date2" type="text" dojoType="dijit.form.DateTextBox" value="2008-12-25" disabled="disabled">
|
|
|
|
<h2>dijit.form.TimeTextBox</h2>
|
|
<label for="time1">Enabled:</label>
|
|
<input id="time1" name="time1" type="text" dojoType="dijit.form.TimeTextBox" value="T17:45:00">
|
|
<label for="time2">Disabled:</label>
|
|
<input id="time2" name="time2" type="text" dojoType="dijit.form.TimeTextBox" value="T17:45:00" disabled>
|
|
|
|
<h2>dijit.form.CurrencyTextBox</h2>
|
|
<label for="currency1">Enabled:</label>
|
|
<input id="currency1" type="text" name="income1" value="54775.53"
|
|
dojoType="dijit.form.CurrencyTextBox"
|
|
required="true"
|
|
constraints="{fractional:true}"
|
|
currency="USD"
|
|
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"
|
|
dojoType="dijit.form.CurrencyTextBox"
|
|
required="true"
|
|
constraints="{fractional:true}"
|
|
currency="USD"
|
|
invalidMessage="Invalid amount. Include dollar sign, commas, and cents. Cents are mandatory." disabled>
|
|
|
|
<h2>dijit.form.ComboBox</h2>
|
|
<label for="datatestComboBox">Enabled: </label>
|
|
<input dojoType="dijit.form.ComboBox"
|
|
value="California"
|
|
store="stateStore"
|
|
searchAttr="name"
|
|
name="state2"
|
|
id="datatestComboBox"
|
|
>
|
|
<label for="datatestComboBox2">Disabled: </label>
|
|
<input dojoType="dijit.form.ComboBox"
|
|
value="California"
|
|
store="stateStore"
|
|
searchAttr="name"
|
|
name="state2"
|
|
id="datatestComboBox2"
|
|
disabled
|
|
>
|
|
|
|
<hr class="spacer">
|
|
|
|
<h2>dijit.form.NumberSpinner max=100</h2>
|
|
<label for="spinner1">Enabled: </label>
|
|
<input dojoType="dijit.form.NumberSpinner" constraints="{max:100,places:0}" id="spinner1" value="10">
|
|
<label for="spinner">Disabled: </label>
|
|
<input dojoType="dijit.form.NumberSpinner" constraints="{max:100,places:0}" id="spinner2" value="10" disabled>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="textareaTab" dojoType="dijit.layout.ContentPane" title="TextArea/Editor" style="padding:10px;">
|
|
|
|
<h2>dijit.form.Textarea</h2>
|
|
<p>Enabled:</p>
|
|
<textarea dojoType="dijit.form.Textarea" 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 dojoType="dijit.form.Textarea" name="areText2" disabled>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 dojoType="dijit.form.SimpleTextarea" name="areText">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 dojoType="dijit.form.SimpleTextarea" name="areText2" disabled>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>
|
|
|
|
<h2>dijit.Editor</h2>
|
|
<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 style="border:1px solid #ededed;">
|
|
<textarea height="175" dojoType="dijit.Editor" extraPlugins="['|', 'createLink', 'fontName']" styleSheets="../../dojo/resources/dojo.css" style="width:400px; height:175px; overflow:auto; ">
|
|
<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>
|
|
</textarea>
|
|
</div>
|
|
<p>Disabled:</p>
|
|
<div style="border:1px solid #ededed;">
|
|
<textarea height="175" dojoType="dijit.Editor" extraPlugins="['|', 'createLink', 'fontName']" styleSheets="../../dojo/resources/dojo.css"
|
|
style="width:400px; height:175px; overflow:auto; " 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>
|
|
</textarea>
|
|
</div>
|
|
</div><!-- end of Textarea/Editor tab -->
|
|
|
|
|
|
<div dojoType="dijit.layout.ContentPane" title="Sliders" style="padding:10px;display:none;">
|
|
|
|
|
|
<!-- Sliders: -->
|
|
|
|
<h2>Enabled</h2>
|
|
<div style="float:right;">
|
|
<div dojoType="dijit.form.VerticalSlider"
|
|
onChange="dojo.byId('slider2input').value=arguments[0];"
|
|
value="10"
|
|
maximum="100"
|
|
minimum="0"
|
|
discreteValues="11"
|
|
style="height:176px; clear:both;"
|
|
id="slider2">
|
|
<ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration"style="width:2em;" labelStyle="right:0px;">
|
|
<li>0
|
|
<li>100
|
|
</ol>
|
|
|
|
<div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;"></div>
|
|
<div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;"></div>
|
|
<ol dojoType="dijit.form.VerticalRuleLabels" 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 dojoType="dijit.form.HorizontalSlider"
|
|
onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});"
|
|
value="10"
|
|
maximum="100"
|
|
minimum="0"
|
|
showButtons="false"
|
|
intermediateChanges="true"
|
|
style="width:50%; height: 20px;"
|
|
id="horizontal1">
|
|
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;" numericMargin="1" count="6"></ol>
|
|
<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:5px;"></div>
|
|
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
|
|
<ol dojoType="dijit.form.HorizontalRuleLabels" 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 dojoType="dijit.form.HorizontalSlider"
|
|
minimum="1"
|
|
value="2"
|
|
maximum="3"
|
|
discreteValues="3"
|
|
showButtons="false"
|
|
intermediateChanges="true"
|
|
style="width:300px; height: 40px;"
|
|
id="horizontal2">
|
|
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div>
|
|
<ol dojoType="dijit.form.HorizontalRuleLabels" 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 dojoType="dijit.form.VerticalSlider"
|
|
value="10"
|
|
maximum="100"
|
|
minimum="0"
|
|
discreteValues="11"
|
|
style="height:175px; clear:both"
|
|
disabled>
|
|
<ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration"style="width:2em;" labelStyle="right:0px;">
|
|
<li>0
|
|
<li>100
|
|
</ol>
|
|
|
|
<div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;"></div>
|
|
<div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;"></div>
|
|
<ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration"style="width:2em;" maximum="100" count="6" numericMargin="1" constraints="{pattern:'#'}"></ol>
|
|
</div>
|
|
</div>
|
|
<div dojoType="dijit.form.HorizontalSlider"
|
|
value="10"
|
|
maximum="100"
|
|
minimum="0"
|
|
showButtons="false"
|
|
intermediateChanges="true"
|
|
style="width:50%; height: 20px;"
|
|
disabled>
|
|
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;" numericMargin="1" count="6"></ol>
|
|
<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:5px;"></div>
|
|
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
|
|
<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;">
|
|
<li>lowest
|
|
<li>normal
|
|
<li>highest
|
|
</ol>
|
|
|
|
</div>
|
|
|
|
<div dojoType="dijit.form.HorizontalSlider"
|
|
minimum="1"
|
|
value="2"
|
|
maximum="3"
|
|
discreteValues="3"
|
|
showButtons="false"
|
|
intermediateChanges="true"
|
|
style="width:300px; height: 40px;"
|
|
disabled>
|
|
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div>
|
|
<ol dojoType="dijit.form.HorizontalRuleLabels" 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" dojoType="dijit.layout.ContentPane" title="Various Dijits"
|
|
style="padding:10px; display:none;">
|
|
|
|
|
|
<h2>TitlePane</h2>
|
|
<div dojoType="dijit.TitlePane" 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 style="width:400px;" maximum="200" id="setTestBar"
|
|
progress="20" dojoType="dijit.ProgressBar"></div>
|
|
|
|
Indeterminate:
|
|
<div style="width:400px;" indeterminate="true" dojoType="dijit.ProgressBar"></div>
|
|
|
|
</div><!-- end:various dijits upper tab -->
|
|
|
|
<div id="InlineEditBoxTab" dojoType="dijit.layout.ContentPane" title="InlineEditBox"
|
|
style="padding:10px; display:none;">
|
|
|
|
<h2 class="testTitle">dijit.InlineEditBox + dijit.form.TextBox on <h3></h2>
|
|
|
|
(HTML before)
|
|
<h3 id="editable" style="font-size:larger;" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])">
|
|
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" dojoType="dijit.InlineEditBox" 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="dijit.byId('areaEditable').attr('disabled', true)">disable</a> /
|
|
<a href="#" onClick="dijit.byId('areaEditable').attr('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" dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="170px"></span>
|
|
(HTML after)
|
|
<hr class="spacer">
|
|
|
|
<h2>dijit.form.TimeTextBox</h2>
|
|
|
|
(HTML inline before)
|
|
<!-- set programmatically to match locale; a server might generate this content also. -->
|
|
<span id="timePicker" dojoType="dijit.InlineEditBox" 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" dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"
|
|
editorParams="{store: stateStore, autoComplete: true, promptMessage: 'Please enter a state'}"
|
|
width="300px">
|
|
Indiana
|
|
</span>
|
|
(HTML after)
|
|
|
|
</div><!-- end InlineEditBox tab -->
|
|
|
|
<div id="dndTab" dojoType="dijit.layout.ContentPane" title="DnD"
|
|
style="padding:10px; display:none;">
|
|
<div style="float:left; margin:5px;">
|
|
<h3>Source 1</h3>
|
|
<div dojoType="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>Source 2</h3>
|
|
<div dojoType="dojo.dnd.Source" 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 id="closableTab" dojoType="dijit.layout.ContentPane" 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 dojoType="dijit.layout.TabContainer" id="bottomTabs"
|
|
tabPosition="bottom" selectedChild="btab1" region="bottom" splitter="true" tabStrip="true">
|
|
|
|
<!-- btab 1 -->
|
|
<div id="btab1" dojoType="dijit.layout.ContentPane" 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" dojoType="dijit.layout.ContentPane" title="Alternate Themes" style="padding:20px;">
|
|
<span id="themeData"></span>
|
|
</div><!-- btab2 -->
|
|
|
|
<div id="btab3" dojoType="dijit.layout.ContentPane" title="Bottom 3" closable="true">
|
|
<p>I am the last Tab</p>
|
|
<div id="dialog2" dojoType="dijit.Dialog" 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" dojoType="dijit.Dialog"
|
|
title="Floating Modal Dialog" style="display:none;"
|
|
href="../tests/layout/doc0.html"></div>
|
|
|
|
</body>
|
|
</html>
|