diff options
Diffstat (limited to 'includes/js/dojox/gfx/demos/roundedPane.html')
| -rw-r--r-- | includes/js/dojox/gfx/demos/roundedPane.html | 191 |
1 files changed, 191 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx/demos/roundedPane.html b/includes/js/dojox/gfx/demos/roundedPane.html new file mode 100644 index 0000000..4abb775 --- /dev/null +++ b/includes/js/dojox/gfx/demos/roundedPane.html @@ -0,0 +1,191 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + + <title>rounded skeleton page | The Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad:true, isDebug:true"></script> + + <script type="text/javascript"> + + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit._Templated"); + dojo.require("dojox.gfx"); + dojo.require("dojo.dnd.TimedMoveable"); + + dojo.declare("my.RoundedContentPane",[dijit.layout.ContentPane,dijit._Templated],{ + // radius: Integer + // radius of the corners + radius:15, + // moveable: Boolean + // if true, the node is movable by either the containerNode, or an optional node + // found by the handle attribute + moveable:false, + // handle: String + // a CSS3 selector query to match the handle for this node, scoped to this.domNode + handle:".handle", + + // template: + templateString: + '<div><div style="position:relative;">' + + '<div dojoAttachPoint="surfaceNode"></div>' + + '<div dojoAttachPoint="containerNode"></div>' + + '</div></div>', + + startup:function(){ + + this.inherited(arguments); + this._initSurface(); + dojo.style(this.surfaceNode,{ + position:"absolute", + top:0, + left:0 + }); + + if(this.moveable){ + this._mover = new dojo.dnd.TimedMoveable(this.domNode,{ + handle: dojo.query(this.handle,this.domNode)[0] ||this.containerNode, + timeout:69 + }); + } + + }, + + _initSurface: function(){ + + var s = dojo.marginBox(this.domNode); + var stroke = 2; + + this.surface = dojox.gfx.createSurface(this.surfaceNode, s.w + stroke * 2, s.h + stroke * 2); + this.roundedShape = this.surface.createRect({ + r: this.radius, + width: s.w, + height: s.h + }) + .setFill([0, 0, 0, 0.5]) // black, 50% transparency + .setStroke({ color:[255,255,255,1], width:stroke }) // solid white + ; + this.resize(s); + + }, + + resize:function(size){ + + if(!this.surface){ this._initSurfce(); } + + this.surface.setDimensions(size.w,size.h); + this.roundedShape.setShape({ + width: size.w, + height: size.h + }); + + var _offset = Math.floor(this.radius / 2); + dojo.style(this.containerNode,{ + color: "#fff", + position: "absolute", + overflow: "auto", + top: _offset + "px", + left: _offset + "px", + height: (size.h - _offset * 2) + "px", + width: (size.w - _offset * 2) + "px" + }); + + } + + }); + </script> + + <style type="text/css"> + body { background:#ededed; } + </style> + + </head> + <body> + + <h1>Some gfx + ContentPane's</h1> + + <div dojoType="my.RoundedContentPane" radius="55" title="Pane 2" style="width:200px; height:400px; float:right"> + <h3>YO!</h3> + <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> + </div> + + <div style="width:400px; height:200px;" dojoType="my.RoundedContentPane"> + LOREM, ipsum, dollllllllllor: + .roundedContent { + padding: 31px; + font-family: 'Tahoma'; + font-size: 12px; + color:#fff; + }<p>.roundedContent { + padding: 31px; + font-family: 'Tahoma'; + font-size: 12px; + color:#fff; + }</p><p>.roundedContent { + padding: 31px; + font-family: 'Tahoma'; + font-size: 12px; + color:#fff; + }</p><p>.roundedContent { + padding: 31px; + font-family: 'Tahoma'; + font-size: 12px; + color:#fff; + }</p><p>.roundedContent { + padding: 31px; + font-family: 'Tahoma'; + font-size: 12px; + color:#fff; + }</p><p>.roundedContent { + padding: 31px; + font-family: 'Tahoma'; + font-size: 12px; + color:#fff; + }</p><p>.roundedContent { + padding: 31px; + font-family: 'Tahoma'; + font-size: 12px; + color:#fff; + }</p><p>.roundedContent { + padding: 31px; + font-family: 'Tahoma'; + font-size: 12px; + color:#fff; + }</p><p>.roundedContent { + padding: 31px; + font-family: 'Tahoma'; + font-size: 12px; + color:#fff; + }</p><p>.roundedContent { + padding: 31px; + font-family: 'Tahoma'; + font-size: 12px; + color:#fff; + }</p><p>.roundedContent { + padding: 31px; + font-family: 'Tahoma'; + font-size: 12px; + color:#fff; + }</p><p>.roundedContent { + padding: 31px; + font-family: 'Tahoma'; + font-size: 12px; + color:#fff; + }</p> + + </div> + + + <div radius="45" style="width:400px; height:200px;" moveable="true" dojoType="my.RoundedContentPane" handle=".myHandle"> + <h4 class="myHandle" style="cursor:move; margin-top:0; border:1px solid #666">Moveable Handle</h4> + LOREM, ipsum, dollllllllllor: + </div> + + + <div dojoType="my.RoundedContentPane" title="Pane 1" moveable="true" style="width:100px; height:100px;"> + lorem ipsum (small moveable) + </div> + + </body> +</html> |