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, 0 insertions, 191 deletions
diff --git a/includes/js/dojox/gfx/demos/roundedPane.html b/includes/js/dojox/gfx/demos/roundedPane.html deleted file mode 100644 index 4abb775..0000000 --- a/includes/js/dojox/gfx/demos/roundedPane.html +++ /dev/null @@ -1,191 +0,0 @@ -<!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> |