JavaScript DHTML/SmartClient/Resize

Материал из Web эксперт
Перейти к: навигация, поиск

child widget used as a "handle" to resize its parent

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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>



Outline Resize widget

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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 <i>Outline<\/i>.<br>Can Resize from all corners and sides.",
    backgroundColor:"gold",
    canDragResize:true,
    resizeFrom:null,    //All corners/edges
    dragAppearance:"outline"
});

</SCRIPT>
</BODY>
</HTML>



Resize from Left and Right only

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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.<br>Can Resize from left and right sides.",
    backgroundColor:"lightgreen",
    canDragResize:true,
    resizeFrom:["L","R"]
});

</SCRIPT>
</BODY>
</HTML>



Resize snap to

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/SmartClient/Resize&oldid=3847»