192 lines
5 KiB
HTML
192 lines
5 KiB
HTML
|
<!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>
|