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

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2                 "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>Dojo Toolbar Widget Test</title>
   6
   7         <style type="text/css">
   8                 @import "../../dojo/resources/dojo.css";
   9                 @import "css/dijitTests.css";
  10
  11                 .dijitToolbar .dijitButton, .dijitToolbar .dijitDropDownButton { margin: 0px; }
  12                 .dijitToolbar .dijitToggleButtonSelected BUTTON, .dijitToolbar .dijitToggleButtonSelectedHover BUTTON { border-width: 3px; }
  13         </style>
  14
  15         <script type="text/javascript" src="../../dojo/dojo.js"
  16                 djConfig="parseOnLoad: true, isDebug: true"></script>
  17         <script type="text/javascript" src="_testCommon.js"></script>
  18
  19         <script type="text/javascript">
  20                 dojo.require("dijit.form.Button");
  21                 dojo.require("dijit.ColorPalette");
  22                 dojo.require("dijit.Dialog");
  23                 dojo.require("dijit.Toolbar");
  24                 dojo.require("dijit.form.Button");
  25                 dojo.require("dijit.form.TextBox");
  26                 dojo.require("dijit.Menu");
  27                 dojo.require("dojo.parser");
  28
  29                 <!-- programatic creation -->
  30                 function init(){
  31                         dojo.forEach(["toolbar2", "toolbar3", "toolbar4"], function(toolbarId){
  32                                 var toolbar = new dijit.Toolbar({}, dojo.byId(toolbarId));
  33                                 dojo.forEach(["Cut", "Copy", "Paste"], function(label){
  34                                         var button = new dijit.form.Button({
  35                         id: toolbarId+"."+label,
  36                         // note: should always specify a label, for accessibility reasons.
  37                         // Just set showLabel=false if you don't want it to be displayed normally
  38                         label: label,
  39                         showLabel: (toolbarId == "toolbar2" ? false : true),
  40                         iconClass: toolbarId == "toolbar4" ? "" : "dijitEditorIcon dijitEditorIcon"+label
  41                     });
  42                     toolbar.addChild(button);
  43                                 });
  44                         });
  45                 }
  46
  47                 dojo.addOnLoad(init);
  48         </script>
  49 </head>
  50 <body>
  51         <h1 class="testTitle">Toolbar test</h1>
  52
  53         <h2>Toolbar from markup</h2>
  54
  55         <div id="toolbar1" dojoType="dijit.Toolbar"
  56                         ><div dojoType="dijit.form.Button" id="toolbar1.cut" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="false">Cut</div
  57                         ><div dojoType="dijit.form.Button" id="toolbar1.copy" iconClass="dijitEditorIcon dijitEditorIconCopy" showLabel="false">Copy</div
  58                         ><div dojoType="dijit.form.Button" id="toolbar1.paste" iconClass="dijitEditorIcon dijitEditorIconPaste" showLabel="false">Paste</div
  59
  60                         ><span dojoType="dijit.ToolbarSeparator"></span
  61
  62                         ><div dojoType="dijit.form.ToggleButton" id="toolbar1.bold" iconClass="dijitEditorIcon dijitEditorIconBold" showLabel="false">Bold</div
  63                         ><div dojoType="dijit.form.ToggleButton" id="toolbar1.italic" iconClass="dijitEditorIcon dijitEditorIconItalic" showLabel="false">Italic</div
  64                         ><div dojoType="dijit.form.ToggleButton" id="toolbar1.underline" iconClass="dijitEditorIcon dijitEditorIconUnderline" showLabel="false">Underline</div
  65                         ><div dojoType="dijit.form.ToggleButton" id="toolbar1.strikethrough" iconClass="dijitEditorIcon dijitEditorIconStrikethrough" showLabel="false">Strikethrough</div
  66
  67 ><!--
  68                         <span dojoType="dijit.ToolbarSeparator">&nbsp;</span>
  69
  70                         <span dojo:type="ToolbarButtonGroup" name="justify" defaultButton="justifyleft" preventDeselect="true" showLabel="false">
  71                                 <div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconJustifyLeft" name="justify" showLabel="false">Left</div>
  72                                 <div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconJustifyRight" name="justify" showLabel="false">Right</div>
  73                                 <div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconJustifyCenter" name="justify" showLabel="false">Center</div>
  74                          </span>
  75
  76                         --><span dojoType="dijit.ToolbarSeparator">&nbsp;</span
  77
  78                         ><div dojoType="dijit.form.Button" id="toolbar1.insertorderedlist" iconClass="dijitEditorIcon dijitEditorIconInsertOrderedList" showLabel="false">Ordered list</div
  79                         ><div dojoType="dijit.form.Button" id="toolbar1.insertunorderedlist" iconClass="dijitEditorIcon dijitEditorIconInsertUnorderedList" showLabel="false">Unordered list</div
  80                         ><div dojoType="dijit.form.Button" id="toolbar1.indent" iconClass="dijitEditorIcon dijitEditorIconIndent" showLabel="false">Indent</div
  81                         ><div dojoType="dijit.form.Button" id="toolbar1.outdent" iconClass="dijitEditorIcon dijitEditorIconOutdent" showLabel="false">Outdent</div
  82
  83                         ><span dojoType="dijit.ToolbarSeparator"></span
  84                         ><div dojoType="dijit.form.DropDownButton" id="toolbar1.dialog">
  85                                 <span>Login</span>
  86                                 <div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information"
  87                                         execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
  88                                         <table>
  89                                                 <tr>
  90                                                         <td><label for="user">User:</label></td>
  91                                                         <td><input dojoType=dijit.form.TextBox type="text" name="user" ></td>
  92                                                 </tr>
  93                                                 <tr>
  94                                                         <td><label for="pwd">Password:</label></td>
  95                                                         <td><input dojoType=dijit.form.TextBox type="password" name="pwd"></td>
  96                                                 </tr>
  97                                                 <tr>
  98                                                         <td colspan="2" align="center">
  99                                                                 <button dojoType=dijit.form.Button type="submit" name="submit">Login</button></td>
 100                                                 </tr>
 101                                         </table>
 102                                 </div
 103                         ></div
 104                         ><div dojoType="dijit.form.DropDownButton" id="toolbar1.backcolor" iconClass="dijitEditorIcon dijitEditorIconBackColor" showLabel="false">
 105                                 <span>Background</span>
 106                                 <div dojoType="dijit.ColorPalette" id="toolbar1.colorPalette" style="display: none" palette="3x4" onChange="console.log(this.value);"></div>
 107                         </div
 108                         ><div dojoType="dijit.form.DropDownButton" id="toolbar1.forecolor" iconClass="dijitEditorIcon dijitEditorIconForeColor" showLabel="false">
 109                                 <span>Foreground</span>
 110                                 <div dojoType="dijit.ColorPalette" id="toolbar1.colorPalette2" style="display: none" palette="3x4" onChange="console.log(this.value);"></div>
 111                         </div
 112
 113                         ><span dojoType="dijit.ToolbarSeparator"></span
 114                         ><div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'>
 115                                 <span>Save</span>
 116                                 <div dojoType="dijit.Menu" id="saveMenu" style="display: none;">
 117                                         <div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconSave"
 118                                                 onClick="console.log('not actually saving anything, just a test!')">Save</div>
 119                                         <div dojoType="dijit.MenuItem"
 120                                                 onClick="console.log('not actually saving anything, just a test!')">Save As</div>
 121                                 </div>
 122                         </div
 123         ></div>
 124
 125         <h2>Toolbar that looks like MenuBar</h2>
 126         <div id="menubar" dojoType="dijit.Toolbar" class="menuBar">
 127                 <div dojoType="dijit.form.DropDownButton">
 128                         <span>File</span>
 129                         <div dojoType="dijit.Menu">
 130                                 <div dojoType="dijit.MenuItem">New</div>
 131                                 <div dojoType="dijit.MenuItem">Open</div>
 132                                 <div dojoType="dijit.MenuSeparator"></div>
 133                                 <div dojoType="dijit.MenuItem" iconClass="dijitEditorIconSave">Save</div>
 134                                 <div dojoType="dijit.MenuItem">Save As...</div>
 135                         </div>
 136                 </div>
 137                 <div dojoType="dijit.form.DropDownButton">
 138                         <span>Edit</span>
 139                         <div dojoType="dijit.Menu">
 140                                 <div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconCut"
 141                                         onClick="console.log('not actually cutting anything, just a test!')">Cut</div>
 142                                 <div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconCopy"
 143                                         onClick="console.log('not actually copying anything, just a test!')">Copy</div>
 144                                 <div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconPaste"
 145                                         onClick="console.log('not actually pasting anything, just a test!')">Paste</div>
 146                         </div>
 147                 </div>
 148                 <div dojoType="dijit.form.DropDownButton">
 149                         <span>View</span>
 150                         <div dojoType="dijit.Menu">
 151                                 <div dojoType="dijit.MenuItem">Normal</div>
 152                                 <div dojoType="dijit.MenuItem">Outline</div>
 153                                 <div dojoType="dijit.PopupMenuItem">
 154                                         <span>Zoom</span>
 155                                         <div dojoType="dijit.Menu" id="submenu2">
 156                                                 <div dojoType="dijit.MenuItem">50%</div>
 157                                                 <div dojoType="dijit.MenuItem">75%</div>
 158                                                 <div dojoType="dijit.MenuItem">100%</div>
 159                                                 <div dojoType="dijit.MenuItem">150%</div>
 160                                                 <div dojoType="dijit.MenuItem">200%</div>
 161                                         </div>
 162                                 </div>
 163                         </div>
 164                 </div>
 165                 <div dojoType="dijit.form.DropDownButton">
 166                         <span>Help</span>
 167                         <div dojoType="dijit.Menu">
 168                                 <div dojoType="dijit.MenuItem">Help Topics</div>
 169                                 <div dojoType="dijit.MenuItem">About Dijit</div>
 170                         </div>
 171                 </div>
 172         </div>
 173
 174         <h2>Toolbar from script with icons only</h2>
 175         <div id="toolbar2"></div>
 176
 177         <h2>Toolbar from script with text and icons</h2>
 178         <div id="toolbar3"></div>
 179
 180         <h2>Toolbar from script with text only</h2>
 181         <div id="toolbar4"></div>
 182
 183     <!-- leave some space before the console window -->
 184     <br><br>
 185   </body>
 186 </html>