source: Dev/branches/rest-dojo-ui/client/dijit/tests/test_Toolbar.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 7.8 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5        <title>Dojo Toolbar Widget Test</title>
6
7        <style type="text/css">
8                @import "../themes/claro/document.css";
9                @import "css/dijitTests.css";
10        </style>
11
12        <!-- required: a default dijit theme: -->
13        <link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>
14
15        <!-- required: dojo.js -->
16        <script type="text/javascript" src="../../dojo/dojo.js"
17                data-dojo-config="parseOnLoad: true, isDebug: true"></script>
18
19        <!-- not needed, for testing alternate themes -->
20        <script type="text/javascript" src="_testCommon.js"></script>
21
22        <script type="text/javascript">
23                dojo.require("dijit.dijit"); // optimize: load dijit layer
24
25                dojo.require("dijit.Declaration");
26                dojo.require("dijit.Toolbar");
27                dojo.require("dijit.ToolbarSeparator");
28
29                dojo.require("dijit.form.Button");
30                dojo.require("dijit.form.DropDownButton");
31                dojo.require("dijit.form.ComboButton");
32                dojo.require("dijit.form.ToggleButton");
33
34                dojo.require("dijit.ColorPalette");
35                dojo.require("dijit.TooltipDialog");
36                dojo.require("dijit.form.TextBox");
37
38                dojo.require("dijit.Menu");
39                dojo.require("dijit.MenuItem");
40
41                dojo.require("dojo.parser");
42
43                dojo.ready(function(){
44                        // programatic creation
45                        dojo.forEach(["toolbar2", "toolbar3", "toolbar4"], function(toolbarId){
46                                var toolbar = new dijit.Toolbar({}, dojo.byId(toolbarId));
47                                dojo.forEach(["Cut", "Copy", "Paste"], function(label){
48                                        var button = new dijit.form.Button({
49                        id: toolbarId+"."+label,
50                        // note: should always specify a label, for accessibility reasons.
51                        // Just set showLabel=false if you don't want it to be displayed normally
52                        label: label,
53                        showLabel: (toolbarId != "toolbar2"),
54                        iconClass: toolbarId == "toolbar4" ? "" : "dijitEditorIcon dijitEditorIcon"+label
55                    });
56                    toolbar.addChild(button);
57                                });
58                        });
59                       
60                });
61        </script>
62</head>
63<body class="claro">
64        <h1 class="testTitle">Toolbar test</h1>
65
66        <span data-dojo-type="dijit.Declaration" data-dojo-props='widgetClass:"ToolbarSectionStart", defaults:{ label: "Label"}'>
67                <span data-dojo-type="dijit.ToolbarSeparator"></span><i>${label}:</i>
68        </span>
69
70        <h2>Toolbar from markup</h2>
71
72        <input id="toolbar1Before" value="input before toolbar1"/>
73        <div id="toolbar1" data-dojo-type="dijit.Toolbar"
74                        ><div data-dojo-type="ToolbarSectionStart" data-dojo-props='label:"Buttons"'></div
75                        ><div id="toolbar1.cut" data-dojo-type="dijit.form.Button" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut", showLabel:false'>Cut</div
76                        ><div id="toolbar1.copy" data-dojo-type="dijit.form.Button" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy", showLabel:true'>Copy</div
77
78                        ><div data-dojo-type="ToolbarSectionStart" data-dojo-props='label:"Toggles"'></div
79                        ><div id="toolbar1.bold" data-dojo-type="dijit.form.ToggleButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBold", showLabel:false'>Bold</div
80                        ><div id="toolbar1.italic" data-dojo-type="dijit.form.ToggleButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconItalic", showLabel:true'>Italic</div
81
82><!--
83                        <span data-dojo-type="dijit.ToolbarSeparator">&nbsp;</span>
84
85                        <span dojo:type="ToolbarButtonGroup" name="justify" defaultButton="justifyleft" preventDeselect="true" showLabel="false">
86                                <div data-dojo-type="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconJustifyLeft" name="justify" showLabel="false">Left</div>
87                                <div data-dojo-type="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconJustifyRight" name="justify" showLabel="false">Right</div>
88                                <div data-dojo-type="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconJustifyCenter" name="justify" showLabel="false">Center</div>
89                         </span>
90-->
91
92                        <div data-dojo-type="ToolbarSectionStart" data-dojo-props='label:"Dropdowns"'></div
93                        ><div id="toolbar1.dialog" data-dojo-type="dijit.form.DropDownButton" data-dojo-props='iconClass:"plusIcon", showLabel:true'>
94                                <span>TooltipDialog</span>
95                                <div id="tooltipDlg" data-dojo-type="dijit.TooltipDialog" data-dojo-props='title:"Enter Login information",
96                                        execute:function(args){ console.log("submitted w/args:\n" + dojo.toJson(args, true)); }'>
97                                        <table>
98                                                <tr>
99                                                        <td><label for="user">User:</label></td>
100                                                        <td><input id="user" data-dojo-type=dijit.form.TextBox data-dojo-props='type:"text", name:"user" '/></td>
101                                                </tr>
102                                                <tr>
103                                                        <td><label for="password">Password:</label></td>
104                                                        <td><input id="password" data-dojo-type=dijit.form.TextBox data-dojo-props='type:"password", name:"pwd"'/></td>
105                                                </tr>
106                                                <tr>
107                                                        <td colspan="2" style="text-align:center;">
108                                                                <button data-dojo-type=dijit.form.Button data-dojo-props='type:"submit", name:"submit"'>Login</button></td>
109                                                </tr>
110                                        </table>
111                                </div
112                        ></div
113                        ><div id="toolbar1.backcolor" data-dojo-type="dijit.form.DropDownButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBackColor", showLabel:true'>
114                                <span>ColorPalette</span>
115                                <div id="toolbar1.colorPalette" data-dojo-type="dijit.ColorPalette" data-dojo-props='style:"display: none", palette:"7x10", onChange:function(){ console.log(this.value); }'></div>
116                        </div
117                        ><div id="toolbar1.forecolor" data-dojo-type="dijit.form.DropDownButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconForeColor", showLabel:false'>
118                                <span>Foreground</span>
119                                <div id="toolbar1.colorPalette2" data-dojo-type="dijit.ColorPalette" data-dojo-props='style:"display: none", palette:"3x4", onChange:function(){ console.log(this.value); }'></div>
120                        </div
121
122                        ><div data-dojo-type="ToolbarSectionStart" data-dojo-props='label:"Combos"'></div
123                        ><div id="toolbar1.combo" data-dojo-type="dijit.form.ComboButton" data-dojo-props='optionsTitle:"save options", iconClass:"plusIcon", showLabel:true,
124                                onClick:function(){ console.log("clicked combo save") }'>
125                                <span>Menu</span>
126                                <div id="saveMenu" data-dojo-type="dijit.Menu" data-dojo-props='style:"display: none;"'>
127                                        <div data-dojo-type="dijit.MenuItem"  data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave",
128                                                onClick:function(){ console.log("not actually saving anything, just a test!") }'>Save</div>
129                                        <div data-dojo-type="dijit.MenuItem"
130                                                data-dojo-props='onClick:function(){ console.log("not actually saving anything, just a test!") }'>Save As</div>
131                                </div>
132                        </div
133                        ><div id="toolbar1.combo2" data-dojo-type="dijit.form.ComboButton" data-dojo-props='optionsTitle:"save options2", iconClass:"plusIcon", showLabel:false,
134                                onClick:function(){ console.log("clicked combo save") }'>
135                                <span>Menu2</span>
136                                <div id="saveMenu2" data-dojo-type="dijit.Menu" data-dojo-props='style:"display: none;"'>
137                                        <div data-dojo-type="dijit.MenuItem"  data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave",
138                                                onClick:function(){ console.log("not actually saving anything, just a test!") }'>Save</div>
139                                        <div data-dojo-type="dijit.MenuItem"
140                                                data-dojo-props='onClick:function(){ console.log("not actually saving anything, just a test!") }'>Save As</div>
141                                </div>
142                        </div
143
144                        ><span data-dojo-type="dijit.ToolbarSeparator"></span
145                        ><div id="toolbar1.insertorderedlist" data-dojo-type="dijit.form.Button" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconInsertOrderedList", showLabel:false'>Ordered list</div
146        ></div>
147        <input id="toolbar1After" value="input after toolbar1"/>
148
149        <h2>Toolbar from script with icons only</h2>
150        <div id="toolbar2"></div>
151
152        <h2>Toolbar from script with text and icons</h2>
153        <div id="toolbar3"></div>
154
155        <h2>Toolbar from script with text only</h2>
156        <div id="toolbar4"></div>
157
158    <!-- leave some space before the console window -->
159    <br><br>
160  </body>
161</html>
Note: See TracBrowser for help on using the repository browser.