diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-14 15:39:19 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-14 15:39:19 +0000 |
| commit | 1c5685d68f1b73270fb814fe04cbb490eb90ba5f (patch) | |
| tree | 3d3ada08a934b96fc31531f1327690d7edc6f766 /includes/js/dijit/themes/themeTester.html | |
| parent | 104d59099e048688c4dbac37d72137006e396558 (diff) | |
| download | semanticscuttle-1c5685d68f1b73270fb814fe04cbb490eb90ba5f.tar.gz semanticscuttle-1c5685d68f1b73270fb814fe04cbb490eb90ba5f.tar.bz2 | |
Minor fix: Remove DOJO library (60Mo) replaced by link to Google CDN (online DOJO library)
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@159 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dijit/themes/themeTester.html')
| -rw-r--r-- | includes/js/dijit/themes/themeTester.html | 745 |
1 files changed, 0 insertions, 745 deletions
diff --git a/includes/js/dijit/themes/themeTester.html b/includes/js/dijit/themes/themeTester.html deleted file mode 100644 index 99fa625..0000000 --- a/includes/js/dijit/themes/themeTester.html +++ /dev/null @@ -1,745 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-<head>
- <title>Dijit Theme Tester</title>
-
- <style type="text/css">
- @import "../../dojo/resources/dojo.css";
- @import "../tests/css/dijitTests.css";
-
- html, body { height: 100%; width: 100%; padding: 0; border: 0; }
- #main { height: 100%; width: 100%; padding: 0; border: 0; }
-/* #header, #mainSplit { margin: 10px; } */
- #leftAccordion { width: 25%; }
- #bottomTabs { height: 40%; }
- #main .dijitSplitterH { height: 7px }
- #main .dijitSplitterV { width: 7px }
-
- /* 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; }
-
- /* for custom menu buttons, do not appear to have any effect */
- .myCustomTheme .dijitButtonNode {
- border:1px solid #000;
- vertical-align: middle;
- padding: 0.2em 0.2em;
- background: url("themeTesterImages/blackButtonEnabled.gif") repeat-x bottom left #474747;
- color: blue;
- }
-
- .myCustomTheme .dijitButtonHover .dijitButtonNode,
- .myCustomTheme .dijitToggleButtonHover .dijitButtonNode {
- background: url("themeTesterImages/blackButtonHover.gif") repeat-x bottom left #3b3b3b !important;
- }
- </style>
-
- <script type="text/javascript">
- window.__globalList = {dojo: true, dijit: true, dojox: true, djConfig: true};
- for(var i in window){
- window.__globalList[i] = true;
- }
- </script>
-
- <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" charset="utf-8"></script>
-
- <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.TimeTextBox");
- 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.TabContainer");
- dojo.require("dijit.layout.BorderContainer");
- dojo.require("dijit.Dialog");
-
- // scan page for widgets and instantiate them
- dojo.require("dojo.parser");
-
- // humm?
- dojo.require("dojo.date.locale");
-
- // for the Tree
- dojo.require("dojo.data.ItemFileReadStore");
-
- // for the colorpalette
- function setColor(color){
- var theSpan = dojo.byId("outputSpan");
- dojo.style(theSpan,"color",color);
- theSpan.innerHTML = color;
- }
-
- // for the calendar
- function myHandler(id,newValue){
- console.debug("onChange for id = " + id + ", value: " + newValue);
- }
-
- dojo.addOnLoad(function() {
-
- // this is just a list of 'official' dijit themes, you can use ?theme=String
- // for 'un-supported' themes, too. (eg: yours)
- var availableThemes = [
- { theme:"tundra", author:"Dojo", baseUri:"../themes/" },
- { theme:"soria", author:"nikolai", baseUri:"../themes/" },
- //{ theme:"noir", author:"owen", baseUri:"../themes/"},
- { theme:"nihilo", author:"nikolai", baseUri:"../themes/" }
- ];
-
- var holder = dojo.byId('themeData');
- var tmpString='';
- dojo.forEach(availableThemes,function(theme){
- tmpString += '<a href="?theme='+theme.theme+'">'+theme.theme+'</'+'a> - by: '+theme.author+' <br>';
- });
- holder.innerHTML = tmpString;
-
- var start = new Date().getTime();
- dojo.parser.parse(dojo.byId('container'));
- console.info("Total parse time: " + (new Date().getTime() - start) + "ms");
-
- dojo.byId('loaderInner').innerHTML += " done.";
- setTimeout(function hideLoader(){
- var loader = dojo.byId('loader');
- dojo.fadeOut({ node: loader, duration:500,
- onEnd: function(){
- loader.style.display = "none";
- }
- }).play();
- }, 250);
-
- var strayGlobals = [];
- for(var i in window){
- if(!window.__globalList[i]){ strayGlobals.push(i); }
- }
- if(strayGlobals.length){
- console.warn("Stray globals: "+strayGlobals.join(", "));
- }
- });
-
- /***
- dojo.addOnLoad(function(){
- // 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 -->
-
- <!-- "main" BorderContainer just contains page title and another BorderContainer -->
- <div id="main" dojoType="dijit.layout.BorderContainer">
-
- <h1 id="header" dojoType="dijit.layout.ContentPane" region="top">Dijit Theme Test Page</h1>
-
- <!-- "mainSplit" BorderContainer has all the real content -->
- <div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar"
- region="center" id="mainSplit">
-
- <div dojoType="dijit.layout.AccordionContainer" duration="200"
- minSize="20" style="width: 300px;" id="leftAccordion" region="leading" splitter="true">
-
- <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="#" onclick="dijit.byId('dialog1').show()">show Modal Dialog</a></li>
- </ul>
-
- <div dojoType="dijit.form.DropDownButton">
- <span>Show Tooltip Dialog</span>
- <div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information"
- execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
- <table>
- <tr>
- <td><label for="user">User:</label></td>
- <td><input dojoType=dijit.form.TextBox type="text" id="user" name="user" ></td>
- </tr>
- <tr>
- <td><label for="pwd">Password:</label></td>
- <td><input dojoType=dijit.form.TextBox type="password" id="pwd" name="pwd"></td>
- </tr>
- <tr>
- <td colspan="2" align="center">
- <button dojoType=dijit.form.Button type="submit" name="submit">Login</button>
- </tr>
- </table>
- </div>
- </div>
- </div>
- </div>
-
- <div dojoType="dijit.layout.AccordionPane" title="Dojo Tree from Store">
- <!-- tree widget -->
- <div dojoType="dijit.Tree" store="continentStore" query="{type:'continent'}"
- 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 -->
-
- <!-- top tabs (marked as "center" to take up the main part of the BorderContainer) -->
- <div dojoType="dijit.layout.TabContainer" region="center" id="topTabs">
- <!-- 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="datatestComboBox">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; height:20px;" annotate="true" maximum="200" id="setTestBar"
- progress="20" dojoType="dijit.ProgressBar"></div>
-
- Indeterminate:
- <div style="width:400px; height:20px" 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><!-- custom styled button tests -->
- <button dojoType="dijit.form.Button" class="myCustomTheme"
- onclick='console.debug("short");'>
- <div class="dc">short</div>
- </button>
-
- <button dojoType="dijit.form.Button" class="myCustomTheme"
- onclick='console.debug("longer");'>
- <div class="dc">bit longer</div>
- </button>
-
- <button dojoType="dijit.form.Button" class="myCustomTheme"
- 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="tab" 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 on <h3></h2>
-
- (HTML before)
- <h3 id="editable" style="font-size:larger;" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])">
- Edit me - I trigger the onChange callback
- </h3>
- (HTML after)
-
- <hr class="spacer">
-
- <h2>dijit.InlineEditBox + dijit.form.Textarea</h2>
-
- (HTML before)
- <p id="areaEditable" dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea" autoSave="false">
- I'm one big paragraph. Go ahead and edit me. I dare you.
- The quick brown fox jumped over the lazy dog. Blah blah blah blah blah blah blah ...
- </p>
- (HTML after)
-
- <p>
- These links will
- <a href="#" onClick="dijit.byId('areaEditable').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 -->
-
- <!-- fifth upper tab -->
- <div id="tab5" dojoType="dijit.layout.ContentPane" title="DnD"
- style="padding:10px; display:none; ">
- <div style="float:left; margin:5px; ">
- <h3>Source 1</h3>
- <div dojoType="dojo.dnd.Source" style="border:3px solid #ccc; padding: 1em 3em; ">
- <div class="dojoDndItem">Item <strong>X</strong></div>
- <div class="dojoDndItem">Item <strong>Y</strong></div>
- <div class="dojoDndItem">Item <strong>Z</strong></div>
- </div>
- </div>
- <div style="float:left; margin:5px; ">
- <h3>Source 2</h3>
- <div dojoType="dojo.dnd.Source" style="border:3px solid #ccc; padding: 1em 3em; ">
- <div class="dojoDndItem">Item <strong>1</strong></div>
- <div class="dojoDndItem">Item <strong>2</strong></div>
- <div class="dojoDndItem">Item <strong>3</strong></div>
- </div>
- </div>
- </div>
-
- <!-- sixth upper tab -->
- <div id="tab6" dojoType="dijit.layout.ContentPane" title="Closable"
- style="display:none; padding:10px; " closable="true">
- This pane is closable, just for the icon ...
- </div>
- </div><!-- end of region="center" TabContainer -->
-
- <!-- bottom right tabs -->
- <div dojoType="dijit.layout.TabContainer" id="bottomTabs" tabPosition="bottom" selectedChild="btab1" region="bottom" splitter="true">
-
- <!-- btab 1 -->
- <div id="btab1" dojoType="dijit.layout.ContentPane" title="Info" style=" padding:10px; ">
- <p>You can explore this single page after applying a Theme
- for use in creation of your own theme.</p>
-
- <p>I am whole slew of Widgets on a page. Jump to <a href="../tests/">dijit tests</a> to
- test individual components.</p>
-
- <p>There is a right-click [context] pop-up menu here, as well.</p>
- </div><!-- end:info btab1 -->
-
- <div id="btab2" dojoType="dijit.layout.ContentPane" title="Alternate Themes" style="padding:20px;">
- <span id="themeData"></span>
- </div><!-- btab2 -->
-
- <div id="btab3" dojoType="dijit.layout.ContentPane" title="Bottom 3" closable="true">
- <p>I am the last Tab</p>
- <div id="dialog2" dojoType="dijit.Dialog" title="Encased Dialog" style="display:none;">
- I am the second dialog. I am
- parented by the Low Tab Pane #3
- </div>
- </div><!-- btab3 -->
-
- </div><!-- end Bottom TabContainer -->
-
- </div> <!-- end of "mainSplit" BorderContainer -->
- </div><!-- end of "main" BorderContainer -->
-
- <!-- dialog in body -->
- <div id="dialog1" dojoType="dijit.Dialog" title="Floating Modal Dialog" style="display:none;" href="../tests/layout/doc0.html"></div>
-
-</body>
-</html>
|