JavaScript DHTML/SmartClient/Menu

Материал из Web эксперт
Версия от 07:27, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Add shortcut key to menu

 
<!--
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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
  Visual properties menu example
</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
  Isomorphic SmartClient
</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>

<!--------------------------
  Example code starts here
---------------------------->
<SCRIPT>
Img.create({
    ID:"widget",
    left:300,
    top:75,
    width:100,
    height:100,
    src:"yinyang.gif"
});
Menu.create({
    ID:"sizeMenu",
    autoDraw:false,
    data:[
        {title:"Small", checkIf:"widget.width == 50", 
         click:"widget.setWidth(50);widget.setHeight(50)", keys:"S"},
        {title:"Medium", checkIf:"widget.width == 100", 
         click:"widget.setWidth(100);widget.setHeight(100)", keys:"M"},
        {title:"Large", checkIf:"widget.width == 200", 
         click:"widget.setWidth(200);widget.setHeight(200)", keys:"L"}
    ],
    width:150
});

Menu.create({
    ID:"moveMenu",
    autoDraw:false,
    width:150,
    data:[
        {title:"Up", click:"widget.moveBy(0,-20)", keys:"U"},
        {title:"Right", click:"widget.moveBy(20,0)", keys:"K"},
        {title:"Down", click:"widget.moveBy(0,20)", keys:"J"},
        {title:"Left", click:"widget.moveBy(-20,0)", keys:"H"}
    ]
});

Menu.create({
    ID:"mainMenu",
    width:150,
    data:[
        {title:"Visible",    keys:"V",
            checkIf:"widget.isVisible()",
            click:"widget.isVisible() ? widget.hide() : widget.show()"
        },
        {isSeparator:true},
        {title:"Size", submenu:sizeMenu, enableIf:"widget.isVisible()"    },
        {title:"Move", submenu:moveMenu,    enableIf:"widget.isVisible()"    },
        {isSeparator:true},
        {title:"Reset",
            click:"widget.setRect(300,75,100,100); widget.show()",
            icon:"yinyang_icon.gif",
            iconWidth:20,
            iconHeight:20,
            keys:{keyName:"R", shiftKey:true},
            keyTitle:"Shift-R"
        }
    ]
});
MenuButton.create({
    ID:"mainMenuButton",
    title:"Widget",
    left:50,
    top:75,
    width:150,
    menu:mainMenu
});
// Set the menu as a context menu for the widget.
widget.contextMenu = mainMenu;
</SCRIPT>
</BODY>
</HTML>



CheckBox menu

 
<!--
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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
  Visual properties menu example
</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
  Isomorphic SmartClient
</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>

<!--------------------------
  Example code starts here
---------------------------->
<SCRIPT>
Img.create({
    ID:"widget",
    left:300,
    top:75,
    width:100,
    height:100,
    src:"yinyang.gif"
});
Menu.create({
    ID:"sizeMenu",
    autoDraw:false,
    data:[
        {title:"Small", checkIf:"widget.width == 50", 
         click:"widget.setWidth(50);widget.setHeight(50)", keys:"S"},
        {title:"Medium", checkIf:"widget.width == 100", 
         click:"widget.setWidth(100);widget.setHeight(100)", keys:"M"},
        {title:"Large", checkIf:"widget.width == 200", 
         click:"widget.setWidth(200);widget.setHeight(200)", keys:"L"}
    ],
    width:150
});

Menu.create({
    ID:"moveMenu",
    autoDraw:false,
    width:150,
    data:[
        {title:"Up", click:"widget.moveBy(0,-20)", keys:"U"},
        {title:"Right", click:"widget.moveBy(20,0)", keys:"K"},
        {title:"Down", click:"widget.moveBy(0,20)", keys:"J"},
        {title:"Left", click:"widget.moveBy(-20,0)", keys:"H"}
    ]
});

Menu.create({
    ID:"mainMenu",
    width:150,
    data:[
        {title:"Visible",    keys:"V",
            checkIf:"widget.isVisible()",
            click:"widget.isVisible() ? widget.hide() : widget.show()"
        },
        {isSeparator:true},
        {title:"Size", submenu:sizeMenu, enableIf:"widget.isVisible()"    },
        {title:"Move", submenu:moveMenu,    enableIf:"widget.isVisible()"    },
        {isSeparator:true},
        {title:"Reset",
            click:"widget.setRect(300,75,100,100); widget.show()",
            icon:"yinyang_icon.gif",
            iconWidth:20,
            iconHeight:20,
            keys:{keyName:"R", shiftKey:true},
            keyTitle:"Shift-R"
        }
    ]
});
MenuButton.create({
    ID:"mainMenuButton",
    title:"Widget",
    left:50,
    top:75,
    width:150,
    menu:mainMenu
});
// Set the menu as a context menu for the widget.
widget.contextMenu = mainMenu;
</SCRIPT>
</BODY>
</HTML>



Create a File menu

 
<!--
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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
  Menu initialization example
</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
  Isomorphic SmartClient
</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>

<!--------------------------
  Example code starts here
---------------------------->
<SCRIPT>
var recentMenuItems = [
    {title:"File 1"},
    {title:"File 2"},
    {title:"File 3"}
];
Menu.create({
    ID:"recentMenu",
    autoDraw:false,
    width:100,
    data:recentMenuItems
});

var fileMenuItems = [
    {title:"New..."},
    {isSeparator:true},
    {title:"Open..."},
    {title:"Recent Files", submenu:recentMenu},
    {isSeparator:true},
    {title:"Save..."},
    {title:"Save As..."},
    {isSeparator:true},
    {title:"Exit"}
];
Menu.create({
    ID:"fileMenu",
    width:150,
    data:fileMenuItems
});
MenuButton.create({
    left:50,
    top:75,
    width:150,
    title:"File",
    menu:fileMenu
});

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



Create MenuBar from Menu

 
<!--
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>
Img.create({
    ID:"widget",
    autoDraw:false,
    left:200,
    top:60,
    width:100,
    height:100,
    src:"yinyang.gif"
});
Canvas.create({
    ID:"boundingBox",
    autoDraw:false,
    height:260,
    backgroundColor:"white",
    children:[widget]
});
Menu.create({
    ID:"imageMenu",
    autoDraw:false,
    cellHeight:18,
    menuButtonWidth:60,
    data:[
    {title:"Visible",    keys:"V",
    checkIf:"widget.isVisible()",
    click:"widget.isVisible() ? widget.hide() : widget.show()"
    },
    {title:"Reset",
    click:"widget.setRect(200,60,100,100); widget.show()",
    icon:"yinyang_icon.gif",
    iconWidth:20,
    iconHeight:20,
    keys:{keyName:"R", shiftKey:true},
    keyTitle:"Shift-R"
    }
    ],
    title:"Image"
});
Menu.create({
    ID:"sizeMenu",
    autoDraw:false,
    cellHeight:18,
    menuButtonWidth:60,
    data: [
    {title:"Small", checkIf:"widget.getWidth() == 50", 
     click:"widget.resizeTo(50, 50);widget.moveTo(225, 100);", 
     keys:"S", enableIf:"widget.isVisible()"},
    {title:"Medium", checkIf:"widget.getWidth() == 100", 
     click:"widget.resizeTo(100, 100);widget.moveTo(200, 80);", 
     keys:"M", enableIf:"widget.isVisible()"},
    {title:"Large", checkIf:"widget.getWidth() == 200", 
     click:"widget.resizeTo(200, 200);widget.moveTo(150, 25);", 
     keys:"L", enableIf:"widget.isVisible()"}
    ],    
    title:"Size"
});
Menu.create({
    ID:"positionMenu",
    autoDraw:false,
    cellHeight:18,
    menuButtonWidth:60,
    data:[
    {title:"Up", click:"moveUp()", keys:"U", enableIf:"widget.isVisible()"},
    {title:"Right", click:"moveRight()", keys:"K", enableIf:"widget.isVisible()"},
    {title:"Down", click:"moveDown()", keys:"J", enableIf:"widget.isVisible()"},
    {title:"Left", click:"moveLeft()", keys:"H", enableIf:"widget.isVisible()"}
    ],
    title:"Position"
});
Menubar.create({
    ID:"menuBar",
    autoDraw:false,
    backgroundColor:"#CCCCCC",
    menus:[imageMenu, sizeMenu, positionMenu]
});
VStack.create({
    top:75, left:50, width:500,
    members:[menuBar, boundingBox]
});
function moveUp() {
    if (widget.getTop() >= 20) 
    widget.moveBy(0,-20);    
}
function moveRight() {
    if (widget.getLeft() <= (480 - widget.getWidth())) 
    widget.moveBy(20,0);
}
function moveDown() {
    if (widget.getTop() <= (240 - widget.getHeight())) 
    widget.moveBy(0,20);
}
function moveLeft() {
    if (widget.getLeft() >= 20) 
    widget.moveBy(-20,0);
}
</SCRIPT>
</BODY>
</HTML>



Dropdown menu and action listener

 
<!--
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/system/modules/ISC_Calendar.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT>
isc.Menu.create({
    ID:"customColumnMenu",
    fields:[
        // standard title field
        "title", 
        // Special close icon field
        {name:"canDismiss", width:16, 
         showValueIconOnly:true,
         valueIcons:{
            "true":"icons/16/close.png"
         }
        }
    ],
    data:[
        {name:"Item 1"},
        {name:"Item 2", canDismiss:true},
        {name:"Item 3", canDismiss:true}
    ],
    itemClick: function (item, colNum) {
        if (colNum == 1 && item.canDismiss) {
            this.removeItem(item);
        } else {
            isc.say("You Selected "" + item.name + "".");
        }
    }
});
isc.MenuButton.create({
    title:"Show Menu",
    menu:customColumnMenu
})    
</SCRIPT>
</BODY>
</HTML>



Dynamic menu items

 
<!--
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/system/modules/ISC_Calendar.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT>
isc.ListGrid.create({
    ID: "listGrid",
    width: 130,
    fields: [
        {name: "project", title: "Project", type: "text"}
    ],
    data: [
        {project: "AJAX Interface"},
        {project: "Simplify Backend"},
        {project: "Broaden Reach"}
    ]
});
isc.Menu.create({
    ID: "menu",
    autoDraw: false,
    showShadow: true,
    shadowDepth: 10,
    data: [
        {keyTitle: "Ctrl+N",
         enableIf: "listGrid.getSelectedRecord() != null",
         dynamicTitle: ""New file in" + (listGrid.getSelectedRecord() == null ? "..." : " "+listGrid.getSelectedRecord().project)",
         dynamicIcon: "listGrid.getSelectedRecord() == null ? "icons/16/document_plain_new_Disabled.png" : "icons/16/document_plain_new.png""
        },
        {title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
        {isSeparator: true},
        {title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
        {title: "Save As", icon: "icons/16/save_as.png"},
        {isSeparator: true},
        {title: "Project Listing", checkIf: "listGrid.isVisible()",
         click: "listGrid.isVisible() ? listGrid.hide() : listGrid.show()"}
    ]
});
isc.MenuButton.create({
    ID: "menuButton",
    title: "File",
    width: 100,
    left: 150,
    menu: menu
});

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



Listen to showContentMenu event

 
<!--
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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
  Getting event details
</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
  Isomorphic SmartClient
</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>

<!--------------------------
  Example code starts here
---------------------------->
<SCRIPT>
Canvas.create({
    ID:"redWidget",
    left:50,
    top:75,
    width:100,
    height:100,
    contents:"show mouseDown details",
    backgroundColor:"red",
    mouseDown:"showEventInfo("mouseDown", this)",
    mouseOut:"clearEventInfo()"
});
Canvas.create({
    ID:"blueWidget",
    left:100,
    top:125,
    width:100,
    height:100,
    contents:"show mouseUp details",
    backgroundColor:"blue",
    mouseUp:"showEventInfo("mouseUp", this)",
    // showContextMenu event triggered by right mouse button coming up.
    // Note: We return false to prevent the native browser context menu from being displayed.
    showContextMenu:"showEventInfo("showContextMenu", this); return false;",
    mouseOut:"clearEventInfo()"
});
Canvas.create({
    ID:"greenWidget",
    left:150,
    top:175,
    width:100,
    height:100,
    contents:"show mouseMove details",
    backgroundColor:"green",
    mouseMove:"showEventInfo("mouseMove", this)",
    mouseOut:"clearEventInfo()"
});
Label.create({
    ID:"statusArea",
    top:100,
    left:300,
    width:250,
    height:125,
    overflow:"hidden",
    backgroundColor:"white",
    border:"1px solid black",
    valign:"top",
    padding:3
});

function showEventInfo(eventName, obj) {
    var result = "<b>" + eventName + ":</b><br>" + 
                 "Global: " + EventHandler.getX() + "," + EventHandler.getY() + "<br>" +
                 "Local: " + obj.getOffsetX() + "," + obj.getOffsetY() + "<br>"
    ;
    if (EventHandler.rightButtonDown()) result += "&nbsp;&nbsp;(Right Button)";
    if (EventHandler.leftButtonDown()) result += "&nbsp;&nbsp;(Left Button)";
    if (EventHandler.shiftKeyDown()) result += "&nbsp;&nbsp;(Shift)";
    if (EventHandler.ctrlKeyDown()) result += "&nbsp;&nbsp;(Ctrl)";
    if (EventHandler.altKeyDown()) result += "&nbsp;&nbsp;(Alt)";
    result += "<br><br>";
    if (redWidget.containsEvent()) result+= "&nbsp;&nbsp;<i>(red widget contains event)</i><br>";
    if (blueWidget.containsEvent()) result+= "&nbsp;&nbsp;<i>(blue widget contains event)</i><br>";
    if (greenWidget.containsEvent()) result+= "&nbsp;&nbsp;<i>(green widget contains event)</i><br>";
    statusArea.setContents(result);
}
function clearEventInfo () {
    statusArea.setContents("");
}
</SCRIPT>
</BODY>
</HTML>



Menu item icon, shortcut key, sub menu and checkbox menu

 
<!--
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/system/modules/ISC_Calendar.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT>
isc.Menu.create({
    ID: "menu",
    autoDraw: false,
    showShadow: true,
    shadowDepth: 10,
    data: [
        {title: "New", keyTitle: "Ctrl+N", icon: "icons/16/document_plain_new.png"},
        {title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
        {isSeparator: true},
        {title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
        {title: "Save As", icon: "icons/16/save_as.png"},
        {isSeparator: true},
        {title: "Recent Documents", icon: "icons/16/folder_document.png", submenu: [
            {title: "data.xml", checked: true},
            {title: "Component Guide.doc"},
            {title: "SmartClient.doc", checked: true},
            {title: "AJAX.doc"}
        ]},
        {isSeparator: true},
        {title: "Export as...", icon: "icons/16/export1.png", submenu: [
            {title: "XML"},
            {title: "CSV"},
            {title: "Plain text"}
        ]},
        {isSeparator: true},
        {title: "Print", enabled: false, keyTitle: "Ctrl+P", icon: "icons/16/printer3.png"}
    ]
});
isc.MenuButton.create({
    ID: "menuButton",
    title: "File",
    width: 100,
    menu: menu
});

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



Menu on click event

 
<!--
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>
Img.create({
    ID:"widget",
    autoDraw:false,
    left:200,
    top:60,
    width:100,
    height:100,
    src:"yinyang.gif"
});
Canvas.create({
    ID:"boundingBox",
    autoDraw:false,
    height:260,
    backgroundColor:"white",
    children:[widget]
});
Menu.create({
    ID:"imageMenu",
    autoDraw:false,
    cellHeight:18,
    menuButtonWidth:60,
    data:[
    {title:"Visible",    keys:"V",
    checkIf:"widget.isVisible()",
    click:"widget.isVisible() ? widget.hide() : widget.show()"
    },
    {title:"Reset",
    click:"widget.setRect(200,60,100,100); widget.show()",
    icon:"yinyang_icon.gif",
    iconWidth:20,
    iconHeight:20,
    keys:{keyName:"R", shiftKey:true},
    keyTitle:"Shift-R"
    }
    ],
    title:"Image"
});
Menu.create({
    ID:"sizeMenu",
    autoDraw:false,
    cellHeight:18,
    menuButtonWidth:60,
    data: [
    {title:"Small", checkIf:"widget.getWidth() == 50", 
     click:"widget.resizeTo(50, 50);widget.moveTo(225, 100);", 
     keys:"S", enableIf:"widget.isVisible()"},
    {title:"Medium", checkIf:"widget.getWidth() == 100", 
     click:"widget.resizeTo(100, 100);widget.moveTo(200, 80);", 
     keys:"M", enableIf:"widget.isVisible()"},
    {title:"Large", checkIf:"widget.getWidth() == 200", 
     click:"widget.resizeTo(200, 200);widget.moveTo(150, 25);", 
     keys:"L", enableIf:"widget.isVisible()"}
    ],    
    title:"Size"
});
Menu.create({
    ID:"positionMenu",
    autoDraw:false,
    cellHeight:18,
    menuButtonWidth:60,
    data:[
    {title:"Up", click:"moveUp()", keys:"U", enableIf:"widget.isVisible()"},
    {title:"Right", click:"moveRight()", keys:"K", enableIf:"widget.isVisible()"},
    {title:"Down", click:"moveDown()", keys:"J", enableIf:"widget.isVisible()"},
    {title:"Left", click:"moveLeft()", keys:"H", enableIf:"widget.isVisible()"}
    ],
    title:"Position"
});
Menubar.create({
    ID:"menuBar",
    autoDraw:false,
    backgroundColor:"#CCCCCC",
    menus:[imageMenu, sizeMenu, positionMenu]
});
VStack.create({
    top:75, left:50, width:500,
    members:[menuBar, boundingBox]
});
function moveUp() {
    if (widget.getTop() >= 20) 
    widget.moveBy(0,-20);    
}
function moveRight() {
    if (widget.getLeft() <= (480 - widget.getWidth())) 
    widget.moveBy(20,0);
}
function moveDown() {
    if (widget.getTop() <= (240 - widget.getHeight())) 
    widget.moveBy(0,20);
}
function moveLeft() {
    if (widget.getLeft() >= 20) 
    widget.moveBy(-20,0);
}
</SCRIPT>
</BODY>
</HTML>



Menu tree

 
<!--
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/system/modules/ISC_Calendar.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT>
isc.Tree.create({
    ID: "menuTree",
    root: {name: "root", children: [
        {name: "Marketing", children: [
            {name: "Advertising"},
            {name: "Community Relations"}
        ]},
        {name: "Sales", children: [
            {name: "Channel Sales"},
            {name: "Direct Sales"}
        ]},
        {name: "Manufacturing", children: [
            {name: "Design"},
            {name: "Development"},
            {name: "QA"}
        ]},
        {name: "Services", children: [
            {name: "Support"},
            {name: "Consulting"}
        ]}
    ]}
});
isc.MenuButton.create({
    title: "Go to department",
    width: 140,
    menu: isc.Menu.create({
        data: menuTree,
        canSelectParentItems: true,
        itemClick: function (item) {
            isc.say("You picked the \""+item.name+"\" department.");
        }
    })
});
isc.MenuButton.create({
    title: "Go to category",
    width: 140,
    top: 30,
    menu: isc.Menu.create({
        dataSource: "supplyCategory",
        canSelectParentItems: true,
        itemClick: function (item) { 
            isc.say("You picked the \""+item.categoryName+"\" category.");
        }
    })
});


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



Menu with icon

 
<!--
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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
  Visual properties menu example
</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
  Isomorphic SmartClient
</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>

<!--------------------------
  Example code starts here
---------------------------->
<SCRIPT>
Img.create({
    ID:"widget",
    left:300,
    top:75,
    width:100,
    height:100,
    src:"yinyang.gif"
});
Menu.create({
    ID:"sizeMenu",
    autoDraw:false,
    data:[
        {title:"Small", checkIf:"widget.width == 50", 
         click:"widget.setWidth(50);widget.setHeight(50)", keys:"S"},
        {title:"Medium", checkIf:"widget.width == 100", 
         click:"widget.setWidth(100);widget.setHeight(100)", keys:"M"},
        {title:"Large", checkIf:"widget.width == 200", 
         click:"widget.setWidth(200);widget.setHeight(200)", keys:"L"}
    ],
    width:150
});

Menu.create({
    ID:"moveMenu",
    autoDraw:false,
    width:150,
    data:[
        {title:"Up", click:"widget.moveBy(0,-20)", keys:"U"},
        {title:"Right", click:"widget.moveBy(20,0)", keys:"K"},
        {title:"Down", click:"widget.moveBy(0,20)", keys:"J"},
        {title:"Left", click:"widget.moveBy(-20,0)", keys:"H"}
    ]
});

Menu.create({
    ID:"mainMenu",
    width:150,
    data:[
        {title:"Visible",    keys:"V",
            checkIf:"widget.isVisible()",
            click:"widget.isVisible() ? widget.hide() : widget.show()"
        },
        {isSeparator:true},
        {title:"Size", submenu:sizeMenu, enableIf:"widget.isVisible()"    },
        {title:"Move", submenu:moveMenu,    enableIf:"widget.isVisible()"    },
        {isSeparator:true},
        {title:"Reset",
            click:"widget.setRect(300,75,100,100); widget.show()",
            icon:"yinyang_icon.gif",
            iconWidth:20,
            iconHeight:20,
            keys:{keyName:"R", shiftKey:true},
            keyTitle:"Shift-R"
        }
    ]
});
MenuButton.create({
    ID:"mainMenuButton",
    title:"Widget",
    left:50,
    top:75,
    width:150,
    menu:mainMenu
});
// Set the menu as a context menu for the widget.
widget.contextMenu = mainMenu;
</SCRIPT>
</BODY>
</HTML>



Menu with separator

 
<!--
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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
  Visual properties menu example
</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
  Isomorphic SmartClient
</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>

<!--------------------------
  Example code starts here
---------------------------->
<SCRIPT>
Img.create({
    ID:"widget",
    left:300,
    top:75,
    width:100,
    height:100,
    src:"yinyang.gif"
});
Menu.create({
    ID:"sizeMenu",
    autoDraw:false,
    data:[
        {title:"Small", checkIf:"widget.width == 50", 
         click:"widget.setWidth(50);widget.setHeight(50)", keys:"S"},
        {title:"Medium", checkIf:"widget.width == 100", 
         click:"widget.setWidth(100);widget.setHeight(100)", keys:"M"},
        {title:"Large", checkIf:"widget.width == 200", 
         click:"widget.setWidth(200);widget.setHeight(200)", keys:"L"}
    ],
    width:150
});

Menu.create({
    ID:"moveMenu",
    autoDraw:false,
    width:150,
    data:[
        {title:"Up", click:"widget.moveBy(0,-20)", keys:"U"},
        {title:"Right", click:"widget.moveBy(20,0)", keys:"K"},
        {title:"Down", click:"widget.moveBy(0,20)", keys:"J"},
        {title:"Left", click:"widget.moveBy(-20,0)", keys:"H"}
    ]
});

Menu.create({
    ID:"mainMenu",
    width:150,
    data:[
        {title:"Visible",    keys:"V",
            checkIf:"widget.isVisible()",
            click:"widget.isVisible() ? widget.hide() : widget.show()"
        },
        {isSeparator:true},
        {title:"Size", submenu:sizeMenu, enableIf:"widget.isVisible()"    },
        {title:"Move", submenu:moveMenu,    enableIf:"widget.isVisible()"    },
        {isSeparator:true},
        {title:"Reset",
            click:"widget.setRect(300,75,100,100); widget.show()",
            icon:"yinyang_icon.gif",
            iconWidth:20,
            iconHeight:20,
            keys:{keyName:"R", shiftKey:true},
            keyTitle:"Shift-R"
        }
    ]
});
MenuButton.create({
    ID:"mainMenuButton",
    title:"Widget",
    left:50,
    top:75,
    width:150,
    menu:mainMenu
});
// Set the menu as a context menu for the widget.
widget.contextMenu = mainMenu;
</SCRIPT>
</BODY>
</HTML>



sub menu 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/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
  Visual properties menu example
</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
  Isomorphic SmartClient
</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>

<!--------------------------
  Example code starts here
---------------------------->
<SCRIPT>
Img.create({
    ID:"widget",
    left:300,
    top:75,
    width:100,
    height:100,
    src:"yinyang.gif"
});
Menu.create({
    ID:"sizeMenu",
    autoDraw:false,
    data:[
        {title:"Small", checkIf:"widget.width == 50", 
         click:"widget.setWidth(50);widget.setHeight(50)", keys:"S"},
        {title:"Medium", checkIf:"widget.width == 100", 
         click:"widget.setWidth(100);widget.setHeight(100)", keys:"M"},
        {title:"Large", checkIf:"widget.width == 200", 
         click:"widget.setWidth(200);widget.setHeight(200)", keys:"L"}
    ],
    width:150
});

Menu.create({
    ID:"moveMenu",
    autoDraw:false,
    width:150,
    data:[
        {title:"Up", click:"widget.moveBy(0,-20)", keys:"U"},
        {title:"Right", click:"widget.moveBy(20,0)", keys:"K"},
        {title:"Down", click:"widget.moveBy(0,20)", keys:"J"},
        {title:"Left", click:"widget.moveBy(-20,0)", keys:"H"}
    ]
});

Menu.create({
    ID:"mainMenu",
    width:150,
    data:[
        {title:"Visible",    keys:"V",
            checkIf:"widget.isVisible()",
            click:"widget.isVisible() ? widget.hide() : widget.show()"
        },
        {isSeparator:true},
        {title:"Size", submenu:sizeMenu, enableIf:"widget.isVisible()"    },
        {title:"Move", submenu:moveMenu,    enableIf:"widget.isVisible()"    },
        {isSeparator:true},
        {title:"Reset",
            click:"widget.setRect(300,75,100,100); widget.show()",
            icon:"yinyang_icon.gif",
            iconWidth:20,
            iconHeight:20,
            keys:{keyName:"R", shiftKey:true},
            keyTitle:"Shift-R"
        }
    ]
});
MenuButton.create({
    ID:"mainMenuButton",
    title:"Widget",
    left:50,
    top:75,
    width:150,
    menu:mainMenu
});
// Set the menu as a context menu for the widget.
widget.contextMenu = mainMenu;
</SCRIPT>
</BODY>
</HTML>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/SmartClient/Menu&oldid=3745»