JavaScript DHTML/SmartClient/Resize
Содержание
child widget used as a "handle" to resize its parent
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> // -------------------------------------------------- // Parent of next widget // -------------------------------------------------- Canvas.create({
ID:"topParent",
left:250,
top:325,
width:100,
height:100,
minWidth:50,
minHeight:50,
overflow:"hidden",
dragAppearance:"target",
contents:"Widget resized by a child widget.",
backgroundColor:"salmon",
layoutChildren:function() {
this.Super("layoutChildren", arguments);
var resizeBox = this.children[0];
resizeBox.moveTo(this.getWidth()-resizeBox.getVisibleWidth(),
this.getHeight()-resizeBox.getVisibleHeight());
}
}); // -------------------------------------------------- // child widget used as a "handle" to resize its parent // -------------------------------------------------- Canvas.create({
ID:"dragResizeBox",
autoDraw:false,
left:50,
top:75,
width:50,
height:25,
contents:"Resize Box",
backgroundColor:"mediumpurple",
canDragResize:true,
dragTarget:"top",
getEventEdge:function(){return "BR"}
}); topParent.addChild(dragResizeBox);
</SCRIPT> </BODY> </HTML>
</source>
Outline Resize widget
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> // -------------------------------------------------- // Outline Resize widget... // -------------------------------------------------- Canvas.create({
ID:"dragOutlineResize", left:250, top:125, width:100, height:100, minHeight:50, minWidth:50, overflow:"hidden", contents:"dragAppearance set to Outline<\/i>.
Can Resize from all corners and sides.", backgroundColor:"gold", canDragResize:true, resizeFrom:null, //All corners/edges dragAppearance:"outline"
});
</SCRIPT> </BODY> </HTML>
</source>
Resize from Left and Right only
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> // -------------------------------------------------- // Resize from Left and Right only // -------------------------------------------------- Canvas.create({
ID:"dragLeftRightResize", left:50, top:325, width:100, height:100, minWidth:50, overflow:"hidden", contents:"dragAppearance unspecified.
Can Resize from left and right sides.", backgroundColor:"lightgreen", canDragResize:true, resizeFrom:["L","R"]
});
</SCRIPT> </BODY> </HTML>
</source>
Resize snap to
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Canvas.create({
ID: "gridCanvas",
autoDraw: false,
backgroundImage: "[SKIN]grid.gif",
border: "1px solid blue",
width: 400,
height: 300,
childrenSnapToGrid: true,
childrenSnapResizeToGrid: true,
overflow: "hidden",
children: [
isc.Label.create({
width: 80, height: 40, align: "center",
contents: "Drag or Resize me",
backgroundColor: "white",
showEdges: true,
canDragReposition: true,
canDragResize: true,
dragAppearance: "target",
keepInParentRect: true
})
]
}); isc.DynamicForm.create({
ID: "gridForm",
width: 400,
values: {snapDrag: true, snapResize: true, hgap: 20, vgap: 20},
numCols: 4,
fields: [{
name: "snapDrag", title: "Enable Snap-To-Grid Move", type: "checkbox",
changed: "gridCanvas.setProperty("childrenSnapToGrid", !gridCanvas.childrenSnapToGrid)"
}, {
name: "snapResize", title: "Enable Snap To Grid Resize", type: "checkbox",
changed: "gridCanvas.setProperty("childrenSnapResizeToGrid", !gridCanvas.childrenSnapResizeToGrid)"
}, {
name: "hgap", title: "Horizontal snap-to gap", type: "radioGroup",
valueMap: {10: "10 pixels", 20: "20 pixels", 50: "50 pixels"},
changed: "gridCanvas.setProperty("snapHGap", Number(this.getValue()))"
}, {
name: "vgap", title: "Vertical snap-to gap", type: "radioGroup",
valueMap: {10: "10 pixels", 20: "20 pixels", 50: "50 pixels"},
changed: "gridCanvas.setProperty("snapVGap", Number(this.getValue()))"
}
]
}); isc.VLayout.create({
membersMargin: 10,
members: [
gridCanvas, gridForm
]
})
</SCRIPT>
</BODY>
</HTML>
</source>
