+++ /dev/null
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"\r
- "http://www.w3.org/TR/html4/strict.dtd">\r
-<html>\r
-<head>\r
- <title>Dijit Theme Tester</title>\r
-\r
- <style type="text/css">\r
- @import "../../dojo/resources/dojo.css";\r
- @import "../tests/css/dijitTests.css";\r
-\r
- html, body { height: 100%; width: 100%; padding: 0; border: 0; }\r
- #main { height: 100%; width: 100%; padding: 0; border: 0; }\r
-/* #header, #mainSplit { margin: 10px; } */\r
- #leftAccordion { width: 25%; }\r
- #bottomTabs { height: 40%; }\r
- #main .dijitSplitterH { height: 7px }\r
- #main .dijitSplitterV { width: 7px }\r
-\r
- /* pre-loader specific stuff to prevent unsightly flash of unstyled content */\r
- #loader { \r
- padding:0;\r
- margin:0;\r
- position:absolute; \r
- top:0; left:0; \r
- width:100%; height:100%; \r
- background:#ededed; \r
- z-index:999;\r
- vertical-align:center; \r
- }\r
- #loaderInner {\r
- padding:5px;\r
- position:relative; \r
- left:0;\r
- top:0; \r
- width:175px; \r
- background:#3c3; \r
- color:#fff; \r
- \r
- }\r
-\r
- hr.spacer { border:0; background-color:#ededed; width:80%; height:1px; } \r
-\r
- /* for custom menu buttons, do not appear to have any effect */\r
- .myCustomTheme .dijitButtonNode {\r
- border:1px solid #000;\r
- vertical-align: middle;\r
- padding: 0.2em 0.2em;\r
- background: url("themeTesterImages/blackButtonEnabled.gif") repeat-x bottom left #474747;\r
- color: blue;\r
- }\r
- \r
- .myCustomTheme .dijitButtonHover .dijitButtonNode,\r
- .myCustomTheme .dijitToggleButtonHover .dijitButtonNode {\r
- background: url("themeTesterImages/blackButtonHover.gif") repeat-x bottom left #3b3b3b !important;\r
- }\r
- </style>\r
-\r
- <script type="text/javascript">\r
- window.__globalList = {dojo: true, dijit: true, dojox: true, djConfig: true};\r
- for(var i in window){\r
- window.__globalList[i] = true;\r
- }\r
- </script>\r
-\r
- <script type="text/javascript" src="../../dojo/dojo.js" \r
- djConfig="parseOnLoad: false, isDebug: true"></script>\r
- <!--\r
- <script type="text/javascript" src="http://prototypejs.org/assets/2007/10/16/prototype.js"></script>\r
- -->\r
- <script type="text/javascript" src="../dijit.js"></script>\r
- <script type="text/javascript" src="../dijit-all.js" charset="utf-8"></script>\r
-\r
- <script type="text/javascript" src="../tests/_testCommon.js"></script>\r
- <script type="text/javascript"> // dojo.requires()\r
-\r
- dojo.require("dijit.Menu");\r
- dojo.require("dijit._Calendar");\r
- dojo.require("dijit.ColorPalette");\r
- dojo.require("dijit.ProgressBar");\r
- dojo.require("dijit.TitlePane");\r
- dojo.require("dijit.Tooltip");\r
- dojo.require("dijit.Tree");\r
-\r
- // editor:\r
- dojo.require("dijit.Editor"); \r
- \r
- // dnd:\r
- dojo.require("dojo.dnd.Source");\r
-\r
- // various Form elemetns\r
- dojo.require("dijit.form.CheckBox");\r
- dojo.require("dijit.form.Textarea");\r
- dojo.require("dijit.form.FilteringSelect");\r
- dojo.require("dijit.form.TextBox");\r
- dojo.require("dijit.form.DateTextBox"); \r
- dojo.require("dijit.form.TimeTextBox"); \r
- dojo.require("dijit.form.Button");\r
- dojo.require("dijit.InlineEditBox");\r
- dojo.require("dijit.form.NumberSpinner");\r
- dojo.require("dijit.form.Slider"); \r
-\r
- // layouts used in page\r
- dojo.require("dijit.layout.AccordionContainer");\r
- dojo.require("dijit.layout.ContentPane");\r
- dojo.require("dijit.layout.TabContainer");\r
- dojo.require("dijit.layout.BorderContainer");\r
- dojo.require("dijit.Dialog");\r
-\r
- // scan page for widgets and instantiate them\r
- dojo.require("dojo.parser"); \r
-\r
- // humm? \r
- dojo.require("dojo.date.locale");\r
-\r
- // for the Tree\r
- dojo.require("dojo.data.ItemFileReadStore");\r
-\r
- // for the colorpalette\r
- function setColor(color){\r
- var theSpan = dojo.byId("outputSpan");\r
- dojo.style(theSpan,"color",color); \r
- theSpan.innerHTML = color;\r
- }\r
-\r
- // for the calendar\r
- function myHandler(id,newValue){\r
- console.debug("onChange for id = " + id + ", value: " + newValue);\r
- }\r
-\r
- dojo.addOnLoad(function() {\r
-\r
- // this is just a list of 'official' dijit themes, you can use ?theme=String \r
- // for 'un-supported' themes, too. (eg: yours) \r
- var availableThemes = [\r
- { theme:"tundra", author:"Dojo", baseUri:"../themes/" },\r
- { theme:"soria", author:"nikolai", baseUri:"../themes/" },\r
- //{ theme:"noir", author:"owen", baseUri:"../themes/"},\r
- { theme:"nihilo", author:"nikolai", baseUri:"../themes/" }\r
- ];\r
-\r
- var holder = dojo.byId('themeData');\r
- var tmpString='';\r
- dojo.forEach(availableThemes,function(theme){\r
- tmpString += '<a href="?theme='+theme.theme+'">'+theme.theme+'</'+'a> - by: '+theme.author+' <br>';\r
- });\r
- holder.innerHTML = tmpString;\r
-\r
- var start = new Date().getTime();\r
- dojo.parser.parse(dojo.byId('container')); \r
- console.info("Total parse time: " + (new Date().getTime() - start) + "ms");\r
-\r
- dojo.byId('loaderInner').innerHTML += " done.";\r
- setTimeout(function hideLoader(){\r
- var loader = dojo.byId('loader'); \r
- dojo.fadeOut({ node: loader, duration:500,\r
- onEnd: function(){ \r
- loader.style.display = "none"; \r
- }\r
- }).play();\r
- }, 250);\r
-\r
- var strayGlobals = [];\r
- for(var i in window){\r
- if(!window.__globalList[i]){ strayGlobals.push(i); }\r
- }\r
- if(strayGlobals.length){\r
- console.warn("Stray globals: "+strayGlobals.join(", "));\r
- }\r
- });\r
-\r
- /***\r
- dojo.addOnLoad(function(){\r
- // use "before advice" to print log message each time resize is called on a layout widget\r
- var origResize = dijit.layout._LayoutWidget.prototype.resize;\r
- dijit.layout._LayoutWidget.prototype.resize = function(mb){\r
- console.log(this + ": resize({w:"+ mb.w + ", h:" + mb.h + "})");\r
- origResize.apply(this, arguments);\r
- };\r
-\r
- // content pane has no children so just use dojo's builtin after advice\r
- dojo.connect(dijit.layout.ContentPane.prototype, "resize", function(mb){\r
- console.log(this + ": resize({w:"+ mb.w + ", h:" + mb.h + "})");\r
- });\r
- });\r
- ***/\r
- </script>\r
-</head>\r
-<body>\r
- <!-- basic preloader: -->\r
- <div id="loader"><div id="loaderInner">Loading themeTester ... </div></div>\r
-\r
- <!-- data for tree and combobox -->\r
- <div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore"\r
- url="../tests/_data/countries.json"></div>\r
- <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"\r
- url="../tests/_data/states.json"></div>\r
- <!-- contentMenu popup -->\r
- <div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display: none;">\r
- <div dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</div>\r
- <div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div>\r
- <div dojoType="dijit.MenuSeparator"></div>\r
- <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"\r
- onClick="alert('not actually cutting anything, just a test!')">Cut</div>\r
- <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"\r
- onClick="alert('not actually copying anything, just a test!')">Copy</div>\r
- <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"\r
- onClick="alert('not actually pasting anything, just a test!')">Paste</div>\r
- <div dojoType="dijit.MenuSeparator"></div>\r
- <div dojoType="dijit.PopupMenuItem">\r
- <span>Enabled Submenu</span>\r
- <div dojoType="dijit.Menu" id="submenu2">\r
- <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>\r
- <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>\r
- <div dojoType="dijit.PopupMenuItem">\r
- <span>Deeper Submenu</span>\r
- <div dojoType="dijit.Menu" id="submenu4">\r
- <div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</div>\r
- <div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</div>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
- <div dojoType="dijit.PopupMenuItem" disabled="true">\r
- <span>Disabled Submenu</span>\r
- <div dojoType="dijit.Menu" id="submenu3" style="display: none;">\r
- <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>\r
- <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>\r
- </div>\r
- </div>\r
- <div dojoType="dijit.PopupMenuItem">\r
- <span>Different popup</span>\r
- <div dojoType="dijit.ColorPalette"></div>\r
- </div>\r
- <div dojoType="dijit.PopupMenuItem">\r
- <span>Different popup</span>\r
- <div dojoType="dijit._Calendar"></div>\r
- </div>\r
- </div>\r
- <!-- end contextMenu -->\r
-\r
- <!-- "main" BorderContainer just contains page title and another BorderContainer -->\r
- <div id="main" dojoType="dijit.layout.BorderContainer">\r
-\r
- <h1 id="header" dojoType="dijit.layout.ContentPane" region="top">Dijit Theme Test Page</h1>\r
-\r
- <!-- "mainSplit" BorderContainer has all the real content -->\r
- <div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar"\r
- region="center" id="mainSplit">\r
- \r
- <div dojoType="dijit.layout.AccordionContainer" duration="200"\r
- minSize="20" style="width: 300px;" id="leftAccordion" region="leading" splitter="true">\r
-\r
- <div dojoType="dijit.layout.AccordionPane" title="Popups and Alerts"><div style="padding:8px">\r
- <h2>Tooltips:</h2>\r
- <ul>\r
- <li>\r
- <span id="ttRich">rich text tooltip</span>\r
- <span dojoType="dijit.Tooltip" connectId="ttRich" style="display:none;">\r
- Embedded <b>bold</b> <i>RICH</i> text <span style="color:#309; font-size:x-large;">weirdness!</span>\r
- </span>\r
- </li>\r
-\r
- <li><a id="ttOne" href="#bogus">anchor tooltip</a>\r
- <span dojoType="dijit.Tooltip" connectId="ttOne" style="display:none;">tooltip on anchor</span>\r
- </li>\r
-\r
- </ul>\r
-\r
- <hr class="spacer">\r
-\r
- <h2>Dialogs:</h2>\r
- <ul>\r
- <li><a href="#" onclick="dijit.byId('dialog1').show()">show Modal Dialog</a></li>\r
- </ul>\r
-\r
- <div dojoType="dijit.form.DropDownButton">\r
- <span>Show Tooltip Dialog</span>\r
- <div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information"\r
- execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">\r
- <table>\r
- <tr>\r
- <td><label for="user">User:</label></td>\r
- <td><input dojoType=dijit.form.TextBox type="text" id="user" name="user" ></td>\r
- </tr>\r
- <tr>\r
- <td><label for="pwd">Password:</label></td>\r
- <td><input dojoType=dijit.form.TextBox type="password" id="pwd" name="pwd"></td>\r
- </tr>\r
- <tr>\r
- <td colspan="2" align="center">\r
- <button dojoType=dijit.form.Button type="submit" name="submit">Login</button>\r
- </tr>\r
- </table>\r
- </div>\r
- </div> \r
- </div>\r
- </div>\r
-\r
- <div dojoType="dijit.layout.AccordionPane" title="Dojo Tree from Store">\r
- <!-- tree widget -->\r
- <div dojoType="dijit.Tree" store="continentStore" query="{type:'continent'}"\r
- label="Continents">\r
- </div>\r
- </div>\r
- \r
- <div dojoType="dijit.layout.AccordionPane" title="Calendar" selected="true">\r
- <!-- calendar widget pane -->\r
- <input id="calendar1" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])">\r
- </div>\r
- \r
- <div dojoType="dijit.layout.AccordionPane" title="Color Picker">\r
- <!-- color palette picker -->\r
- <h2 class="testHeader">Dijit Color Palette(7x10)</h2>\r
- <div dojoType="dijit.ColorPalette" onChange="setColor(this.value);"></div>\r
- <br>\r
- Test color is: <span id="outputSpan"></span>\r
-\r
- <br><br>\r
- <div dojoType="dijit.ColorPalette" palette="3x4"></div>\r
- </div>\r
-\r
- \r
- \r
- </div><!-- end AccordionContainer -->\r
-\r
- <!-- top tabs (marked as "center" to take up the main part of the BorderContainer) -->\r
- <div dojoType="dijit.layout.TabContainer" region="center" id="topTabs">\r
- <!-- first tab? -->\r
- <div id="tab1" dojoType="dijit.layout.ContentPane" title="Form Feel" style="padding:10px;display:none;">\r
- <h2>Various Form Elements:</h2>\r
-\r
- <form name="dijitFormTest">\r
-\r
- <p><input type="checkBox" dojoType="dijit.form.CheckBox" checked="checked"> Standard Dijit CheckBox\r
- <br><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled"> Disabled Dijit\r
- <br><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled" checked="checked"> Checked and Disabled Dijit\r
- </p>\r
-\r
- <p>\r
- <span>Radio group #1:</span>\r
- <input type="radio" name="g1" id="g1rb1" value="news" dojoType="dijit.form.RadioButton">\r
- <label for="g1rb1">news</label>\r
- <input type="radio" name="g1" id="g1rb2" value="talk" dojoType="dijit.form.RadioButton" checked="checked"/>\r
- <label for="g1rb2">talk</label>\r
- <input type="radio" name="g1" id="g1rb3" value="weather" dojoType="dijit.form.RadioButton" disabled="disabled"/>\r
- <label for="g1rb3">weather (disabled)</label>\r
- </p>\r
-\r
- <p>\r
- <span>Radio group #2: (no default value, and has breaks)</span><br>\r
- <input type="radio" name="g2" id="g2rb1" value="top40" dojoType="dijit.form.RadioButton">\r
- <label for="g2rb1">top 40</label><br>\r
- <input type="radio" name="g2" id="g2rb2" value="oldies" dojoType="dijit.form.RadioButton">\r
- <label for="g2rb2">oldies</label><br>\r
-\r
- <input type="radio" name="g2" id="g2rb3" value="country" dojoType="dijit.form.RadioButton">\r
- <label for="g2rb3">country</label><br>\r
-\r
- <br>\r
- (Note if using keyboard: tab to navigate, and use arrow or space to select)\r
- </p>\r
-\r
- <hr class="spacer">\r
-\r
- <h2>dijit.form.NumberSpinner max=100</h2>\r
- <input dojoType="dijit.form.NumberSpinner" constraints="{max:100,places:0}" id="integertextbox3" value="10">\r
-\r
- <hr class="spacer">\r
-\r
- <h2>dijit.form.Textarea: (sans <i>any</i> styling...)</h2>\r
- <textarea dojoType="dijit.form.Textarea" name="areText">Lorem ipsum dolor sit amet,\r
- consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet\r
- dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci\r
- tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis\r
- autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,\r
- vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio\r
- dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait\r
- nulla facilisi.\r
- </textarea>\r
-\r
- <hr class="spacer">\r
-\r
- <h2>dijit.form.ComboBox</h2>\r
- <label for="datatestComboBox">US State test 2: </label>\r
- <input dojoType="dijit.form.ComboBox"\r
- value="California"\r
- class="medium"\r
- store="stateStore"\r
- searchAttr="name"\r
- style="width: 300px;"\r
- name="state2"\r
- id="datatestComboBox"\r
- >\r
-\r
- </form>\r
-\r
- </div><!-- end first tab -->\r
-\r
- <!-- second upper tab -->\r
- <div id="tab2" dojoType="dijit.layout.ContentPane" title="Various Dijits"\r
- style="padding:10px; display:none;">\r
-\r
- <!-- Sliders: -->\r
- <div style="float:right;">\r
- <div dojoType="dijit.form.VerticalSlider" name="vertical1"\r
- onChange="dojo.byId('slider2input').value=arguments[0];"\r
- value="10"\r
- maximum="100"\r
- minimum="0"\r
- discreteValues="11"\r
- style="height:175px; clear:both"\r
- id="slider2">\r
- <ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration"style="width:2em;color:gray;" labelStyle="right:0px;">\r
- <li>0\r
- <li>100\r
- </ol>\r
-\r
- <div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>\r
- <div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>\r
- <ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration"style="width:2em;color:gray;" maximum="100" count="6" numericMargin="1" constraints="{pattern:'#'}"></ol>\r
- </div>\r
- <br> Slider2 Value:<input readonly id="slider2input" size="3" value="10">\r
- </div>\r
- <h2>Sliders</h2>\r
- <div dojoType="dijit.form.HorizontalSlider" name="horizontal1"\r
- onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});"\r
- value="10"\r
- maximum="100"\r
- minimum="0"\r
- showButtons="false"\r
- intermediateChanges="true"\r
- style="width:50%; height: 20px;"\r
- id="horizontal1">\r
- <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" numericMargin="1" count="6"></ol>\r
- <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:5px;"></div>\r
- <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>\r
- <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">\r
- <li>lowest\r
- <li>normal\r
- <li>highest\r
- </ol>\r
-\r
- </div>\r
- <br>Value: <input readonly id="slider1input" size="5" value="10.0%">\r
-\r
- <div dojoType="dijit.form.HorizontalSlider" name="horizontal2"\r
- minimum="1"\r
- value="2"\r
- maximum="3"\r
- discreteValues="3"\r
- showButtons="false"\r
- intermediateChanges="true"\r
- style="width:300px; height: 40px;"\r
- id="horizontal2">\r
- <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div>\r
- <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration"style="height:1em;font-size:75%;color:gray;">\r
- <li><img width=10 height=10 src="../tests/images/note.gif"><br><span style="font-size: small">small</span>\r
- <li><img width=15 height=15 src="../tests/images/note.gif"><br><span style="font-size: medium">medium</span>\r
-\r
- <li><img width=20 height=20 src="../tests/images/note.gif"><br><span style="font-size: large">large</span>\r
- </ol>\r
- </div>\r
-\r
- <br style="clear:both;">\r
- <hr class="spacer">\r
-\r
- <h2>ProgressBar</h2>\r
- <div style="width:400px; height:20px;" annotate="true" maximum="200" id="setTestBar"\r
- progress="20" dojoType="dijit.ProgressBar"></div>\r
-\r
- Indeterminate:\r
- <div style="width:400px; height:20px" indeterminate="true" dojoType="dijit.ProgressBar"></div>\r
-\r
- <hr class="spacer">\r
-\r
- <h2>TitlePane (nested)</h2>\r
- <div dojoType="dijit.TitlePane" title="Outer pane" width="275">\r
- <p>This is a title pane, containing another title pane ...</p>\r
- <div dojoType="dijit.TitlePane" title="Inner pane" width="125">\r
-\r
- <p>And this is the inner title pane...</p>\r
-\r
- <p>Sed sollicitudin suscipit risus. Nam\r
- ullamcorper. Sed nisl lectus, pellentesque nec,\r
- malesuada eget, ornare a, libero. Lorem ipsum dolor\r
- sit amet, consectetuer adipiscing elit.</p>\r
-\r
- </div><!-- end inner titlepane -->\r
- <p>And this is the closing line for the outer title pane.</p>\r
- </div><!-- end outer title pane -->\r
- <h2>HTML After, check indent</h2>\r
- </div><!-- end:second upper tab -->\r
-\r
- <!-- start third upper tab -->\r
- <div id="tab3" dojoType="dijit.layout.ContentPane" title="Buttons"\r
- style="padding:10px; display:none; ">\r
-\r
- <h2>Simple, drop down & combo buttons</h2>\r
- <p>Buttons can do an action, display a menu, or both:</p>\r
-\r
- <div class="box">\r
- <button dojoType="dijit.form.Button" iconClass="plusIcon" onClick='console.debug("clicked simple")'>\r
- Create\r
- </button>\r
-\r
- <button dojoType="dijit.form.DropDownButton" iconClass="noteIcon">\r
- <span>Edit</span>\r
- <div dojoType="dijit.Menu" id="editMenu" style="display: none;">\r
- <div dojoType="dijit.MenuItem"\r
- iconClass="dijitEditorIcon dijitEditorIconCut"\r
- onClick="console.debug('not actually cutting anything, just a test!')">\r
- Cut\r
- </div>\r
-\r
- <div dojoType="dijit.MenuItem"\r
- iconClass="dijitEditorIcon dijitEditorIconCopy"\r
- onClick="console.debug('not actually copying anything, just a test!')">\r
- Copy\r
- </div>\r
-\r
- <div dojoType="dijit.MenuItem"\r
- iconClass="dijitEditorIcon dijitEditorIconPaste"\r
- onClick="console.debug('not actually pasting anything, just a test!')">\r
- Paste\r
- </div>\r
- </div>\r
- </button>\r
-\r
- <button dojoType="dijit.form.ComboButton" iconClass="noteIcon"\r
- optionsTitle='save options'\r
- onClick='console.debug("clicked combo save")'>\r
- <span>Save</span>\r
- <div dojoType="dijit.Menu" id="saveMenu" style="display: none;">\r
- <div dojoType="dijit.MenuItem"\r
- iconClass="dijitEditorIcon dijitEditorIconSave"\r
- onClick="console.debug('not actually saving anything, just a test!')">\r
- Save\r
- </div>\r
- <div dojoType="dijit.MenuItem"\r
- onClick="console.debug('not actually saving anything, just a test!')">\r
- Save As\r
- </div>\r
- </div>\r
- </button>\r
-\r
- <button dojoType="dijit.form.Button" iconClass="plusIcon" onClick='console.debug("clicked simple")'\r
- disabled='true'>\r
- Disabled\r
- </button>\r
- </div><!-- end:box -->\r
-\r
- <hr class="spacer">\r
-\r
- <h2>Sizing</h2>\r
- <p>Short button, tall buttons, big buttons, small buttons... These buttons\r
- size to their content (just like <button>).</p>\r
-\r
- <div class="box">\r
- <button dojoType="dijit.form.Button" iconClass="flatScreenIcon" onclick='console.debug("big");'>\r
- <span style="font-size:xx-large">big</span>\r
- </button>\r
-\r
- <button id="smallButton1" dojoType="dijit.form.Button" onclick='console.debug("small");'>\r
- <img src="../tests/images/arrowSmall.gif" width="15" height="5">\r
- <span style="font-size:x-small">small</span>\r
- </button>\r
-\r
- <button dojoType="dijit.form.Button" onclick='console.debug("long");'>\r
- <img src="../tests/images/tube.gif" width="150" height="16"> long\r
- </button>\r
-\r
- <button dojoType="dijit.form.Button" onclick='console.debug("tall");' width2height="0.1">\r
- <img src="../tests/images/tubeTall.gif" height="75" width="35"><br>\r
- <span style="font-size:medium">tall</span>\r
- </button>\r
- <div style="clear: both;"></div>\r
- </div><!-- end box -->\r
-\r
- <hr class="spacer">\r
-\r
- <h2>Customized buttons</h2>\r
- <p>Dojo users can mix in their styles. Here's an example:</p>\r
-\r
- <div><!-- custom styled button tests -->\r
- <button dojoType="dijit.form.Button" class="myCustomTheme"\r
- onclick='console.debug("short");'>\r
- <div class="dc">short</div>\r
- </button>\r
-\r
- <button dojoType="dijit.form.Button" class="myCustomTheme"\r
- onclick='console.debug("longer");'>\r
- <div class="dc">bit longer</div>\r
- </button>\r
-\r
- <button dojoType="dijit.form.Button" class="myCustomTheme"\r
- onclick='console.debug("longer yet");'>\r
- <div class="dc">ridiculously long</div>\r
- </button>\r
-\r
- <div style="clear: both;"></div>\r
- </div><!-- end styled buttons -->\r
-\r
- </div><!-- end third upper tab-->\r
-\r
- <!-- fourth upper tab -->\r
- <div id="tab" dojoType="dijit.layout.ContentPane" title="Editable Text" style="padding:10px;" selected="selected">\r
-\r
- <h2>dijit.Editor:</h2>\r
- <!-- FIXME:\r
- set height on this node to size the whole editor, but causes the tab to not scroll\r
- until you select another tab and come back. alternative is no height: here, but that\r
- causes editor to become VERY tall, and size to a normal height when selected (like the\r
- dijit.form.TextArea in "Form Feel" Tab), but in reverse. refs #3980 and is maybe new bug?\r
- -->\r
- <div style="border:1px solid #ededed;">\r
- <textarea height="175" dojoType="dijit.Editor" styleSheets="../../dojo/resources/dojo.css" sytle="width:400px; height:175px; overflow:auto; ">\r
- <ul>\r
- <li>Lorem <a href="http://dojotoolkit.org">and a link</a>, what do you think?</li>\r
- <li>This is the Editor with a Toolbar attached.</li>\r
- </ul>\r
- </textarea>\r
- </div>\r
- <hr class="spacer">\r
-\r
-\r
- <h2 class="testTitle">dijit.InlineEditBox + dijit.form.TextBox on <h3></h2>\r
-\r
- (HTML before)\r
- <h3 id="editable" style="font-size:larger;" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])">\r
- Edit me - I trigger the onChange callback\r
- </h3>\r
- (HTML after)\r
-\r
- <hr class="spacer">\r
-\r
- <h2>dijit.InlineEditBox + dijit.form.Textarea</h2>\r
-\r
- (HTML before)\r
- <p id="areaEditable" dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea" autoSave="false">\r
- I'm one big paragraph. Go ahead and edit me. I dare you.\r
- The quick brown fox jumped over the lazy dog. Blah blah blah blah blah blah blah ...\r
- </p>\r
- (HTML after)\r
-\r
- <p>\r
- These links will\r
- <a href="#" onClick="dijit.byId('areaEditable').setDisabled(true)">disable</a> /\r
- <a href="#" onClick="dijit.byId('areaEditable').setDisabled(false)">enable</a>\r
- the text area above.\r
- </p>\r
-\r
- <hr class="spacer">\r
-\r
- <h2>dijit.form.DateTextBox:</h2>\r
-\r
- (HTML inline before)\r
- <span id="backgroundArea" dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="170px">12/30/2005</span>\r
- (HTML after)\r
-\r
- <hr class="spacer">\r
-\r
- <h2>dijit.form.TimeTextBox:</h2>\r
-\r
- (HTML inline before)\r
- <span id="timePicker" dojoType="dijit.InlineEditBox" editor="dijit.form.TimeTextBox" width="150px">9:00 AM</span>\r
- (HTML after)\r
-\r
- <hr class="spacer">\r
-\r
-\r
- <h2>dijit.form.FilteringSelect + Inline + remote data store:</h2>\r
- (HTML inline before)\r
- <span id="backgroundArea2" dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"\r
- editorParams="{store: stateStore, autoComplete: true, promptMessage: 'Please enter a state'}"\r
- width="300px">\r
- Indiana\r
- </span>\r
- (HTML after)\r
-\r
- </div><!-- end fourth upper tab -->\r
-\r
- <!-- fifth upper tab -->\r
- <div id="tab5" dojoType="dijit.layout.ContentPane" title="DnD"\r
- style="padding:10px; display:none; ">\r
- <div style="float:left; margin:5px; ">\r
- <h3>Source 1</h3>\r
- <div dojoType="dojo.dnd.Source" style="border:3px solid #ccc; padding: 1em 3em; ">\r
- <div class="dojoDndItem">Item <strong>X</strong></div>\r
- <div class="dojoDndItem">Item <strong>Y</strong></div>\r
- <div class="dojoDndItem">Item <strong>Z</strong></div>\r
- </div>\r
- </div>\r
- <div style="float:left; margin:5px; ">\r
- <h3>Source 2</h3>\r
- <div dojoType="dojo.dnd.Source" style="border:3px solid #ccc; padding: 1em 3em; ">\r
- <div class="dojoDndItem">Item <strong>1</strong></div>\r
- <div class="dojoDndItem">Item <strong>2</strong></div>\r
- <div class="dojoDndItem">Item <strong>3</strong></div>\r
- </div>\r
- </div>\r
- </div>\r
-\r
- <!-- sixth upper tab -->\r
- <div id="tab6" dojoType="dijit.layout.ContentPane" title="Closable"\r
- style="display:none; padding:10px; " closable="true">\r
- This pane is closable, just for the icon ...\r
- </div>\r
- </div><!-- end of region="center" TabContainer -->\r
- \r
- <!-- bottom right tabs -->\r
- <div dojoType="dijit.layout.TabContainer" id="bottomTabs" tabPosition="bottom" selectedChild="btab1" region="bottom" splitter="true">\r
-\r
- <!-- btab 1 -->\r
- <div id="btab1" dojoType="dijit.layout.ContentPane" title="Info" style=" padding:10px; ">\r
- <p>You can explore this single page after applying a Theme\r
- for use in creation of your own theme.</p>\r
-\r
- <p>I am whole slew of Widgets on a page. Jump to <a href="../tests/">dijit tests</a> to\r
- test individual components.</p>\r
-\r
- <p>There is a right-click [context] pop-up menu here, as well.</p>\r
- </div><!-- end:info btab1 -->\r
-\r
- <div id="btab2" dojoType="dijit.layout.ContentPane" title="Alternate Themes" style="padding:20px;">\r
- <span id="themeData"></span>\r
- </div><!-- btab2 -->\r
-\r
- <div id="btab3" dojoType="dijit.layout.ContentPane" title="Bottom 3" closable="true">\r
- <p>I am the last Tab</p>\r
- <div id="dialog2" dojoType="dijit.Dialog" title="Encased Dialog" style="display:none;">\r
- I am the second dialog. I am\r
- parented by the Low Tab Pane #3\r
- </div>\r
- </div><!-- btab3 -->\r
-\r
- </div><!-- end Bottom TabContainer -->\r
-\r
- </div> <!-- end of "mainSplit" BorderContainer -->\r
- </div><!-- end of "main" BorderContainer -->\r
-\r
- <!-- dialog in body -->\r
- <div id="dialog1" dojoType="dijit.Dialog" title="Floating Modal Dialog" style="display:none;" href="../tests/layout/doc0.html"></div>\r
-\r
-</body>\r
-</html>\r
projects / eow / blobdiff