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

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

Added Dojo 1.9.3 release.
File size: 5.0 KB
Line 
1<!DOCTYPE html>
2<html>
3        <head>
4                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
6                <title>Demo GridContainer</title>
7
8                <style title="text/css">
9                        @import "../../../dojo/resources/dojo.css";
10                        @import "../../../dijit/themes/tundra/tundra.css";
11                       
12                        html, body{
13                                margin:0;
14                                padding:1%;
15                        }
16
17                        .cpane{
18                                border:1px solid #666;
19                                font:bold 12px Arial;
20                                color:#666;
21                                background:#FFF;
22                                padding:10px;
23                        }
24                       
25                        .gridContainerPopup{
26                                position:absolute;
27                                top:40%;
28                                left:40%;
29                                width:200px;
30                                height:auto;   
31                                border:1px solid #BFBFBF;
32                                background-color:#FFF;
33                                text-align:center;
34                                padding:10px;
35                        }
36                       
37                        .dj_ie6 .orange .gridContainerPopup{
38                                top:10%;
39                        }
40                       
41                        .dj_ie6 .dropIndicator, .dj_ie6 .dijitContentpane, .dj_ie6 .dijitCalendar{
42                                margin: 10px;
43                        }
44                        .gridContainerZone > *{
45                                margin: 10px !important;
46                        }
47                </style>
48                <link rel="stylesheet" href="../resources/GridContainer.css">
49        </head>
50
51        <body class="tundra">
52               
53                <h1 class="testTitle">Grid Container Lite</h1>
54                <h2>Accessibility</h2>
55                        <ul>
56                                <li>Possibility to move focus into the GridContainer (TAB, LEFT ARROW, RIGHT ARROW, UP ARROW, DOWN ARROW).</li>
57                                <li>Possibility to move GridContainer's children (Drag and Drop) with keyboard. (SHIFT + LEFT ARROW or RIGHT ARROW or UP ARROW or DOWN ARROW). To test dnd restriction, try to move a TitlePane widget...</li>
58                        </ul>
59                <h2>Grid Container (acceptTypes="ContentPane, Calendar", nbZones="3", isAutoOrganized="true", doLayout="false")</h2>
60                       
61                        <div id="GC1" data-dojo-type="dojox/layout/GridContainerLite"
62                                nbZones="3"
63                                hasResizableColumns="false"
64                                doLayout="false"
65                                acceptTypes="ContentPane, Calendar">
66                                        <div data-dojo-type="dijit/layout/ContentPane" class="cpane" label="Content Pane" dndType="ContentPane" >Content Pane n°1 !</div>
67                                        <div data-dojo-type="dijit/TitlePane" title="Ergo" dndType="TitlePane" >
68                                                Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.
69                                        </div>
70                                        <div data-dojo-type="dijit/layout/ContentPane" class="cpane" label="Content Pane" dndType="ContentPane">Content Pane n°2 !</div>
71                                        <div data-dojo-type="dijit/layout/ContentPane" title="Intellectum" dndType="ContentPane">
72                                                Intellectum est enim mihi quidem in multis, et maxime in me ipso, sed paulo ante in omnibus, cum M. Marcellum senatui reique publicae concessisti, commemoratis praesertim offensionibus, te auctoritatem huius ordinis dignitatemque rei publicae tuis vel doloribus vel suspicionibus anteferre. Ille quidem fructum omnis ante actae vitae hodierno die maximum cepit, cum summo consensu senatus, tum iudicio tuo gravissimo et maximo. Ex quo profecto intellegis quanta in dato beneficio sit laus, cum in accepto sit tanta gloria.
73                                        </div>
74                                       
75                                        <div data-dojo-type="dijit/layout/ContentPane" class="cpane" label="Content Pane" dndType="ContentPane">Content Pane n°3 !</div>
76                                        <div data-dojo-type="dijit/layout/ContentPane" class="cpane" label="Content Pane" dndType="ContentPane">Content Pane n°4 !</div>
77                                        <div data-dojo-type="dijit/Calendar" dndType="Calendar"></div>
78                        </div>
79                        <div id="foo"></div>
80                <script src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true, async: 1"></script>
81                <script src="../../../dijit/tests/_testCommon.js"></script>
82
83                <script>
84                    require(["dojo/parser", "dojo/topic", "dojo/dom-class", "dojo/dom-construct", "dojo/_base/lang", "dijit/registry", "dojox/layout/GridContainerLite","dijit/TitlePane", "dijit/layout/ContentPane", "dijit/Calendar", "dojo/domReady!"],
85                    function(parser, topic, domClass, domConstruct, lang, registry, GridContainerLite){
86                                var fooWidget = new GridContainerLite({}, "foo");
87                                var canDisplayPopup = true;
88
89                                function displayPopup(gridContainer) {
90                                        //      summary:
91                                        //              Display a popup when a widget can not be moved (not accepted type)
92
93                                        if(canDisplayPopup){
94                                                canDisplayPopup = false;
95                                                var popup = document.createElement("div");
96                                                domClass(popup, "gridContainerPopup");
97                                                popup.innerHTML = "Impossible to move this widget ! ";
98                                                var attachPopup = registry.byId("GC1").containerNode.appendChild(popup);
99                                                setTimeout(lang.hitch(this, function(){
100                                                        registry.byId("GC1").containerNode.removeChild(attachPopup);
101                                                        domConstruct.destroy(attachPopup);
102                                                        canDisplayPopup = true;
103                                                }), 1500);
104                                        }
105                                };
106                                topic.subscribe("/dojox/layout/gridContainer/moveRestriction",displayPopup);
107                    });
108                </script>
109        </body>
110</html>
Note: See TracBrowser for help on using the repository browser.