JavaScript DHTML/SmartClient/Vertical Layout

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

Change draggable label layer: to front, go back and move 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.Label.create({
    align:"center", showEdges:true,
    backgroundColor:"lightblue",
    styleName:"blackText",
    contents:"Bottom"
})
isc.Label.create({
    ID:"middleWidget",
    left:60, top:60, align:"center", showEdges:true,
    backgroundColor:"lightgreen",
    styleName:"blackText",
    contents:"Middle"
})
isc.Label.create({
    left:120, top:120, align:"center", showEdges:true,
    backgroundColor:"pink",
    styleName:"blackText",
    contents:"Top"
})
isc.Label.create({
    ID:"dragWidget",
    left:120, top:0, align:"center", showEdges:true,
    backgroundColor:"lightyellow",
    styleName:"blackText",
    contents:"Drag Me",
    canDragReposition:true, dragAppearance:"target"
})
isc.VStack.create({
    left:250, membersMargin:10, members:[
        isc.IButton.create({title:"Front", click:"dragWidget.bringToFront()"}),
        isc.IButton.create({title:"Back", click:"dragWidget.sendToBack()"}),
        isc.IButton.create({title:"Above Middle", click:"dragWidget.moveAbove(middleWidget)"}),
        isc.IButton.create({title:"Below Middle", click:"dragWidget.moveBelow(middleWidget)"})
    ]
})


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



Put a VLayout inside a HLayout

 
<!--
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.HLayout.create({
    width: "100%",
    height: "100%",
    members: [
        isc.Label.create({
            contents: "Navigation",
            align: "center",
            overflow: "hidden",
            width: "30%",
            showResizeBar: true,
            border: "1px solid blue"
        }),
        isc.VLayout.create({
            width: "70%",
            members: [
                isc.Label.create({
                    contents: "Listing",
                    align: "center",
                    overflow: "hidden",
                    height: "30%",
                    showResizeBar: true,
                    border: "1px solid blue"
                }),
                isc.Label.create({
                    contents: "Details",
                    align: "center",
                    overflow: "hidden",
                    height: "70%",
                    border: "1px solid blue"
                })
            ]
        })
    ]
});

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



VLayout Demo

 
<!--
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.defineClass("BlueBox", "Label").addProperties({
    align:"center",
    border:"1px solid #808080",
    backgroundColor:"lightblue",
    styleName:"blackText"
})
isc.HLayout.create({
    width:"100%", height:"100%", membersMargin:20,
    members:[
        isc.VLayout.create({
            showEdges:true,
            width:150,
            membersMargin:5,  layoutMargin:10,
            members:[
                isc.BlueBox.create({height:50, contents:"height 50"}),
                isc.BlueBox.create({height:"*", contents:"height *"}),
                isc.BlueBox.create({height:"30%", contents:"height 30%"})
            ]
        }),      
    ]
})


</SCRIPT>
</BODY>
</HTML>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/SmartClient/Vertical_Layout&oldid=3833»