You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 lines
5.0 KiB
191 lines
5.0 KiB
<!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" |
|
data-dojo-config="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>
|
|
|