themeTester.html
No OneTemporary
Actions

Size

27 KB

Subscribers

None

themeTester.html
View Options

	<html>
	<head>
	<title>Dijit Theme Tester</title>
	<script type="text/javascript" src="../../dojo/dojo.js"
	djConfig="parseOnLoad: false, isDebug: true"></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"></script>
	<script type="text/javascript">
	// 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:"dante", baseUri:"../themes/"}//,
	//{ theme:"noir", author:"owen", baseUri:"../themes/"}
	];
	</script>
	<style type="text/css">
	@import "../../dojo/resources/dojo.css";
	@import "../../dijit/themes/dijit.css";
	@import "../tests/css/dijitTests.css";
	@import "../../dojo/tests/dnd/dndDefault.css";

	html, body { height: 100%; width: 100%; padding: 0; border: 0; }
	#main { height: 100%; width: 100%; padding: 0; border: 0; }
	#header, #mainSplit { margin: 10px; }

	/* 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:center;
	}
	#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; }
	</style>
	<script type="text/javascript" src="../tests/_testCommon.js"></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");

	// editor:
	dojo.require("dijit.Editor");

	// dnd:
	dojo.require("dojo.dnd.Source");

	// various Form elemetns
	dojo.require("dijit.form.CheckBox");
	dojo.require("dijit.form.Textarea");
	dojo.require("dijit.form.FilteringSelect");
	dojo.require("dijit.form.TextBox");
	dojo.require("dijit.form.DateTextBox");
	dojo.require("dijit.form.Button");
	dojo.require("dijit.InlineEditBox");
	dojo.require("dijit.form.NumberSpinner");
	dojo.require("dijit.form.Slider");

	// layouts used in page
	dojo.require("dijit.layout.AccordionContainer");
	dojo.require("dijit.layout.ContentPane");
	dojo.require("dijit.layout.SplitContainer");
	dojo.require("dijit.layout.TabContainer");
	dojo.require("dijit.layout.LayoutContainer");
	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);
	};

	function hideLoader(){
	var loader = dojo.byId('loader');
	dojo.fadeOut({ node: loader, duration:500,
	onEnd: function(){
	loader.style.display = "none";
	}
	}).play();
	}

	dojo.addOnLoad(function() {

	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.log("Total parse time: " + (new Date().getTime() - start) + "ms");

	dojo.byId('loaderInner').innerHTML += " done.";
	setTimeout("hideLoader()",250);

	});

	</script>
	<style type="text/css">
	/* for custom menu buttons, do not appear to have any effect */
	.dc {
	font-size: x-large !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	}

	.Acme *,
	.Acme {
	background: rgb(96,96,96) !important;
	color: white !important;
	padding: 10px !important;
	}

	.Acme:hover *,
	.Acme:hover {
	background-color: rgb(89,94,111) !important;
	color: cyan !important;
	}

	.Acme:active *,
	.Acme:active {
	background-color: white !important;
	color: black !important;
	}
	</style>
	<script>
	/***
	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>
	<!-- 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.LayoutContainer">
	<h1 id="header" dojoType="dijit.layout.ContentPane" layoutAlign=top>Dijit Theme Test Page</h1>

	<!-- overall splitcontainer horizontal -->
	<div dojoType="dijit.layout.SplitContainer" orientation="horizontal" sizerWidth="7"
	layoutAlign=client id="mainSplit">

	<div dojoType="dijit.layout.AccordionContainer" duration="200"
	sizeMin="20" sizeShare="38">

	<div dojoType="dijit.layout.AccordionPane" title="Popups and Alerts"><div style="padding:8px">
	<h2>Tooltips:</h2>
	<ul>
	<li>
	<span id="ttRich">rich text 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>

	<hr class="spacer">

	<h2>Dialogs:</h2>
	<ul>
	<li><a href="javascript: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" name="user" ></td>
	</tr>
	<tr>
	<td><label for="pwd">Password:</label></td>
	<td><input dojoType=dijit.form.TextBox type="password" 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.AccordionPane" title="Dojo Tree from Store">
	<!-- tree widget -->
	<div dojoType="dijit.Tree" store="continentStore" query="{type:'continent'}"
	labelAttr="name" typeAttr="type" label="Continents">
	</div>
	</div>

	<div dojoType="dijit.layout.AccordionPane" title="Calendar" selected="true">
	<!-- calendar widget pane -->
	<input id="calendar1" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])">
	</div>

	<div dojoType="dijit.layout.AccordionPane" title="Color Picker">
	<!-- color palette picker -->
	<h2 class="testHeader">Dijit Color Palette(7x10)</h2>
	<div dojoType="dijit.ColorPalette" onChange="setColor(this.value);"></div>
	<br>
	Test color is: <span id="outputSpan"></span>

	<br><br>
	<div dojoType="dijit.ColorPalette" palette="3x4"></div>
	</div>



	</div><!-- end AccordionContainer -->

	<!-- embedded split container start -->
	<div dojoType="dijit.layout.SplitContainer" orientation="vertical" sizerWidth="7" sizeShare="75" id="verticalSplit">

	<!-- top half, vertical split container -->
	<div dojoType="dijit.layout.TabContainer" sizeShare="40">
	<!-- first tab? -->
	<div id="tab1" dojoType="dijit.layout.ContentPane" title="Form Feel" style="padding:10px;display:none;">
	<h2>Various Form Elements:</h2>

	<form name="dijitFormTest">

	<p><input type="checkBox" dojoType="dijit.form.CheckBox" checked="checked"> Standard Dijit CheckBox
	<br><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled"> Disabled Dijit
	<br><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled" checked="checked"> Checked and Disabled Dijit
	</p>

	<p>
	<span>Radio group #1:</span>
	<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="checked"/>
	<label for="g1rb2">talk</label>
	<input type="radio" name="g1" id="g1rb3" value="weather" dojoType="dijit.form.RadioButton" disabled="disabled"/>
	<label for="g1rb3">weather (disabled)</label>
	</p>

	<p>
	<span>Radio group #2: (no default value, and has breaks)</span><br>
	<input type="radio" name="g2" id="g2rb1" value="top40" dojoType="dijit.form.RadioButton">
	<label for="g2rb1">top 40</label><br>
	<input type="radio" name="g2" id="g2rb2" value="oldies" dojoType="dijit.form.RadioButton">
	<label for="g2rb2">oldies</label><br>

	<input type="radio" name="g2" id="g2rb3" value="country" dojoType="dijit.form.RadioButton">
	<label for="g2rb3">country</label><br>

	<br>
	(Note if using keyboard: tab to navigate, and use arrow or space to select)
	</p>

	<hr class="spacer">

	<h2>dijit.form.NumberSpinner max=100</h2>
	<input dojoType="dijit.form.NumberSpinner" constraints="{max:100,places:0}" id="integertextbox3" value="10">

	<hr class="spacer">

	<h2>dijit.form.Textarea: (sans <i>any</i> styling...)</h2>
	<textarea dojoType="dijit.form.Textarea" name="areText">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>

	<hr class="spacer">

	<h2>dijit.form.ComboBox</h2>
	<label for="datatest">US State test 2: </label>
	<input dojoType="dijit.form.ComboBox"
	value="California"
	class="medium"
	store="stateStore"
	searchAttr="name"
	style="width: 300px;"
	name="state2"
	id="datatestComboBox"
	>

	</form>

	</div><!-- end first tab -->

	<!-- second upper tab -->
	<div id="tab2" dojoType="dijit.layout.ContentPane" title="Various Dijits"
	style="padding:10px; display:none;">

	<!-- Sliders: -->
	<div style="float:right;">
	<div dojoType="dijit.form.VerticalSlider" name="vertical1"
	onChange="dojo.byId('slider2input').value=arguments[0];"
	value="10"
	maximum="100"
	minimum="0"
	discreteValues="11"
	style="height:175px; clear:both"
	id="slider2">
	<ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration"style="width:2em;color:gray;" labelStyle="right:0px;">
	<li>0
	<li>100
	</ol>

	<div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
	<div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
	<ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration"style="width:2em;color:gray;" maximum="100" count="6" numericMargin="1" constraints="{pattern:'#'}"></ol>
	</div>
	<br> Slider2 Value:<input readonly id="slider2input" size="3" value="10">
	</div>
	<h2>Sliders</h2>
	<div dojoType="dijit.form.HorizontalSlider" name="horizontal1"
	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%;color:gray;" 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%;color:gray;">
	<li>lowest
	<li>normal
	<li>highest
	</ol>

	</div>
	<br>Value: <input readonly id="slider1input" size="5" value="10.0%">

	<div dojoType="dijit.form.HorizontalSlider" name="horizontal2"
	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%;color:gray;">
	<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>

	<br style="clear:both;">
	<hr class="spacer">

	<h2>ProgressBar</h2>
	<div style="width:400px" annotate="true" maximum="200" id="setTestBar"
	progress="20" dojoType="dijit.ProgressBar"></div>

	Indeterminate:
	<div style="width:400px" indeterminate="true" dojoType="dijit.ProgressBar"></div>

	<hr class="spacer">

	<h2>TitlePane (nested)</h2>
	<div dojoType="dijit.TitlePane" title="Outer pane" width="275">
	<p>This is a title pane, containing another title pane ...</p>
	<div dojoType="dijit.TitlePane" title="Inner pane" width="125">

	<p>And this is the inner title pane...</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 inner titlepane -->
	<p>And this is the closing line for the outer title pane.</p>
	</div><!-- end outer title pane -->
	<h2>HTML After, check indent</h2>
	</div><!-- end:second upper tab -->

	<!-- start third upper tab -->
	<div id="tab3" dojoType="dijit.layout.ContentPane" title="Buttons"
	style="padding:10px; display:none; ">

	<h2>Simple, drop down & combo buttons</h2>
	<p>Buttons can do an action, display a menu, or both:</p>

	<div class="box">
	<button dojoType="dijit.form.Button" iconClass="plusIcon" onClick='console.debug("clicked simple")'>
	Create
	</button>

	<button dojoType="dijit.form.DropDownButton" iconClass="noteIcon">
	<span>Edit</span>
	<div dojoType="dijit.Menu" id="editMenu" 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>Save</span>
	<div dojoType="dijit.Menu" id="saveMenu" 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.Button" iconClass="plusIcon" onClick='console.debug("clicked simple")'
	disabled='true'>
	Disabled
	</button>
	</div><!-- end:box -->

	<hr class="spacer">

	<h2>Sizing</h2>
	<p>Short button, tall buttons, big buttons, small buttons... These buttons
	size to their content (just like <button>).</p>

	<div class="box">
	<button dojoType="dijit.form.Button" iconClass="flatScreenIcon" onclick='console.debug("big");'>
	<span style="font-size:xx-large">big</span>
	</button>

	<button id="smallButton1" dojoType="dijit.form.Button" onclick='console.debug("small");'>
	<img src="../tests/images/arrowSmall.gif" width="15" height="5">
	<span style="font-size:x-small">small</span>
	</button>

	<button dojoType="dijit.form.Button" onclick='console.debug("long");'>
	<img src="../tests/images/tube.gif" width="150" height="16"> long
	</button>

	<button dojoType="dijit.form.Button" onclick='console.debug("tall");' width2height="0.1">
	<img src="../tests/images/tubeTall.gif" height="75" width="35"><br>
	<span style="font-size:medium">tall</span>
	</button>
	<div style="clear: both;"></div>
	</div><!-- end box -->

	<hr class="spacer">

	<h2>Customized buttons</h2>
	<p>Dojo users can mix in their styles. Here's an example:</p>

	<div class="box"><!-- custom styled button tests -->
	<button dojoType="dijit.form.Button" class="Acme"
	onclick='console.debug("short");'>
	<div class="dc">short</div>
	</button>

	<button dojoType="dijit.form.Button" class="Acme"
	onclick='console.debug("longer");'>
	<div class="dc">bit longer</div>
	</button>

	<button dojoType="dijit.form.Button" class="Acme"
	onclick='console.debug("longer yet");'>
	<div class="dc">ridiculously long</div>
	</button>

	<div style="clear: both;"></div>
	</div><!-- end styled buttons -->

	</div><!-- end third upper tab-->

	<!-- fourth upper tab -->
	<div id="tab32" dojoType="dijit.layout.ContentPane" title="Editable Text" style="padding:10px;" selected="selected">

	<h2>dijit.Editor:</h2>
	<!-- 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" styleSheets="../../dojo/resources/dojo.css" sytle="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>
	<hr class="spacer">


	<h2 class="testTitle">dijit.InlineEditBox + dijit.form.TextBox</h2>

	This is an editable header,
	<h3 id="editable" style="font-size:larger;" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])">
	Edit me - I trigger the onChange callback
	</h3>
	And keep the text around me static.

	<hr class="spacer">

	<h2>dijit.InlineEditBox + dijit.form.Textarea</h2>

	(HTML before)
	<p id="areaEditable" dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea">
	I'm one big paragraph. Go ahead and <i>edit</i> me. <b>I dare you.</b>
	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').setDisabled(true)">disable</a> /
	<a href="#" onClick="dijit.byId('areaEditable').setDisabled(false)">enable</a>
	the text area above.
	</p>

	<hr class="spacer">

	<h2>dijit.form.DateTextBox:</h2>

	(HTML inline before)
	<span id="backgroundArea" dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="170px">12/30/2005</span>
	(HTML after)

	<hr class="spacer">

	<h2>dijit.form.TimeTextBox:</h2>

	(HTML inline before)
	<span id="timePicker" dojoType="dijit.InlineEditBox" editor="dijit.form.TimeTextBox" width="150px">9:00 AM</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 fourth upper tab -->

	<!-- fourth upper tab -->
	<div id="tab4" 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" class="container">
	<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" class="container">
	<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>

	<!-- fifth upper tab -->
	<div id="tab5" dojoType="dijit.layout.ContentPane" title="Closable"
	style="display:none; padding:10px; " closable="true">
	This pane is closable, just for the icon ...
	</div>
	</div><!-- end top part vertical split container -->

	<!-- bottom half, vertical split container -->
	<div dojoType="dijit.layout.TabContainer" tabPosition="bottom" selectedChild="btab1">

	<!-- 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="btab21" dojoType="dijit.layout.ContentPane" title="Alternate Themes" style="padding:20px;">
	<span id="themeData"></span>
	</div><!-- btab21 -->

	<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 embedded vertical split container -->

	</div><!-- splitContainer parent -->
	</div><!-- Layoutcontainer -->

	<!-- dialog in body -->
	<div id="dialog1" dojoType="dijit.Dialog" title="Floating Modal Dialog" style="display:none;" href="../tests/layout/doc0.html"></div>

	</body>
	</html>

File Metadata

Mime Type: text/html
Expires: Sat, Feb 22, 20:24 (1 d, 11 h ago)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 22966
Default Alt Text: themeTester.html (27 KB)

themeTester.htmlNo OneTemporaryActions

themeTester.htmlView Options

File Metadata

Event Timeline

themeTester.html
No OneTemporary
Actions

themeTester.html
View Options