JavaScript DHTML/SmartClient/Menu
Содержание
- 1 Add shortcut key to menu
- 2 CheckBox menu
- 3 Create a File menu
- 4 Create MenuBar from Menu
- 5 Dropdown menu and action listener
- 6 Dynamic menu items
- 7 Listen to showContentMenu event
- 8 Menu item icon, shortcut key, sub menu and checkbox menu
- 9 Menu on click event
- 10 Menu tree
- 11 Menu with icon
- 12 Menu with separator
- 13 sub menu demo
<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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Visual properties menu example |
Isomorphic SmartClient |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<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>
</source>
<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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Visual properties menu example |
Isomorphic SmartClient |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<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>
</source>
<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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Menu initialization example |
Isomorphic SmartClient |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<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>
</source>
Create MenuBar from Menu
<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> 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>
</source>
<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/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>
</source>
<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/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>
</source>
Listen to showContentMenu event
<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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Getting event details |
Isomorphic SmartClient |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<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 = "" + eventName + ":
" + "Global: " + EventHandler.getX() + "," + EventHandler.getY() + "
" + "Local: " + obj.getOffsetX() + "," + obj.getOffsetY() + "
" ; if (EventHandler.rightButtonDown()) result += " (Right Button)"; if (EventHandler.leftButtonDown()) result += " (Left Button)"; if (EventHandler.shiftKeyDown()) result += " (Shift)"; if (EventHandler.ctrlKeyDown()) result += " (Ctrl)"; if (EventHandler.altKeyDown()) result += " (Alt)"; result += "
"; if (redWidget.containsEvent()) result+= " (red widget contains event)
"; if (blueWidget.containsEvent()) result+= " (blue widget contains event)
"; if (greenWidget.containsEvent()) result+= " (green widget contains event)
"; statusArea.setContents(result);
} function clearEventInfo () {
statusArea.setContents("");
} </SCRIPT> </BODY> </HTML>
</source>
<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/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>
</source>
Menu on click event
<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> 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>
</source>
Menu tree
<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/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>
</source>
Menu with icon
<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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Visual properties menu example |
Isomorphic SmartClient |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<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>
</source>
Menu with separator
<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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Visual properties menu example |
Isomorphic SmartClient |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<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>
</source>
<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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Visual properties menu example |
Isomorphic SmartClient |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<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>
</source>
