| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | |
|---|
| 5 | <title>rounded skeleton page | The Dojo Toolkit</title> |
|---|
| 6 | |
|---|
| 7 | <script type="text/javascript" src="../../../dojo/dojo.js" |
|---|
| 8 | djConfig="parseOnLoad:true, isDebug:true"></script> |
|---|
| 9 | |
|---|
| 10 | <script type="text/javascript"> |
|---|
| 11 | |
|---|
| 12 | dojo.require("dijit.layout.ContentPane"); |
|---|
| 13 | dojo.require("dijit._Templated"); |
|---|
| 14 | dojo.require("dojox.gfx"); |
|---|
| 15 | dojo.require("dojo.dnd.TimedMoveable"); |
|---|
| 16 | |
|---|
| 17 | dojo.declare("my.RoundedContentPane",[dijit.layout.ContentPane,dijit._Templated],{ |
|---|
| 18 | // radius: Integer |
|---|
| 19 | // radius of the corners |
|---|
| 20 | radius:15, |
|---|
| 21 | // moveable: Boolean |
|---|
| 22 | // if true, the node is movable by either the containerNode, or an optional node |
|---|
| 23 | // found by the handle attribute |
|---|
| 24 | moveable:false, |
|---|
| 25 | // handle: String |
|---|
| 26 | // a CSS3 selector query to match the handle for this node, scoped to this.domNode |
|---|
| 27 | handle:".handle", |
|---|
| 28 | |
|---|
| 29 | // template: |
|---|
| 30 | templateString: |
|---|
| 31 | '<div><div style="position:relative;">' + |
|---|
| 32 | '<div dojoAttachPoint="surfaceNode"></div>' + |
|---|
| 33 | '<div dojoAttachPoint="containerNode"></div>' + |
|---|
| 34 | '</div></div>', |
|---|
| 35 | |
|---|
| 36 | startup:function(){ |
|---|
| 37 | |
|---|
| 38 | this.inherited(arguments); |
|---|
| 39 | this._initSurface(); |
|---|
| 40 | dojo.style(this.surfaceNode,{ |
|---|
| 41 | position:"absolute", |
|---|
| 42 | top:0, |
|---|
| 43 | left:0 |
|---|
| 44 | }); |
|---|
| 45 | |
|---|
| 46 | if(this.moveable){ |
|---|
| 47 | this._mover = new dojo.dnd.TimedMoveable(this.domNode,{ |
|---|
| 48 | handle: dojo.query(this.handle,this.domNode)[0] ||this.containerNode, |
|---|
| 49 | timeout:69 |
|---|
| 50 | }); |
|---|
| 51 | } |
|---|
| 52 | |
|---|
| 53 | }, |
|---|
| 54 | |
|---|
| 55 | _initSurface: function(){ |
|---|
| 56 | |
|---|
| 57 | var s = dojo.marginBox(this.domNode); |
|---|
| 58 | var stroke = 2; |
|---|
| 59 | |
|---|
| 60 | this.surface = dojox.gfx.createSurface(this.surfaceNode, s.w + stroke * 2, s.h + stroke * 2); |
|---|
| 61 | this.roundedShape = this.surface.createRect({ |
|---|
| 62 | r: this.radius, |
|---|
| 63 | width: s.w, |
|---|
| 64 | height: s.h |
|---|
| 65 | }) |
|---|
| 66 | .setFill([0, 0, 0, 0.5]) // black, 50% transparency |
|---|
| 67 | .setStroke({ color:[255,255,255,1], width:stroke }) // solid white |
|---|
| 68 | ; |
|---|
| 69 | this.resize(s); |
|---|
| 70 | |
|---|
| 71 | }, |
|---|
| 72 | |
|---|
| 73 | resize:function(size){ |
|---|
| 74 | |
|---|
| 75 | if(!this.surface){ this._initSurfce(); } |
|---|
| 76 | |
|---|
| 77 | this.surface.setDimensions(size.w,size.h); |
|---|
| 78 | this.roundedShape.setShape({ |
|---|
| 79 | width: size.w, |
|---|
| 80 | height: size.h |
|---|
| 81 | }); |
|---|
| 82 | |
|---|
| 83 | var _offset = Math.floor(this.radius / 2); |
|---|
| 84 | dojo.style(this.containerNode,{ |
|---|
| 85 | color: "#fff", |
|---|
| 86 | position: "absolute", |
|---|
| 87 | overflow: "auto", |
|---|
| 88 | top: _offset + "px", |
|---|
| 89 | left: _offset + "px", |
|---|
| 90 | height: (size.h - _offset * 2) + "px", |
|---|
| 91 | width: (size.w - _offset * 2) + "px" |
|---|
| 92 | }); |
|---|
| 93 | |
|---|
| 94 | } |
|---|
| 95 | |
|---|
| 96 | }); |
|---|
| 97 | </script> |
|---|
| 98 | |
|---|
| 99 | <style type="text/css"> |
|---|
| 100 | body { background:#ededed; } |
|---|
| 101 | </style> |
|---|
| 102 | |
|---|
| 103 | </head> |
|---|
| 104 | <body> |
|---|
| 105 | |
|---|
| 106 | <h1>Some gfx + ContentPane's</h1> |
|---|
| 107 | |
|---|
| 108 | <div dojoType="my.RoundedContentPane" radius="55" title="Pane 2" style="width:200px; height:400px; float:right"> |
|---|
| 109 | <h3>YO!</h3> |
|---|
| 110 | <p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p> |
|---|
| 111 | </div> |
|---|
| 112 | |
|---|
| 113 | <div style="width:400px; height:200px;" dojoType="my.RoundedContentPane"> |
|---|
| 114 | LOREM, ipsum, dollllllllllor: |
|---|
| 115 | .roundedContent { |
|---|
| 116 | padding: 31px; |
|---|
| 117 | font-family: 'Tahoma'; |
|---|
| 118 | font-size: 12px; |
|---|
| 119 | color:#fff; |
|---|
| 120 | }<p>.roundedContent { |
|---|
| 121 | padding: 31px; |
|---|
| 122 | font-family: 'Tahoma'; |
|---|
| 123 | font-size: 12px; |
|---|
| 124 | color:#fff; |
|---|
| 125 | }</p><p>.roundedContent { |
|---|
| 126 | padding: 31px; |
|---|
| 127 | font-family: 'Tahoma'; |
|---|
| 128 | font-size: 12px; |
|---|
| 129 | color:#fff; |
|---|
| 130 | }</p><p>.roundedContent { |
|---|
| 131 | padding: 31px; |
|---|
| 132 | font-family: 'Tahoma'; |
|---|
| 133 | font-size: 12px; |
|---|
| 134 | color:#fff; |
|---|
| 135 | }</p><p>.roundedContent { |
|---|
| 136 | padding: 31px; |
|---|
| 137 | font-family: 'Tahoma'; |
|---|
| 138 | font-size: 12px; |
|---|
| 139 | color:#fff; |
|---|
| 140 | }</p><p>.roundedContent { |
|---|
| 141 | padding: 31px; |
|---|
| 142 | font-family: 'Tahoma'; |
|---|
| 143 | font-size: 12px; |
|---|
| 144 | color:#fff; |
|---|
| 145 | }</p><p>.roundedContent { |
|---|
| 146 | padding: 31px; |
|---|
| 147 | font-family: 'Tahoma'; |
|---|
| 148 | font-size: 12px; |
|---|
| 149 | color:#fff; |
|---|
| 150 | }</p><p>.roundedContent { |
|---|
| 151 | padding: 31px; |
|---|
| 152 | font-family: 'Tahoma'; |
|---|
| 153 | font-size: 12px; |
|---|
| 154 | color:#fff; |
|---|
| 155 | }</p><p>.roundedContent { |
|---|
| 156 | padding: 31px; |
|---|
| 157 | font-family: 'Tahoma'; |
|---|
| 158 | font-size: 12px; |
|---|
| 159 | color:#fff; |
|---|
| 160 | }</p><p>.roundedContent { |
|---|
| 161 | padding: 31px; |
|---|
| 162 | font-family: 'Tahoma'; |
|---|
| 163 | font-size: 12px; |
|---|
| 164 | color:#fff; |
|---|
| 165 | }</p><p>.roundedContent { |
|---|
| 166 | padding: 31px; |
|---|
| 167 | font-family: 'Tahoma'; |
|---|
| 168 | font-size: 12px; |
|---|
| 169 | color:#fff; |
|---|
| 170 | }</p><p>.roundedContent { |
|---|
| 171 | padding: 31px; |
|---|
| 172 | font-family: 'Tahoma'; |
|---|
| 173 | font-size: 12px; |
|---|
| 174 | color:#fff; |
|---|
| 175 | }</p> |
|---|
| 176 | |
|---|
| 177 | </div> |
|---|
| 178 | |
|---|
| 179 | |
|---|
| 180 | <div radius="45" style="width:400px; height:200px;" moveable="true" dojoType="my.RoundedContentPane" handle=".myHandle"> |
|---|
| 181 | <h4 class="myHandle" style="cursor:move; margin-top:0; border:1px solid #666">Moveable Handle</h4> |
|---|
| 182 | LOREM, ipsum, dollllllllllor: |
|---|
| 183 | </div> |
|---|
| 184 | |
|---|
| 185 | |
|---|
| 186 | <div dojoType="my.RoundedContentPane" title="Pane 1" moveable="true" style="width:100px; height:100px;"> |
|---|
| 187 | lorem ipsum (small moveable) |
|---|
| 188 | </div> |
|---|
| 189 | |
|---|
| 190 | </body> |
|---|
| 191 | </html> |
|---|
