| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
|---|
| 2 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|---|
| 6 | |
|---|
| 7 | <title>GridContainer - dragHandleClass</title> |
|---|
| 8 | |
|---|
| 9 | <link rel="stylesheet" href="../resources/GridContainer.css"> |
|---|
| 10 | |
|---|
| 11 | <style type="text/css" title="text/css"> |
|---|
| 12 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 13 | @import "../../../dijit/themes/tundra/tundra.css"; |
|---|
| 14 | |
|---|
| 15 | html, body{ |
|---|
| 16 | margin:0; |
|---|
| 17 | padding:1%; |
|---|
| 18 | } |
|---|
| 19 | |
|---|
| 20 | .cpane{ |
|---|
| 21 | border:1px solid #666; |
|---|
| 22 | font:bold 12px Arial; |
|---|
| 23 | color:#666; |
|---|
| 24 | background:#FFF; |
|---|
| 25 | padding:10px; |
|---|
| 26 | height:50px |
|---|
| 27 | } |
|---|
| 28 | |
|---|
| 29 | #GC1 .gridContainerZone { |
|---|
| 30 | border-collapse:collapse; |
|---|
| 31 | border : 1px solid #ededed; |
|---|
| 32 | } |
|---|
| 33 | |
|---|
| 34 | .dj_ie6 .dropIndicator, .dj_ie6 .dijitContentpane, .dj_ie6 .dijitCalendar{ |
|---|
| 35 | margin: 10px; |
|---|
| 36 | } |
|---|
| 37 | .gridContainerZone > *{ |
|---|
| 38 | margin: 10px !important; |
|---|
| 39 | } |
|---|
| 40 | |
|---|
| 41 | </style> |
|---|
| 42 | |
|---|
| 43 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> |
|---|
| 44 | |
|---|
| 45 | <script type="text/javascript"> |
|---|
| 46 | dojo.require("dojo.parser"); |
|---|
| 47 | dojo.require("dijit.TitlePane"); |
|---|
| 48 | dojo.require("dijit.layout.ContentPane"); |
|---|
| 49 | dojo.require("dojox.widget.Portlet"); |
|---|
| 50 | dojo.require("dojox.layout.GridContainer"); |
|---|
| 51 | dojo.require("dijit.form.CheckBox"); |
|---|
| 52 | </script> |
|---|
| 53 | |
|---|
| 54 | </head> |
|---|
| 55 | |
|---|
| 56 | <body class="tundra"> |
|---|
| 57 | |
|---|
| 58 | <h1 class="testTitle">Grid Container</h1> |
|---|
| 59 | |
|---|
| 60 | <h2>Specify dragHandle CSS class</h2> |
|---|
| 61 | <h3>dragHandleClass="dijitTitlePaneTitle"</h3> |
|---|
| 62 | <div> |
|---|
| 63 | Rather than dragging by clicking anywhere on a widget, it is also possible to specify |
|---|
| 64 | particular parts of the widget that are draggable, for example a title bar. |
|---|
| 65 | To do this, set the 'dragHandleClass' to the CSS class on that draggable node. |
|---|
| 66 | Note that below, you can only drag the title panes by dragging their title bar, not the body |
|---|
| 67 | of the widget. |
|---|
| 68 | </div> |
|---|
| 69 | |
|---|
| 70 | <div id="GC1" dojoType="dojox.layout.GridContainer" |
|---|
| 71 | nbZones="3" |
|---|
| 72 | hasResizableColumns="false" |
|---|
| 73 | doLayout="false" |
|---|
| 74 | dragHandleClass="dijitTitlePaneTitle"> |
|---|
| 75 | <div dojoType="dijit.layout.ContentPane" class="cpane" label="Content Pane" dndType="ContentPane" >Content Pane n°1 !</div> |
|---|
| 76 | <div dojoType="dijit.TitlePane" title="Ergo" > |
|---|
| 77 | 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. |
|---|
| 78 | </div> |
|---|
| 79 | <div dojoType="dijit.layout.ContentPane" class="cpane" label="Content Pane">Content Pane n°2 !</div> |
|---|
| 80 | <div dojoType="dijit.layout.ContentPane" class="cpane" label="Content Pane">Content Pane n°3 !</div> |
|---|
| 81 | <div dojoType="dojox.widget.Portlet" title="Portlet with Dialog Settings" id="portlet2"> |
|---|
| 82 | <div dojoType="dojox.widget.PortletDialogSettings" title="Settings in a Dialog"> |
|---|
| 83 | Use Bold Text: <div dojoType="dijit.form.CheckBox"> |
|---|
| 84 | <script type="dojo/connect" data-dojo-event="onClick"> |
|---|
| 85 | dojo.style(dijit.byId('portlet2').containerNode, "fontWeight", this.checked ? "bold" : "normal"); |
|---|
| 86 | </script> |
|---|
| 87 | </div> |
|---|
| 88 | </div> |
|---|
| 89 | <div> |
|---|
| 90 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
|---|
| 91 | Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim. |
|---|
| 92 | Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna. |
|---|
| 93 | Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti |
|---|
| 94 | sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. |
|---|
| 95 | In erat. Suspendisse potenti. Fusce faucibus nibh sed nisi. Phasellus |
|---|
| 96 | faucibus, dui a cursus dapibus, mauris nulla euismod velit, a lobortis turpis |
|---|
| 97 | arcu vel dui. Pellentesque fermentum ultrices pede. Donec auctor lectus eu arcu. |
|---|
| 98 | Curabitur non orci eget est porta gravida. Aliquam pretium orci id nisi. Duis faucibus, |
|---|
| 99 | mi non adipiscing venenatis, erat urna aliquet elit, eu fringilla lacus tellus quis erat. |
|---|
| 100 | Nam tempus ornare lorem. Nullam feugiat. |
|---|
| 101 | </div> |
|---|
| 102 | </div> |
|---|
| 103 | <div dojoType="dijit.layout.ContentPane" class="cpane" label="Content Pane">Content Pane n°4 !</div> |
|---|
| 104 | </div> |
|---|
| 105 | |
|---|
| 106 | </body> |
|---|
| 107 | </html> |
|---|
