| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
|---|
| 5 | <title>GridContainerLite [acceptTypes, dragRestriction]</title> |
|---|
| 6 | |
|---|
| 7 | <!-- Specific CSS --> |
|---|
| 8 | <style type="text/css" title="text/css"> |
|---|
| 9 | /* <![CDATA[ */ |
|---|
| 10 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 11 | @import "../../../dijit/themes/tundra/tundra.css"; |
|---|
| 12 | |
|---|
| 13 | body{ |
|---|
| 14 | padding-left:10px; |
|---|
| 15 | } |
|---|
| 16 | .cpane{ |
|---|
| 17 | border:1px solid #666; |
|---|
| 18 | font:bold 12px Arial; |
|---|
| 19 | color:#F60; |
|---|
| 20 | background:#FFF; |
|---|
| 21 | padding:5px; |
|---|
| 22 | height:100px; |
|---|
| 23 | } |
|---|
| 24 | |
|---|
| 25 | .gridContainerZone > div{ |
|---|
| 26 | margin: 5px; |
|---|
| 27 | } |
|---|
| 28 | |
|---|
| 29 | .dj_ie6 .dropIndicator, .dj_ie6 .cpane{ |
|---|
| 30 | margin: 10px; |
|---|
| 31 | } |
|---|
| 32 | /* ]]> */ |
|---|
| 33 | </style> |
|---|
| 34 | |
|---|
| 35 | <link rel="stylesheet" href="../resources/GridContainer.css"> |
|---|
| 36 | |
|---|
| 37 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> |
|---|
| 38 | |
|---|
| 39 | <script type="text/javascript" language="javascript"> |
|---|
| 40 | dojo.require("dojox.layout.GridContainerLite"); |
|---|
| 41 | dojo.require("dijit.layout.ContentPane"); |
|---|
| 42 | |
|---|
| 43 | var canDisplayPopup = true; |
|---|
| 44 | |
|---|
| 45 | function displayPopup(grid) { |
|---|
| 46 | // summary: |
|---|
| 47 | // Display a popup when a widget can not be moved (not accepted type) |
|---|
| 48 | |
|---|
| 49 | if(canDisplayPopup){ |
|---|
| 50 | canDisplayPopup = false; |
|---|
| 51 | var popup = dojo.doc.createElement("div"); |
|---|
| 52 | dojo.addClass(popup, "gridContainerPopup"); |
|---|
| 53 | popup.innerHTML = "Impossible to move this widget ! "; |
|---|
| 54 | var attachPopup = dijit.byId("GC1").containerNode.appendChild(popup); |
|---|
| 55 | setTimeout(dojo.hitch(this, function(){ |
|---|
| 56 | dijit.byId("GC1").containerNode.removeChild(attachPopup); |
|---|
| 57 | dojo.destroy(attachPopup); |
|---|
| 58 | canDisplayPopup = true; |
|---|
| 59 | }), 1500); |
|---|
| 60 | } |
|---|
| 61 | }; |
|---|
| 62 | |
|---|
| 63 | dojo.addOnLoad(function(){ |
|---|
| 64 | dojo.subscribe("/dojox/layout/gridContainer/moveRestriction",displayPopup); |
|---|
| 65 | }); |
|---|
| 66 | </script> |
|---|
| 67 | </head> |
|---|
| 68 | |
|---|
| 69 | <body class="orange"> |
|---|
| 70 | <h1>GridContainerLite with acceptTypes</h1> |
|---|
| 71 | <ul> |
|---|
| 72 | <li>Try to drag and Drop Widget !</li> |
|---|
| 73 | <li>Try to drag and Drop Widget with keyBoard (no drag and drop between GridContainer)</li> |
|---|
| 74 | <ul> |
|---|
| 75 | <li>Use Tab to place focus on the GridContainer.</li> |
|---|
| 76 | <li>Use Arrows to place focus on children</li> |
|---|
| 77 | <li>Use Shift + Arrows to drag and drop a child</li> |
|---|
| 78 | </ul> |
|---|
| 79 | <li>Try to drag widgets which have an attribute dragRestriction="true". It's imposible !</li> |
|---|
| 80 | </ul> |
|---|
| 81 | |
|---|
| 82 | <div style="position:absolute;top:150px;left:50px;width:400px;"> |
|---|
| 83 | <h3>AcceptTypes :</h3> |
|---|
| 84 | <p>text (equal to any dndType), color, animal</p> |
|---|
| 85 | <div id="GC1" |
|---|
| 86 | dojoType="dojox.layout.GridContainerLite" |
|---|
| 87 | nbZones="3" |
|---|
| 88 | isAutoOrganized="true" |
|---|
| 89 | doLayout="false" |
|---|
| 90 | acceptTypes="text, color, animal"> |
|---|
| 91 | <div dojoType="dijit.layout.ContentPane" class="cpane" dndType="animal"> |
|---|
| 92 | I am a Tiger : drag Me ! |
|---|
| 93 | </div> |
|---|
| 94 | <div dojoType="dijit.layout.ContentPane" class="cpane"> |
|---|
| 95 | I have no type (text) : Drag Me ! |
|---|
| 96 | </div> |
|---|
| 97 | <div dojoType="dijit.layout.ContentPane" class="cpane" dndType="color" style="background-color:blue"> |
|---|
| 98 | I am a color : Drag Me ! |
|---|
| 99 | </div> |
|---|
| 100 | <div dojoType="dijit.layout.ContentPane" class="cpane" dragRestriction="true"> |
|---|
| 101 | I have a dragRestriction : Try to Drag Me ! |
|---|
| 102 | </div> |
|---|
| 103 | <div dojoType="dijit.layout.ContentPane" class="cpane" dndType="animal"> |
|---|
| 104 | I am a Snake : Drag Me ! |
|---|
| 105 | </div> |
|---|
| 106 | <div dojoType="dijit.layout.ContentPane" class="cpane" dndType="motor"> |
|---|
| 107 | I am a car : Drag Me ! |
|---|
| 108 | </div> |
|---|
| 109 | |
|---|
| 110 | </div> |
|---|
| 111 | </div> |
|---|
| 112 | <div style="position:absolute;top:150px;left:500px;width:600px;"> |
|---|
| 113 | <h3>AcceptTypes :</h3> |
|---|
| 114 | <p>color, motor</p> |
|---|
| 115 | <div id="GC2" |
|---|
| 116 | dojoType="dojox.layout.GridContainerLite" |
|---|
| 117 | nbZones="4" |
|---|
| 118 | isAutoOrganized="true" |
|---|
| 119 | doLayout="false" |
|---|
| 120 | acceptTypes="color, motor"> |
|---|
| 121 | <div dojoType="dijit.layout.ContentPane" class="cpane" dndType="color" style="background-color:yellow"> |
|---|
| 122 | I am a color : drag Me ! |
|---|
| 123 | </div> |
|---|
| 124 | <div dojoType="dijit.layout.ContentPane" class="cpane" dndType="motor"> |
|---|
| 125 | I am a plane : drag Me ! |
|---|
| 126 | </div> |
|---|
| 127 | <div dojoType="dijit.layout.ContentPane" class="cpane" dndType="animal"> |
|---|
| 128 | I am a horse : Drag Me ! |
|---|
| 129 | </div> |
|---|
| 130 | <div dojoType="dijit.layout.ContentPane" class="cpane" dndType="motor"> |
|---|
| 131 | I am a bus : Drag Me ! |
|---|
| 132 | </div> |
|---|
| 133 | <div dojoType="dijit.layout.ContentPane" class="cpane" dndType="color" style="background-color:pink"> |
|---|
| 134 | I am a color: Drag Me ! |
|---|
| 135 | </div> |
|---|
| 136 | <div dojoType="dijit.layout.ContentPane" class="cpane" dndType="animal"> |
|---|
| 137 | I am a rabbit : Drag Me ! |
|---|
| 138 | </div> |
|---|
| 139 | <div dojoType="dijit.layout.ContentPane" class="cpane" dragRestriction="true"> |
|---|
| 140 | I have a dragRestriction : Try to Drag Me ! |
|---|
| 141 | </div> |
|---|
| 142 | <div dojoType="dijit.layout.ContentPane" class="cpane" dndType="color" style="background-color:red"> |
|---|
| 143 | I am a color : Drag Me ! |
|---|
| 144 | </div> |
|---|
| 145 | </div> |
|---|
| 146 | </div> |
|---|
| 147 | </body> |
|---|
| 148 | </html> |
|---|
