source: Dev/trunk/src/client/dojox/layout/tests/test_FloatingPane.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 6.8 KB
Line 
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>dojox.layout.FloatPane - a crude non-modal Floating Window</title>
6
7        <!-- required: a default theme file -->
8        <link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/tundra/tundra.css">
9        <link rel="stylesheet" href="../resources/FloatingPane.css">   
10        <link rel="stylesheet" href="../resources/ResizeHandle.css">
11
12        <!-- required: dojo.js -->
13        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
14
15        <!-- do not use! only for testing dynamic themes -->
16        <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
17
18        <script type="text/javascript">
19                dojo.require("dojox.layout.FloatingPane");
20                dojo.require("dijit.layout.TabContainer");
21                dojo.require("dijit.form.ComboBox");
22                dojo.require("dijit.form.Button");
23                dojo.require("dojo.parser"); // scan page for widgets
24        </script>
25       
26        <style type="text/css">
27                @import "../../../dojo/resources/dojo.css";
28                @import "../../../dijit/tests/css/dijitTests.css";
29
30        /* body { background:url('gridUnderlay.png') top left; }  */
31
32                .alternateDock {
33                        position:absolute;
34                        background-color:#ededed;
35                        right:0px; top:0px;
36                        border-left:1px solid #ccc;
37                        height:100%;
38               
39                }
40                #alternateDock ul.dojoxDockList { display:block; }
41                .testFixedSize {
42                        width:300px;
43                        height:200px;
44                        padding:7px;                   
45                }
46        </style>
47        <script type="text/javascript">
48
49                function makeFloater() {
50                        // programatically created FloatingPane with srcNode ref
51                        var tmp = new dojox.layout.FloatingPane({ 
52                                title: "dynamically created ...",
53                                id:"floater3",
54                                closeable:true,
55                                resizable:true,
56                                dockable: false
57                        },"nonFloater");
58                        tmp.startup();
59                }
60
61                var mi = 1;
62                function brandNewFloater(){
63                        var node = document.createElement('div');
64                        node.innerHTML = dojo.byId('contentHolder').innerHTML;
65                        dojo.body().appendChild(node);
66                        dojo.addClass(node,"testFixedSize");
67                        var tmp = new dojox.layout.FloatingPane({
68                                title:" New Floater #"+(mi++),
69                                dockable: false,
70                                maxable: true,
71                                closable: true,
72                                resizable: false
73                        },node);
74                        tmp.startup();
75                        tmp.resize({ w:300, h:125 });
76                }
77
78                var vpx, vpy = null;
79                dojo.addOnLoad(makeFloater);
80
81        </script>
82
83</head>
84<body class="tundra">
85
86                <a href="javascript:dijit.byId('floater1').hide()">hide first pane</a> |
87                <a href="javascript:dijit.byId('floater1').show()">show first pane</a> |
88                <a href="javascript:dijit.byId('floater1').minimize()">minimize 'uncloseable, dockable' pane pane</a> |
89                <a href="javascript:brandNewFloater()">new floater</a>
90
91                <div dojoType="dojox.layout.FloatingPane" title="Floater test ... " resizable="true" id="floater1" style="position:absolute; width:100px; height:100px; top:100px; left:0px; " duration="300">
92                <p style="margin:0; padding:10px;">I am the content to be floated around</p>
93                </div>
94
95                <div dojoType="dojox.layout.FloatingPane" title="un-closable, dockable" style="width:200px; position:absolute; top:100px; left:100px;" closable="false" id="floater2">
96                <p style="padding:8px; margin:0;">
97                I am dockable, though I have no dockTo="" attribute. I will create or use an existing dock
98                on the bottom of the screen.
99                <br><br>
100                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam
101                porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc
102                eleifend sagittis turpis. purus purus in nibh. Phasellus in nunc.
103                </p>
104                </div>
105               
106                <div id="nonFloater" style="width:100px; height:100px; top:100px; left:300px;" duration="750" >
107                <p style="padding:8x; margin:2px;">
108                I am made into a FloatingPane in dojo.addOnLoad();<br><br>
109                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam
110                porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
111                sagittis turpis. purus purus in nibh. Phasellus in nunc.
112                </p>
113                </div>
114
115                <div title="Alt Dock 1" style="width:100px; height:100px; position:absolute; top:200px; left:0; position:absolute; "
116                        dojoType="dojox.layout.FloatingPane" duration="350" resizable="true"
117                        dockTo="alternateDock" executeScripts="true" href="_script.html">
118                </div>
119                <div title="Alt Dock 2" dojoType="dojox.layout.FloatingPane" resizable="true" style="width:100px; height:100px; position:absolute; top:200px; left:100px;" duration="350" dockTo="alternateDock">
120                <p style="color:#666; padding:8px; margin:0;">
121                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam
122                porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
123                sagittis turpis. purus purus in nibh. Phasellus in nunc.
124                </p>
125                </div>
126
127               
128                <div dojoType="dojox.layout.FloatingPane"
129                        resizeable="false" style="width:100px; 100px; top:200px; left:200px; position:absolute; " title="foobar"
130                        closable="false" dockable="false">
131                       
132                        <p style="padding:12px;">
133                                This is just a pane. You cannot close me, you cannot resize me, you cannot minimize me. I have a
134                                select to test bleed:
135                        </p>
136                       
137                        <select name="foo">
138                                <option value="bleeeeed">bleed?<option>
139                                <option value="bleeeeed1">bleed?<option>
140                                <option value="bleeeeed2">bleed?<option>
141                                <option value="bleeeeed3">bleed?<option>
142                        </select>
143                       
144                </div>
145
146                <div dojoType="dojox.layout.FloatingPane"  id="remotePane"
147                        title="Remote Pane" href="doc0.html" resizable="true"
148                        style="width:250px; height:250px; background:#fff; position:absolute; top:300px; left:0px;"
149                ></div>   
150
151                <div dojoType="dojox.layout.Dock" id="alternateDock" class="alternateDock"></div>
152
153    <div style="display:none;" id="contentHolder"><p style="padding:13px; margin:0;">
154                I am content. I am hidden right now.  This content is used to populate the newly created
155                node being attached to the DOM to insert a new FloatingPane without a srcNodeRef. This
156                node is not being manipulated, just having it's innerHTML read. For demonstration purposes.
157                </p>
158                </div>
159               
160                <div dojotype="dojox.layout.FloatingPane" title="Child layout test"
161                        style="width:400px; height:300px;" resizable="true">
162                        <div dojotype="dijit.layout.TabContainer">
163                                <div dojotype="dijit.layout.ContentPane" title="Tab 1">
164                                        First Page
165                                </div>
166                                <div dojotype="dijit.layout.ContentPane" title="Tab 2">
167                                        <div dojotype="dijit.layout.TabContainer">
168                                                <div dojotype="dijit.layout.ContentPane" title="Sub-tab 1">
169                                                        Story of Paul.
170                                                </div>
171                                                <div dojotype="dijit.layout.ContentPane" title="Sub-tab 2">
172                                                        Story about Paul.
173                                                </div>
174                                                <div dojotype="dijit.layout.ContentPane" title="Sub-tab 3">
175                                                        Story about... guess who.
176                                                </div>
177                                        </div>
178                                </div>
179                        </div>
180                </div> 
181                       
182</body>
183</html>
Note: See TracBrowser for help on using the repository browser.