New file |
0,0 → 1,744 |
<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> |