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>