JavaScript DHTML/SmartClient/Tab Panel
Содержание
- 1 Add canvas to tab panel
- 2 Add canvas to TabSet
- 3 Add or remove a tab
- 4 Add tab to TabSet
- 5 Add ViewLoader to TabSet
- 6 Closable tab
- 7 Get tab length
- 8 Put form controls(labels and textfields) into a tab panel
- 9 Remove tab from TabSet
- 10 Select a tab
- 11 Set view url for a TabSet
- 12 tabBarAlign: bottom
- 13 tabBarAlign: right
- 14 tabBarPosition: left
- 15 tabBarPosition: top
- 16 Use TabSet to hold forms
- 17 Vertical tab
Add canvas to tab panel
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Dynamic Content Loading Example |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
isc.TabSet.create({
top:40, width:400, height:250,
tabs:[
{ title:"Tab1",
pane:isc.Canvas.create({ autoDraw:false, contents:"Contents of Tab1"} )
},
{ title:"Tab2",
pane:isc.HTMLPane.create({
autoDraw:false,
contentsURL:"loaded_content.html",
loadingMessage:"Loading HTML Content.."
})
}
]
}); </SCRIPT> </BODY> </HTML>
</source>
Add canvas to TabSet
<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> Canvas.create({
ID:"pane1", backgroundColor:"red", left:10, top:10, width:200, height:200, autoDraw:false
}); Canvas.create({
ID:"pane2", backgroundColor:"green", left:10, top:10, width:200, height:200, autoDraw:false
}); Canvas.create({
ID:"pane3", backgroundColor:"blue", left:10, top:10, width:200, height:200, autoDraw:false
});
TabSet.create({
ID:"tabSet",
top:50,
left:50,
width:600,
height:400,
selectedTab:0,
tabBarPosition:"top",
tabs:[{title:"red", pane:pane1, width:70},
{title:"green", pane:pane2, width:70},
{title:"blue", pane:pane3, width:70}]
}); </SCRIPT> </BODY> </HTML>
</source>
Add or remove a tab
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.TabSet.create({
ID: "tabSet",
tabBarPosition: "top",
width: 400,
height: 200,
tabs: [
{title: "Blue", canClose: true,
pane: isc.Label.create({contents: "asdf"})},
{title: "Green",
pane: isc.Label.create({contents: "asdf"})}
]
});
isc.IButton.create({
title: "Add Tab",
top: 225,
click: function () {
// alternate between yellow pawn and green cube
if (tabSet.tabs.length % 2 == 0) {
tabSet.addTab({
title: "Yellow",
canClose: true,
pane: isc.Label.create({contents: "asdf"})
});
} else {
tabSet.addTab({
title: "Green",
canClose: true,
pane: isc.Label.create({contents: "asdf"})
});
}
if (tabSet.tabs.length == 1) tabSet.selectTab(0);
}
}); isc.IButton.create({
title: "Remove Tab",
top: 225,
left: 110,
click: function () {
tabSet.removeTab(tabSet.tabs.length-1);
}
});
</SCRIPT> </BODY> </HTML>
</source>
Add tab to TabSet
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.TabSet.create({
ID: "tabSet",
tabBarPosition: "top",
width: 400,
height: 200,
tabs: [
{title: "Blue", pane: Button.create({click:"alert("asdf")",title:"click"})},
{title: "Green", pane: "adsf"}
]
});
isc.IButton.create({
title: "Add Tab",
top: 225,
click: function () {
// alternate between yellow pawn and green cube
if (tabSet.tabs.length % 2 == 0) {
tabSet.addTab({
title: "Yellow",
icon: "pieces/16/pawn_yellow.png",
pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_yellow.png"})
});
} else {
tabSet.addTab({
title: "Green",
icon: "pieces/16/cube_green.png",
pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/cube_green.png"})
});
}
if (tabSet.tabs.length == 1) tabSet.selectTab(0);
}
}); isc.IButton.create({
title: "Remove Tab",
top: 225,
left: 110,
click: function () {
tabSet.removeTab(tabSet.tabs.length-1);
}
});
</SCRIPT> </BODY> </HTML>
</source>
Add ViewLoader to TabSet
<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.TabSet.create({
top:40, width:400, height:250,
tabs:[
{ title:"Tab1",
pane:isc.Canvas.create({ autoDraw:false, contents:"Contents of Tab1"} )
},
{ title:"Tab2",
pane:isc.ViewLoader.create({
autoDraw:false,
viewURL:isc.Page.getIsomorphicDocsDir()+"inlineExamples/advanced/loadedView.js",
loadingMessage:"Loading Grid.."
})
}
]
});
</SCRIPT> </BODY> </HTML>
</source>
Closable tab
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.TabSet.create({
ID: "tabSet",
tabBarPosition: "top",
width: 400,
height: 200,
tabs: [
{title: "Blue", canClose: true,
pane: isc.Label.create({contents: "asdf"})},
{title: "Green",
pane: isc.Label.create({contents: "asdf"})}
]
});
isc.IButton.create({
title: "Add Tab",
top: 225,
click: function () {
// alternate between yellow pawn and green cube
if (tabSet.tabs.length % 2 == 0) {
tabSet.addTab({
title: "Yellow",
canClose: true,
pane: isc.Label.create({contents: "asdf"})
});
} else {
tabSet.addTab({
title: "Green",
canClose: true,
pane: isc.Label.create({contents: "asdf"})
});
}
if (tabSet.tabs.length == 1) tabSet.selectTab(0);
}
}); isc.IButton.create({
title: "Remove Tab",
top: 225,
left: 110,
click: function () {
tabSet.removeTab(tabSet.tabs.length-1);
}
});
</SCRIPT> </BODY> </HTML>
</source>
Get tab length
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.TabSet.create({
ID: "tabSet",
tabBarPosition: "top",
width: 400,
height: 200,
tabs: [
{title: "Blue",
pane: isc.Label.create({contents: "asdf"})},
{title: "Green",
pane: isc.Label.create({contents: "asdf"})}
]
});
isc.IButton.create({
title: "Add Tab",
top: 225,
click: function () {
// alternate between yellow pawn and green cube
if (tabSet.tabs.length % 2 == 0) {
tabSet.addTab({
title: "Yellow",
pane: isc.Label.create({contents: "asdf"})
});
} else {
tabSet.addTab({
title: "Green",
pane: isc.Label.create({contents: "asdf"})
});
}
if (tabSet.tabs.length == 1) tabSet.selectTab(0);
}
}); isc.IButton.create({
title: "Remove Tab",
top: 225,
left: 110,
click: function () {
tabSet.removeTab(tabSet.tabs.length-1);
}
}); </SCRIPT> </BODY> </HTML>
</source>
Put form controls(labels and textfields) into a tab panel
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_History.js></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> DynamicForm.create({
ID:"pane1",
autoDraw:false,
titleOrientation:"top",
itemChange : function () {
Page.setUnloadMessage("Exiting the page now will lose changes");
},
fields:[
{name:"firstName", title:"First Name"},
{name:"lastName", title:"Last Name"}
]
}); DynamicForm.create({
ID:"pane2",
autoDraw:false,
titleOrientation:"top",
itemChange : function () {
Page.setUnloadMessage("Exiting the page now will lose changes");
},
fields:[
{name:"officeNumber", title:"Office Number"},
{name:"mobileNumber", title:"Mobile Number"}
]
}); DynamicForm.create({
ID:"pane3",
autoDraw:false,
titleOrientation:"top",
itemChange : function () {
Page.setUnloadMessage("Exiting the page now will lose changes");
},
fields:[
{name:"address", title:"Street Address"},
{name:"city", title:"City"},
{name:"state", title:"State"},
{name:"zip", title:"Zip"}
]
});
// whenever history is navigated, call this callback isc.History.registerCallback("historyCallback(id)"); // on page load, restore tabset state isc.Page.setEvent("load", "restoreTabSetState()"); function restoreTabSetState() {
isc.Log.logWarn("restoring state");
// if we have history state, our callback will fire. Otherwise, we need to inspect the URL
// to see if there"s history ID in there - this is what happens when the user bookmarks one
// of the history URLs, closes the browser, opens a new one and then navigates to the bookmark.
if (!isc.History.haveHistoryState()) {
tabSet.jumpToTab(isc.History.getCurrentHistoryId() || 0);
}
} function historyCallback(id) {
// the id is the tabNum and null is initial state - which is the first tab. tabSet.jumpToTab(id == null ? 0 : id);
} TabSet.create({
ID:"tabSet",
top:50,
left:50,
width:600,
height:400,
rememberHistory : true,
jumpToTab : function (tabNum) {
this.noHistory = true;
// convert string to number
this.selectTab(new Number(tabNum));
this.noHistory = false;
},
tabSelected : function (tabNum) {
if (!this.noHistory && isc.Page.isLoaded()) isc.History.addHistoryEntry(tabNum);
},
tabs:[{title:"red", pane:pane1, width:70},
{title:"green", pane:pane2, width:70},
{title:"blue", pane:pane3, width:70}]
}); </SCRIPT> </BODY> </HTML>
</source>
Remove tab from TabSet
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT>
</SCRIPT> </BODY> </HTML>
</source>
Select a tab
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.TabSet.create({
ID: "topTabSet",
tabBarPosition: "top",
width: 400,
height: 200,
tabs: [
{title: "Blue",
pane: isc.Label.create({contents: "asdf"})
},
{title: "Green",
pane:isc.Label.create({contents: "asdf"})}
]
}); isc.TabSet.create({
ID:"leftTabSet",
tabBarPosition: "left",
width: 400,
height: 200,
top: 250,
tabs: [
{title: "blue",
pane:isc.Label.create({contents: "asdf"})},
{title: "green",
pane:isc.Label.create({contents: "asdf"})}
]
}); isc.IButton.create({
title: "Select Blue",
top: 215,
click: function () {
topTabSet.selectTab(0);
leftTabSet.selectTab(0);
}
}); isc.IButton.create({
title: "Select Green",
top: 215,
left: 110,
click: function () {
topTabSet.selectTab(1);
leftTabSet.selectTab(1);
}
});
</SCRIPT> </BODY> </HTML>
</source>
Set view url for a TabSet
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Dynamic View Loading Example |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
isc.TabSet.create({
top:40, width:400, height:250,
tabs:[
{ title:"Tab1",
pane:isc.Canvas.create({ autoDraw:false, contents:"Contents of Tab1"} )
},
{ title:"Tab2",
pane:isc.ViewLoader.create({
autoDraw:false,
viewURL:"loaded_view.js",
loadingMessage:"Loading Grid.."
})
}
]
}); </SCRIPT> </BODY> </HTML>
</source>
tabBarAlign: bottom
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.TabSet.create({
ID: "tabSet",
tabBarPosition: "left",
tabBarAlign: "bottom",
width: 300,
height: 200,
tabs: [
{title: "Blue",
pane: isc.Label.create({contents: "asdf"})},
{title: "Green",
pane: isc.Label.create({contents: "asdf"})}
]
}); </SCRIPT> </BODY> </HTML>
</source>
tabBarAlign: right
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.TabSet.create({
ID: "tabSet",
tabBarPosition: "top",
tabBarAlign: "right",
width: 300,
height: 200,
tabs: [
{title: "Blue",
pane: isc.Label.create({contents: "asdf"})},
{title: "Green",
pane: isc.Label.create({contents: "asdf"})}
]
}); </SCRIPT> </BODY> </HTML>
</source>
tabBarPosition: left
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.TabSet.create({
ID: "tabSet",
tabBarPosition: "left",
tabBarAlign: "bottom",
width: 300,
height: 200,
tabs: [
{title: "Blue",
pane: isc.Label.create({contents: "asdf"})},
{title: "Green",
pane: isc.Label.create({contents: "asdf"})}
]
}); </SCRIPT> </BODY> </HTML>
</source>
tabBarPosition: top
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.TabSet.create({
ID: "tabSet",
tabBarPosition: "top",
tabBarAlign: "right",
width: 300,
height: 200,
tabs: [
{title: "Blue",
pane: isc.Label.create({contents: "asdf"})},
{title: "Green",
pane: isc.Label.create({contents: "asdf"})}
]
}); </SCRIPT> </BODY> </HTML>
</source>
Use TabSet to hold forms
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.DynamicForm.create({
ID: "profilePane",
fields: [{
name: "yourName",
title: "Your Name",
type: "text",
change : function (form, item, value) {
if (value) tabSet.setTabTitle(1, value+""s Preferences");
else tabSet.setTabTitle(1, "Preferences");
}
}]
});
isc.DynamicForm.create({
ID: "preferencesPane",
fields: [{
name: "useISCTabs",
title: "Use SmartClient tabs",
type: "checkbox",
defaultValue: true
}]
});
isc.TabSet.create({
ID: "tabSet",
width: 400,
height: 200,
tabs: [{
id: "profile",
title: "Profile",
pane: profilePane
},{
id: "preferences",
title: "Preferences",
pane: preferencesPane
}]
});
</SCRIPT> </BODY> </HTML>
</source>
Vertical tab
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.TabSet.create({
ID: "topTabSet",
tabBarPosition: "top",
width: 400,
height: 200,
tabs: [
{title: "Blue",
pane: isc.Label.create({contents: "asdf"})
},
{title: "Green",
pane:isc.Label.create({contents: "asdf"})}
]
}); isc.TabSet.create({
ID:"leftTabSet",
tabBarPosition: "left",
width: 400,
height: 200,
top: 250,
tabs: [
{title: "blue",
pane:isc.Label.create({contents: "asdf"})},
{title: "green",
pane:isc.Label.create({contents: "asdf"})}
]
}); isc.IButton.create({
title: "Select Blue",
top: 215,
click: function () {
topTabSet.selectTab(0);
leftTabSet.selectTab(0);
}
}); isc.IButton.create({
title: "Select Green",
top: 215,
left: 110,
click: function () {
topTabSet.selectTab(1);
leftTabSet.selectTab(1);
}
});
</SCRIPT> </BODY> </HTML>
</source>
