git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/themes/themeTester.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"\r
   2         "http://www.w3.org/TR/html4/strict.dtd">\r
   3 <html>\r
   4 <head>\r
   5         <title>Dijit Theme Tester</title>\r
   6 \r
   7         <style type="text/css">\r
   8                 @import "../../dojo/resources/dojo.css";\r
   9                 @import "../tests/css/dijitTests.css";\r
  10 \r
  11                 html, body { height: 100%; width: 100%; padding: 0; border: 0; }\r
  12                 #main { height: 100%; width: 100%; padding: 0; border: 0; }\r
  13 /*              #header, #mainSplit { margin: 10px; } */\r
  14                 #leftAccordion { width: 25%; }\r
  15                 #bottomTabs { height: 40%; }\r
  16                 #main .dijitSplitterH { height: 7px }\r
  17                 #main .dijitSplitterV { width: 7px }\r
  18 \r
  19                 /* pre-loader specific stuff to prevent unsightly flash of unstyled content */\r
  20                 #loader { \r
  21                         padding:0;\r
  22                         margin:0;\r
  23                         position:absolute; \r
  24                         top:0; left:0; \r
  25                         width:100%; height:100%;  \r
  26                         background:#ededed; \r
  27                         z-index:999;\r
  28                         vertical-align:center; \r
  29                 }\r
  30                 #loaderInner {\r
  31                         padding:5px;\r
  32                         position:relative; \r
  33                         left:0;\r
  34                         top:0;          \r
  35                         width:175px; \r
  36                         background:#3c3; \r
  37                         color:#fff;                     \r
  38                         \r
  39                 }\r
  40 \r
  41                 hr.spacer { border:0; background-color:#ededed; width:80%; height:1px; } \r
  42 \r
  43                 /* for custom menu buttons, do not appear to have any effect */\r
  44                 .myCustomTheme .dijitButtonNode {\r
  45                         border:1px solid #000;\r
  46                         vertical-align: middle;\r
  47                         padding: 0.2em 0.2em;\r
  48                         background: url("themeTesterImages/blackButtonEnabled.gif") repeat-x bottom left #474747;\r
  49                         color: blue;\r
  50                 }\r
  51                 \r
  52                 .myCustomTheme .dijitButtonHover .dijitButtonNode,\r
  53                 .myCustomTheme .dijitToggleButtonHover .dijitButtonNode {\r
  54                         background: url("themeTesterImages/blackButtonHover.gif") repeat-x bottom left #3b3b3b !important;\r
  55                 }\r
  56         </style>\r
  57 \r
  58         <script type="text/javascript">\r
  59                 window.__globalList = {dojo: true, dijit: true, dojox: true, djConfig: true};\r
  60                 for(var i in window){\r
  61                         window.__globalList[i] = true;\r
  62                 }\r
  63         </script>\r
  64 \r
  65         <script type="text/javascript" src="../../dojo/dojo.js" \r
  66                 djConfig="parseOnLoad: false, isDebug: true"></script>\r
  67         <!--\r
  68         <script type="text/javascript" src="http://prototypejs.org/assets/2007/10/16/prototype.js"></script>\r
  69         -->\r
  70         <script type="text/javascript" src="../dijit.js"></script>\r
  71         <script type="text/javascript" src="../dijit-all.js" charset="utf-8"></script>\r
  72 \r
  73         <script type="text/javascript" src="../tests/_testCommon.js"></script>\r
  74         <script type="text/javascript"> // dojo.requires()\r
  75 \r
  76                 dojo.require("dijit.Menu");\r
  77                 dojo.require("dijit._Calendar");\r
  78                 dojo.require("dijit.ColorPalette");\r
  79                 dojo.require("dijit.ProgressBar");\r
  80                 dojo.require("dijit.TitlePane");\r
  81                 dojo.require("dijit.Tooltip");\r
  82                 dojo.require("dijit.Tree");\r
  83 \r
  84                 // editor:\r
  85                 dojo.require("dijit.Editor"); \r
  86                 \r
  87                 // dnd:\r
  88                 dojo.require("dojo.dnd.Source");\r
  89 \r
  90                 // various Form elemetns\r
  91                 dojo.require("dijit.form.CheckBox");\r
  92                 dojo.require("dijit.form.Textarea");\r
  93                 dojo.require("dijit.form.FilteringSelect");\r
  94                 dojo.require("dijit.form.TextBox");\r
  95                 dojo.require("dijit.form.DateTextBox"); \r
  96                 dojo.require("dijit.form.TimeTextBox"); \r
  97                 dojo.require("dijit.form.Button");\r
  98                 dojo.require("dijit.InlineEditBox");\r
  99                 dojo.require("dijit.form.NumberSpinner");\r
 100                 dojo.require("dijit.form.Slider"); \r
 101 \r
 102                 // layouts used in page\r
 103                 dojo.require("dijit.layout.AccordionContainer");\r
 104                 dojo.require("dijit.layout.ContentPane");\r
 105                 dojo.require("dijit.layout.TabContainer");\r
 106                 dojo.require("dijit.layout.BorderContainer");\r
 107                 dojo.require("dijit.Dialog");\r
 108 \r
 109                 // scan page for widgets and instantiate them\r
 110                 dojo.require("dojo.parser");    \r
 111 \r
 112                 // humm?                \r
 113                 dojo.require("dojo.date.locale");\r
 114 \r
 115                 // for the Tree\r
 116                 dojo.require("dojo.data.ItemFileReadStore");\r
 117 \r
 118                 // for the colorpalette\r
 119                 function setColor(color){\r
 120                         var theSpan = dojo.byId("outputSpan");\r
 121                         dojo.style(theSpan,"color",color); \r
 122                         theSpan.innerHTML = color;\r
 123                 }\r
 124 \r
 125                 // for the calendar\r
 126                 function myHandler(id,newValue){\r
 127                         console.debug("onChange for id = " + id + ", value: " + newValue);\r
 128                 }\r
 129 \r
 130                 dojo.addOnLoad(function() {\r
 131 \r
 132                         // this is just a list of 'official' dijit themes, you can use ?theme=String \r
 133                         // for 'un-supported' themes, too. (eg: yours) \r
 134                         var availableThemes = [\r
 135                                 { theme:"tundra", author:"Dojo", baseUri:"../themes/" },\r
 136                                 { theme:"soria", author:"nikolai", baseUri:"../themes/" },\r
 137                                 //{ theme:"noir", author:"owen", baseUri:"../themes/"},\r
 138                                 { theme:"nihilo", author:"nikolai", baseUri:"../themes/" }\r
 139                         ];\r
 140 \r
 141                         var holder = dojo.byId('themeData');\r
 142                         var tmpString='';\r
 143                         dojo.forEach(availableThemes,function(theme){\r
 144                                 tmpString += '<a href="?theme='+theme.theme+'">'+theme.theme+'</'+'a> - by: '+theme.author+' <br>';\r
 145                         });\r
 146                         holder.innerHTML = tmpString;\r
 147 \r
 148                         var start = new Date().getTime();\r
 149                         dojo.parser.parse(dojo.byId('container')); \r
 150                         console.info("Total parse time: " + (new Date().getTime() - start) + "ms");\r
 151 \r
 152                         dojo.byId('loaderInner').innerHTML += " done.";\r
 153                         setTimeout(function hideLoader(){\r
 154                                 var loader = dojo.byId('loader'); \r
 155                                 dojo.fadeOut({ node: loader, duration:500,\r
 156                                         onEnd: function(){ \r
 157                                                 loader.style.display = "none"; \r
 158                                         }\r
 159                                 }).play();\r
 160                         }, 250);\r
 161 \r
 162                         var strayGlobals = [];\r
 163                         for(var i in window){\r
 164                                 if(!window.__globalList[i]){ strayGlobals.push(i); }\r
 165                         }\r
 166                         if(strayGlobals.length){\r
 167                                 console.warn("Stray globals: "+strayGlobals.join(", "));\r
 168                         }\r
 169                 });\r
 170 \r
 171                 /***\r
 172                 dojo.addOnLoad(function(){\r
 173                         // use "before advice" to print log message each time resize is called on a layout widget\r
 174                         var origResize = dijit.layout._LayoutWidget.prototype.resize;\r
 175                         dijit.layout._LayoutWidget.prototype.resize = function(mb){\r
 176                                 console.log(this + ": resize({w:"+ mb.w + ", h:" + mb.h + "})");\r
 177                                 origResize.apply(this, arguments);\r
 178                         };\r
 179 \r
 180                         // content pane has no children so just use dojo's builtin after advice\r
 181                         dojo.connect(dijit.layout.ContentPane.prototype, "resize", function(mb){\r
 182                                 console.log(this + ": resize({w:"+ mb.w + ", h:" + mb.h + "})");\r
 183                         });\r
 184                 });\r
 185                 ***/\r
 186         </script>\r
 187 </head>\r
 188 <body>\r
 189         <!-- basic preloader: -->\r
 190         <div id="loader"><div id="loaderInner">Loading themeTester ... </div></div>\r
 191 \r
 192         <!-- data for tree and combobox -->\r
 193         <div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore"\r
 194                 url="../tests/_data/countries.json"></div>\r
 195         <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"\r
 196                 url="../tests/_data/states.json"></div>\r
 197         <!-- contentMenu popup -->\r
 198         <div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display: none;">\r
 199                 <div dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</div>\r
 200                 <div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div>\r
 201                 <div dojoType="dijit.MenuSeparator"></div>\r
 202                 <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"\r
 203                         onClick="alert('not actually cutting anything, just a test!')">Cut</div>\r
 204                 <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"\r
 205                         onClick="alert('not actually copying anything, just a test!')">Copy</div>\r
 206                 <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"\r
 207                         onClick="alert('not actually pasting anything, just a test!')">Paste</div>\r
 208                 <div dojoType="dijit.MenuSeparator"></div>\r
 209                 <div dojoType="dijit.PopupMenuItem">\r
 210                         <span>Enabled Submenu</span>\r
 211                         <div dojoType="dijit.Menu" id="submenu2">\r
 212                                 <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>\r
 213                                 <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>\r
 214                                 <div dojoType="dijit.PopupMenuItem">\r
 215                                         <span>Deeper Submenu</span>\r
 216                                         <div dojoType="dijit.Menu" id="submenu4">\r
 217                                                 <div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</div>\r
 218                                                 <div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</div>\r
 219                                         </div>\r
 220                                 </div>\r
 221                         </div>\r
 222                 </div>\r
 223                 <div dojoType="dijit.PopupMenuItem" disabled="true">\r
 224                         <span>Disabled Submenu</span>\r
 225                         <div dojoType="dijit.Menu" id="submenu3" style="display: none;">\r
 226                                 <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>\r
 227                                 <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>\r
 228                         </div>\r
 229                 </div>\r
 230                 <div dojoType="dijit.PopupMenuItem">\r
 231                         <span>Different popup</span>\r
 232                         <div dojoType="dijit.ColorPalette"></div>\r
 233                 </div>\r
 234                 <div dojoType="dijit.PopupMenuItem">\r
 235                         <span>Different popup</span>\r
 236                         <div dojoType="dijit._Calendar"></div>\r
 237                 </div>\r
 238         </div>\r
 239         <!-- end contextMenu -->\r
 240 \r
 241         <!-- "main" BorderContainer just contains page title and another BorderContainer -->\r
 242         <div id="main" dojoType="dijit.layout.BorderContainer">\r
 243 \r
 244                 <h1 id="header" dojoType="dijit.layout.ContentPane" region="top">Dijit Theme Test Page</h1>\r
 245 \r
 246                 <!-- "mainSplit" BorderContainer has all the real content -->\r
 247                 <div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar"\r
 248                         region="center" id="mainSplit">\r
 249         \r
 250                         <div dojoType="dijit.layout.AccordionContainer" duration="200"\r
 251                                 minSize="20" style="width: 300px;" id="leftAccordion" region="leading" splitter="true">\r
 252 \r
 253                                 <div dojoType="dijit.layout.AccordionPane" title="Popups and Alerts"><div style="padding:8px">\r
 254                                         <h2>Tooltips:</h2>\r
 255                                         <ul>\r
 256                                                 <li>\r
 257                                                 <span id="ttRich">rich text tooltip</span>\r
 258                                                 <span dojoType="dijit.Tooltip" connectId="ttRich" style="display:none;">\r
 259                                                         Embedded <b>bold</b> <i>RICH</i> text <span style="color:#309; font-size:x-large;">weirdness!</span>\r
 260                                                 </span>\r
 261                                                 </li>\r
 262 \r
 263                                                 <li><a id="ttOne" href="#bogus">anchor tooltip</a>\r
 264                                                 <span dojoType="dijit.Tooltip" connectId="ttOne" style="display:none;">tooltip on anchor</span>\r
 265                                                 </li>\r
 266 \r
 267                                         </ul>\r
 268 \r
 269                                         <hr class="spacer">\r
 270 \r
 271                                         <h2>Dialogs:</h2>\r
 272                                         <ul>\r
 273                                                 <li><a href="#" onclick="dijit.byId('dialog1').show()">show Modal Dialog</a></li>\r
 274                                         </ul>\r
 275 \r
 276                                         <div dojoType="dijit.form.DropDownButton">\r
 277                                                 <span>Show Tooltip Dialog</span>\r
 278                                                 <div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information"\r
 279                                                         execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">\r
 280                                                         <table>\r
 281                                                                 <tr>\r
 282                                                                         <td><label for="user">User:</label></td>\r
 283                                                                         <td><input dojoType=dijit.form.TextBox type="text" id="user" name="user" ></td>\r
 284                                                                 </tr>\r
 285                                                                 <tr>\r
 286                                                                         <td><label for="pwd">Password:</label></td>\r
 287                                                                         <td><input dojoType=dijit.form.TextBox type="password" id="pwd" name="pwd"></td>\r
 288                                                                 </tr>\r
 289                                                                 <tr>\r
 290                                                                         <td colspan="2" align="center">\r
 291                                                                                 <button dojoType=dijit.form.Button type="submit" name="submit">Login</button>\r
 292                                                                 </tr>\r
 293                                                         </table>\r
 294                                                 </div>\r
 295                                         </div> \r
 296                                 </div>\r
 297                                 </div>\r
 298 \r
 299                                 <div dojoType="dijit.layout.AccordionPane" title="Dojo Tree from Store">\r
 300                                         <!-- tree widget -->\r
 301                                         <div dojoType="dijit.Tree" store="continentStore" query="{type:'continent'}"\r
 302                                                 label="Continents">\r
 303                                         </div>\r
 304                                 </div>\r
 305         \r
 306                                 <div dojoType="dijit.layout.AccordionPane" title="Calendar" selected="true">\r
 307                                         <!-- calendar widget pane -->\r
 308                                         <input id="calendar1" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])">\r
 309                                 </div>\r
 310         \r
 311                                 <div dojoType="dijit.layout.AccordionPane" title="Color Picker">\r
 312                                         <!-- color palette picker -->\r
 313                                         <h2 class="testHeader">Dijit Color Palette(7x10)</h2>\r
 314                                         <div dojoType="dijit.ColorPalette" onChange="setColor(this.value);"></div>\r
 315                                         <br>\r
 316                                         Test color is: <span id="outputSpan"></span>\r
 317 \r
 318                                         <br><br>\r
 319                                         <div dojoType="dijit.ColorPalette" palette="3x4"></div>\r
 320                                 </div>\r
 321 \r
 322                                 \r
 323         \r
 324                         </div><!-- end AccordionContainer -->\r
 325 \r
 326                         <!-- top tabs (marked as "center" to take up the main part of the BorderContainer) -->\r
 327                         <div dojoType="dijit.layout.TabContainer" region="center" id="topTabs">\r
 328                                 <!-- first tab? -->\r
 329                                 <div id="tab1" dojoType="dijit.layout.ContentPane" title="Form Feel" style="padding:10px;display:none;">\r
 330                                         <h2>Various Form Elements:</h2>\r
 331 \r
 332                                         <form name="dijitFormTest">\r
 333 \r
 334                                         <p><input type="checkBox" dojoType="dijit.form.CheckBox" checked="checked"> Standard Dijit CheckBox\r
 335                                         <br><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled"> Disabled Dijit\r
 336                                         <br><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled" checked="checked"> Checked and Disabled Dijit\r
 337                                         </p>\r
 338 \r
 339                                         <p>\r
 340                                         <span>Radio group #1:</span>\r
 341                                         <input type="radio" name="g1" id="g1rb1" value="news" dojoType="dijit.form.RadioButton">\r
 342                                         <label for="g1rb1">news</label>\r
 343                                         <input type="radio" name="g1" id="g1rb2" value="talk" dojoType="dijit.form.RadioButton" checked="checked"/>\r
 344                                         <label for="g1rb2">talk</label>\r
 345                                         <input type="radio" name="g1" id="g1rb3" value="weather" dojoType="dijit.form.RadioButton" disabled="disabled"/>\r
 346                                         <label for="g1rb3">weather (disabled)</label>\r
 347                                         </p>\r
 348 \r
 349                                         <p>\r
 350                                         <span>Radio group #2: (no default value, and has breaks)</span><br>\r
 351                                         <input type="radio" name="g2" id="g2rb1" value="top40" dojoType="dijit.form.RadioButton">\r
 352                                         <label for="g2rb1">top 40</label><br>\r
 353                                         <input type="radio" name="g2" id="g2rb2" value="oldies" dojoType="dijit.form.RadioButton">\r
 354                                         <label for="g2rb2">oldies</label><br>\r
 355 \r
 356                                         <input type="radio" name="g2" id="g2rb3" value="country" dojoType="dijit.form.RadioButton">\r
 357                                         <label for="g2rb3">country</label><br>\r
 358 \r
 359                                         <br>\r
 360                                         (Note if using keyboard: tab to navigate, and use arrow or space to select)\r
 361                                         </p>\r
 362 \r
 363                                         <hr class="spacer">\r
 364 \r
 365                                         <h2>dijit.form.NumberSpinner max=100</h2>\r
 366                                         <input dojoType="dijit.form.NumberSpinner" constraints="{max:100,places:0}" id="integertextbox3" value="10">\r
 367 \r
 368                                         <hr class="spacer">\r
 369 \r
 370                                         <h2>dijit.form.Textarea: (sans <i>any</i> styling...)</h2>\r
 371                                         <textarea dojoType="dijit.form.Textarea" name="areText">Lorem ipsum dolor sit amet,\r
 372                                         consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet\r
 373                                         dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci\r
 374                                         tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis\r
 375                                         autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,\r
 376                                         vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio\r
 377                                         dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait\r
 378                                         nulla facilisi.\r
 379                                         </textarea>\r
 380 \r
 381                                         <hr class="spacer">\r
 382 \r
 383                                         <h2>dijit.form.ComboBox</h2>\r
 384                                         <label for="datatestComboBox">US State test 2: </label>\r
 385                                         <input dojoType="dijit.form.ComboBox"\r
 386                                                 value="California"\r
 387                                                 class="medium"\r
 388                                                 store="stateStore"\r
 389                                                 searchAttr="name"\r
 390                                                 style="width: 300px;"\r
 391                                                 name="state2"\r
 392                                                 id="datatestComboBox"\r
 393                                         >\r
 394 \r
 395                                         </form>\r
 396 \r
 397                                 </div><!-- end first tab -->\r
 398 \r
 399                                 <!-- second upper tab -->\r
 400                                 <div id="tab2" dojoType="dijit.layout.ContentPane" title="Various Dijits"\r
 401                                         style="padding:10px; display:none;">\r
 402 \r
 403                                         <!-- Sliders: -->\r
 404                                         <div style="float:right;">\r
 405                                         <div dojoType="dijit.form.VerticalSlider" name="vertical1"\r
 406                                                 onChange="dojo.byId('slider2input').value=arguments[0];"\r
 407                                                 value="10"\r
 408                                                 maximum="100"\r
 409                                                 minimum="0"\r
 410                                                 discreteValues="11"\r
 411                                                 style="height:175px; clear:both"\r
 412                                                 id="slider2">\r
 413                                                         <ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration"style="width:2em;color:gray;" labelStyle="right:0px;">\r
 414                                                                 <li>0\r
 415                                                                 <li>100\r
 416                                                         </ol>\r
 417 \r
 418                                                         <div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>\r
 419                                                         <div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>\r
 420                                                         <ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration"style="width:2em;color:gray;" maximum="100" count="6" numericMargin="1" constraints="{pattern:'#'}"></ol>\r
 421                                         </div>\r
 422                                         <br> Slider2 Value:<input readonly id="slider2input" size="3" value="10">\r
 423                                         </div>\r
 424                                                                                         <h2>Sliders</h2>\r
 425                                         <div dojoType="dijit.form.HorizontalSlider" name="horizontal1"\r
 426                                                 onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});"\r
 427                                                 value="10"\r
 428                                                 maximum="100"\r
 429                                                 minimum="0"\r
 430                                                 showButtons="false"\r
 431                                                 intermediateChanges="true"\r
 432                                                 style="width:50%; height: 20px;"\r
 433                                                 id="horizontal1">\r
 434                                                         <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" numericMargin="1" count="6"></ol>\r
 435                                                         <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:5px;"></div>\r
 436                                                         <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>\r
 437                                                         <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">\r
 438                                                                 <li>lowest\r
 439                                                                 <li>normal\r
 440                                                                 <li>highest\r
 441                                                         </ol>\r
 442 \r
 443                                         </div>\r
 444                                         <br>Value: <input readonly id="slider1input" size="5" value="10.0%">\r
 445 \r
 446                                         <div dojoType="dijit.form.HorizontalSlider" name="horizontal2"\r
 447                                                 minimum="1"\r
 448                                                 value="2"\r
 449                                                 maximum="3"\r
 450                                                 discreteValues="3"\r
 451                                                 showButtons="false"\r
 452                                                 intermediateChanges="true"\r
 453                                                 style="width:300px; height: 40px;"\r
 454                                                 id="horizontal2">\r
 455                                                         <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div>\r
 456                                                         <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration"style="height:1em;font-size:75%;color:gray;">\r
 457                                                                 <li><img width=10 height=10 src="../tests/images/note.gif"><br><span style="font-size: small">small</span>\r
 458                                                                 <li><img width=15 height=15 src="../tests/images/note.gif"><br><span style="font-size: medium">medium</span>\r
 459 \r
 460                                                                 <li><img width=20 height=20 src="../tests/images/note.gif"><br><span style="font-size: large">large</span>\r
 461                                                         </ol>\r
 462                                         </div>\r
 463 \r
 464                                         <br style="clear:both;">\r
 465                                         <hr class="spacer">\r
 466 \r
 467                                         <h2>ProgressBar</h2>\r
 468                                         <div style="width:400px; height:20px;" annotate="true" maximum="200" id="setTestBar"\r
 469                                                 progress="20" dojoType="dijit.ProgressBar"></div>\r
 470 \r
 471                                         Indeterminate:\r
 472                                         <div style="width:400px; height:20px" indeterminate="true" dojoType="dijit.ProgressBar"></div>\r
 473 \r
 474                                         <hr class="spacer">\r
 475 \r
 476                                         <h2>TitlePane (nested)</h2>\r
 477                                         <div dojoType="dijit.TitlePane" title="Outer pane" width="275">\r
 478                                                 <p>This is a title pane, containing another title pane ...</p>\r
 479                                                 <div dojoType="dijit.TitlePane" title="Inner pane" width="125">\r
 480 \r
 481                                                         <p>And this is the inner title pane...</p>\r
 482 \r
 483                                                         <p>Sed sollicitudin suscipit risus. Nam\r
 484                                                         ullamcorper. Sed nisl lectus, pellentesque nec,\r
 485                                                         malesuada eget, ornare a, libero. Lorem ipsum dolor\r
 486                                                         sit amet, consectetuer adipiscing elit.</p>\r
 487 \r
 488                                                 </div><!-- end inner titlepane -->\r
 489                                                 <p>And this is the closing line for the outer title pane.</p>\r
 490                                         </div><!-- end outer title pane -->\r
 491                                         <h2>HTML After, check indent</h2>\r
 492                                 </div><!-- end:second upper tab -->\r
 493 \r
 494                                 <!-- start third upper tab -->\r
 495                                 <div id="tab3" dojoType="dijit.layout.ContentPane" title="Buttons"\r
 496                                         style="padding:10px; display:none;  ">\r
 497 \r
 498                                         <h2>Simple, drop down &amp; combo buttons</h2>\r
 499                                         <p>Buttons can do an action, display a menu, or both:</p>\r
 500 \r
 501                                         <div class="box">\r
 502                                                 <button dojoType="dijit.form.Button" iconClass="plusIcon" onClick='console.debug("clicked simple")'>\r
 503                                                         Create\r
 504                                                 </button>\r
 505 \r
 506                                                 <button dojoType="dijit.form.DropDownButton" iconClass="noteIcon">\r
 507                                                         <span>Edit</span>\r
 508                                                         <div dojoType="dijit.Menu" id="editMenu" style="display: none;">\r
 509                                                                 <div dojoType="dijit.MenuItem"\r
 510                                                                         iconClass="dijitEditorIcon dijitEditorIconCut"\r
 511                                                                         onClick="console.debug('not actually cutting anything, just a test!')">\r
 512                                                                         Cut\r
 513                                                                 </div>\r
 514 \r
 515                                                                 <div dojoType="dijit.MenuItem"\r
 516                                                                          iconClass="dijitEditorIcon dijitEditorIconCopy"\r
 517                                                                         onClick="console.debug('not actually copying anything, just a test!')">\r
 518                                                                         Copy\r
 519                                                                 </div>\r
 520 \r
 521                                                                 <div dojoType="dijit.MenuItem"\r
 522                                                                          iconClass="dijitEditorIcon dijitEditorIconPaste"\r
 523                                                                         onClick="console.debug('not actually pasting anything, just a test!')">\r
 524                                                                         Paste\r
 525                                                                 </div>\r
 526                                                         </div>\r
 527                                                 </button>\r
 528 \r
 529                                                 <button dojoType="dijit.form.ComboButton" iconClass="noteIcon"\r
 530                                                         optionsTitle='save options'\r
 531                                                         onClick='console.debug("clicked combo save")'>\r
 532                                                         <span>Save</span>\r
 533                                                         <div dojoType="dijit.Menu" id="saveMenu" style="display: none;">\r
 534                                                                 <div dojoType="dijit.MenuItem"\r
 535                                                                          iconClass="dijitEditorIcon dijitEditorIconSave"\r
 536                                                                         onClick="console.debug('not actually saving anything, just a test!')">\r
 537                                                                         Save\r
 538                                                                 </div>\r
 539                                                                 <div dojoType="dijit.MenuItem"\r
 540                                                                         onClick="console.debug('not actually saving anything, just a test!')">\r
 541                                                                         Save As\r
 542                                                                 </div>\r
 543                                                         </div>\r
 544                                                 </button>\r
 545 \r
 546                                                 <button dojoType="dijit.form.Button" iconClass="plusIcon" onClick='console.debug("clicked simple")'\r
 547                                                         disabled='true'>\r
 548                                                         Disabled\r
 549                                                 </button>\r
 550                                         </div><!-- end:box -->\r
 551 \r
 552                                         <hr class="spacer">\r
 553 \r
 554                                         <h2>Sizing</h2>\r
 555                                         <p>Short button, tall buttons, big buttons, small buttons... These buttons\r
 556                                         size to their content (just like &lt;button&gt;).</p>\r
 557 \r
 558                                         <div class="box">\r
 559                                                 <button dojoType="dijit.form.Button" iconClass="flatScreenIcon" onclick='console.debug("big");'>\r
 560                                                         <span style="font-size:xx-large">big</span>\r
 561                                                 </button>\r
 562 \r
 563                                                 <button id="smallButton1" dojoType="dijit.form.Button" onclick='console.debug("small");'>\r
 564                                                         <img src="../tests/images/arrowSmall.gif" width="15" height="5">\r
 565                                                         <span style="font-size:x-small">small</span>\r
 566                                                 </button>\r
 567 \r
 568                                                 <button dojoType="dijit.form.Button" onclick='console.debug("long");'>\r
 569                                                         <img src="../tests/images/tube.gif" width="150" height="16"> long\r
 570                                                 </button>\r
 571 \r
 572                                                 <button dojoType="dijit.form.Button" onclick='console.debug("tall");' width2height="0.1">\r
 573                                                         <img src="../tests/images/tubeTall.gif" height="75" width="35"><br>\r
 574                                                         <span style="font-size:medium">tall</span>\r
 575                                                 </button>\r
 576                                                 <div style="clear: both;"></div>\r
 577                                         </div><!-- end box -->\r
 578 \r
 579                                         <hr class="spacer">\r
 580 \r
 581                                         <h2>Customized buttons</h2>\r
 582                                         <p>Dojo users can mix in their styles.  Here's an example:</p>\r
 583 \r
 584                                         <div><!-- custom styled button tests -->\r
 585                                                 <button dojoType="dijit.form.Button" class="myCustomTheme"\r
 586                                                         onclick='console.debug("short");'>\r
 587                                                         <div class="dc">short</div>\r
 588                                                 </button>\r
 589 \r
 590                                                 <button dojoType="dijit.form.Button" class="myCustomTheme"\r
 591                                                         onclick='console.debug("longer");'>\r
 592                                                         <div class="dc">bit longer</div>\r
 593                                                 </button>\r
 594 \r
 595                                                 <button dojoType="dijit.form.Button" class="myCustomTheme"\r
 596                                                         onclick='console.debug("longer yet");'>\r
 597                                                         <div class="dc">ridiculously long</div>\r
 598                                                 </button>\r
 599 \r
 600                                                 <div style="clear: both;"></div>\r
 601                                         </div><!-- end styled buttons -->\r
 602 \r
 603                                 </div><!-- end third upper tab-->\r
 604 \r
 605                                 <!-- fourth upper tab -->\r
 606                                 <div id="tab" dojoType="dijit.layout.ContentPane" title="Editable Text" style="padding:10px;" selected="selected">\r
 607 \r
 608                                         <h2>dijit.Editor:</h2>\r
 609                                         <!-- FIXME:\r
 610                                                 set height on this node to size the whole editor, but causes the tab to not scroll\r
 611                                                 until you select another tab and come back. alternative is no height: here, but that\r
 612                                                 causes editor to become VERY tall, and size to a normal height when selected (like the\r
 613                                                 dijit.form.TextArea in "Form Feel" Tab), but in reverse. refs #3980 and is maybe new bug?\r
 614                                         -->\r
 615                                         <div style="border:1px solid #ededed;">\r
 616                                         <textarea height="175" dojoType="dijit.Editor" styleSheets="../../dojo/resources/dojo.css" sytle="width:400px; height:175px; overflow:auto; ">\r
 617                                                 <ul>\r
 618                                                         <li>Lorem <a href="http://dojotoolkit.org">and a link</a>, what do you think?</li>\r
 619                                                         <li>This is the Editor with a Toolbar attached.</li>\r
 620                                                 </ul>\r
 621                                         </textarea>\r
 622                                         </div>\r
 623                                         <hr class="spacer">\r
 624 \r
 625 \r
 626                                         <h2 class="testTitle">dijit.InlineEditBox + dijit.form.TextBox on &lt;h3&gt;</h2>\r
 627 \r
 628                                         (HTML before)\r
 629                                         <h3 id="editable" style="font-size:larger;" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])">\r
 630                                                 Edit me - I trigger the onChange callback\r
 631                                         </h3>\r
 632                                         (HTML after)\r
 633 \r
 634                                         <hr class="spacer">\r
 635 \r
 636                                         <h2>dijit.InlineEditBox + dijit.form.Textarea</h2>\r
 637 \r
 638                                         (HTML before)\r
 639                                         <p id="areaEditable" dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea" autoSave="false">\r
 640                                                 I'm one big paragraph.  Go ahead and edit me.  I dare you.\r
 641                                                 The quick brown fox jumped over the lazy dog.  Blah blah blah blah blah blah blah ...\r
 642                                         </p>\r
 643                                         (HTML after)\r
 644 \r
 645                                         <p>\r
 646                                                 These links will\r
 647                                                 <a href="#" onClick="dijit.byId('areaEditable').setDisabled(true)">disable</a> /\r
 648                                                 <a href="#" onClick="dijit.byId('areaEditable').setDisabled(false)">enable</a>\r
 649                                                 the text area above.\r
 650                                         </p>\r
 651 \r
 652                                         <hr class="spacer">\r
 653 \r
 654                                         <h2>dijit.form.DateTextBox:</h2>\r
 655 \r
 656                                         (HTML inline before)\r
 657                                         <span id="backgroundArea" dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="170px">12/30/2005</span>\r
 658                                         (HTML after)\r
 659 \r
 660                                         <hr class="spacer">\r
 661 \r
 662                                         <h2>dijit.form.TimeTextBox:</h2>\r
 663 \r
 664                                         (HTML inline before)\r
 665                                         <span id="timePicker" dojoType="dijit.InlineEditBox" editor="dijit.form.TimeTextBox" width="150px">9:00 AM</span>\r
 666                                         (HTML after)\r
 667 \r
 668                                         <hr class="spacer">\r
 669 \r
 670 \r
 671                                         <h2>dijit.form.FilteringSelect + Inline + remote data store:</h2>\r
 672                                         (HTML inline before)\r
 673                                         <span id="backgroundArea2" dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"\r
 674                                                 editorParams="{store: stateStore, autoComplete: true, promptMessage: 'Please enter a state'}"\r
 675                                                 width="300px">\r
 676                                                 Indiana\r
 677                                         </span>\r
 678                                         (HTML after)\r
 679 \r
 680                                 </div><!-- end fourth upper tab -->\r
 681 \r
 682                                 <!-- fifth upper tab -->\r
 683                                 <div id="tab5" dojoType="dijit.layout.ContentPane" title="DnD"\r
 684                                         style="padding:10px; display:none;  ">\r
 685                                         <div style="float:left; margin:5px; ">\r
 686                                                 <h3>Source 1</h3>\r
 687                                                 <div dojoType="dojo.dnd.Source" style="border:3px solid #ccc; padding: 1em 3em; ">\r
 688                                                         <div class="dojoDndItem">Item <strong>X</strong></div>\r
 689                                                         <div class="dojoDndItem">Item <strong>Y</strong></div>\r
 690                                                         <div class="dojoDndItem">Item <strong>Z</strong></div>\r
 691                                                 </div>\r
 692                                         </div>\r
 693                                         <div style="float:left; margin:5px; ">\r
 694                                                 <h3>Source 2</h3>\r
 695                                                 <div dojoType="dojo.dnd.Source" style="border:3px solid #ccc; padding: 1em 3em; ">\r
 696                                                         <div class="dojoDndItem">Item <strong>1</strong></div>\r
 697                                                         <div class="dojoDndItem">Item <strong>2</strong></div>\r
 698                                                         <div class="dojoDndItem">Item <strong>3</strong></div>\r
 699                                                 </div>\r
 700                                         </div>\r
 701                                 </div>\r
 702 \r
 703                                 <!-- sixth upper tab -->\r
 704                                 <div id="tab6" dojoType="dijit.layout.ContentPane" title="Closable"\r
 705                                         style="display:none; padding:10px; " closable="true">\r
 706                                         This pane is closable, just for the icon ...\r
 707                                 </div>\r
 708                         </div><!-- end of region="center" TabContainer -->\r
 709         \r
 710                         <!-- bottom right tabs -->\r
 711                         <div dojoType="dijit.layout.TabContainer" id="bottomTabs" tabPosition="bottom" selectedChild="btab1" region="bottom" splitter="true">\r
 712 \r
 713                                 <!-- btab 1 -->\r
 714                                 <div id="btab1" dojoType="dijit.layout.ContentPane" title="Info" style=" padding:10px; ">\r
 715                                         <p>You can explore this single page after applying a Theme\r
 716                                         for use in creation of your own theme.</p>\r
 717 \r
 718                                         <p>I am whole slew of Widgets on a page. Jump to <a href="../tests/">dijit tests</a> to\r
 719                                         test individual components.</p>\r
 720 \r
 721                                         <p>There is a right-click [context] pop-up menu here, as well.</p>\r
 722                                 </div><!-- end:info btab1 -->\r
 723 \r
 724                                 <div id="btab2" dojoType="dijit.layout.ContentPane" title="Alternate Themes" style="padding:20px;">\r
 725                                         <span id="themeData"></span>\r
 726                                 </div><!-- btab2 -->\r
 727 \r
 728                                 <div id="btab3" dojoType="dijit.layout.ContentPane" title="Bottom 3" closable="true">\r
 729                                         <p>I am the last Tab</p>\r
 730                                         <div id="dialog2" dojoType="dijit.Dialog" title="Encased Dialog" style="display:none;">\r
 731                                         I am the second dialog. I am\r
 732                                         parented by the Low Tab Pane #3\r
 733                                         </div>\r
 734                                 </div><!-- btab3 -->\r
 735 \r
 736                         </div><!-- end Bottom TabContainer -->\r
 737 \r
 738                 </div> <!-- end of "mainSplit" BorderContainer -->\r
 739         </div><!-- end of "main" BorderContainer -->\r
 740 \r
 741         <!-- dialog in body -->\r
 742         <div id="dialog1" dojoType="dijit.Dialog" title="Floating Modal Dialog" style="display:none;" href="../tests/layout/doc0.html"></div>\r
 743 \r
 744 </body>\r
 745 </html>\r