JavaScript DHTML/SmartClient/Horizontal Layout
Содержание
Horizontal layout header
<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> <SCRIPT>
/*----------> SimpleHeader.js <----------*/
isc.defineClass("SimpleHeader", isc.HLayout);
isc.SimpleHeader.addProperties({
// --- Instance Defaults --- width:"100%", // full width height:20, imageSrc:"http://www.wbex.ru/style/logo.png", backgroundColor:"white", imageWidth:18, imageHeight:null, // will use overall widget height if not specified titleText:"Simple Header", titleStyle:"tabTitle", // --- Instance Methods --- initWidget : function () { // call superclass implementation this.Super("initWidget", arguments); // on init, create the parts of this header this.addMembers([ // img for logo image isc.Img.create({ ID:this.getID()+"_image", src:"http://www.wbex.ru/style/logo.png", width:this.imageWidth, height:this.imageHeight || this.getHeight(), layoutAlign:"center" }), // spacer to stretch isc.LayoutSpacer.create({ ID:this.getID()+"_spacer" }), // label for text title this.label = isc.Label.create({ ID:this.getID()+"_title", valign:"center", styleName:this.titleStyle, contents:this.titleText, wrap:false }) ]); }, // --- Dynamic Setters --- setTitleText : function (newTitleText) { this.titleText = newTitleText; this.label.setContents(newTitleText); }, setTitleStyle : function (newTitleStyle) { this.titleStyle = newTitleStyle; this.label.setStyleName(newTitleStyle); }
});
</SCRIPT>
</HEAD><BODY>
<STYLE> .myHeaderTitle {
font-family:Tahoma,Verdana,Helvetica,sans-serif; font-size:18px; font-weight:bold; color:white;
} </STYLE>
<SCRIPT>
Page.setAppImgDir(""); // default "images", but the logo gif is in the same dir in this example SimpleHeader.create({
height:80, imageSrc:"http://www.wbex.ru/style/logo.png", imageWidth:200, titleText:"SimpleHeader example", titleStyle:"myHeaderTitle", backgroundColor:"black", layoutMargin:1
});
</SCRIPT> </BODY> </HTML>
</source>
Label as member in a HLayout
<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.HLayout.create({
width: "100%",
height: "100%",
members: [
isc.Label.create({
contents: "Navigation",
align: "center",
overflow: "hidden",
width: "30%",
showResizeBar: true,
border: "1px solid blue"
}),
]
});
</SCRIPT> </BODY> </HTML>
</source>
Nested HLayout
<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.defineClass("BlueBox", "Label").addProperties({
align:"center", border:"1px solid #808080", backgroundColor:"lightblue", styleName:"blackText"
}) isc.HLayout.create({
width:"100%", height:"100%", membersMargin:20,
members:[
isc.HLayout.create({
showEdges:true,
height:150, membersMargin:5, layoutMargin:10,
members:[
isc.BlueBox.create({width:50, contents:"width 50"}),
isc.BlueBox.create({width:"*", contents:"width *"}),
isc.BlueBox.create({width:"30%", contents:"width 30%"})
]
}),
]
})
</SCRIPT>
</BODY>
</HTML>
</source>
Set layout Margin, member margin, min height and min width
<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.HLayout.create({
width: "80%",
showEdges: true,
edgeImage:"edges/custom/sharpframe_10.png",
dragAppearance: "target",
overflow: "hidden",
canDragResize: true,
resizeFrom: [ "L", "R" ],
layoutMargin: 10,
membersMargin: 10,
minWidth: 100,
minHeight: 50,
members : [
isc.Label.create({
overflow: "hidden",
showEdges: true,
canDragResize: true,
resizeFrom: [ "L", "R" ],
contents: "Member 1",
align: "center"
}),
isc.Label.create({
overflow: "hidden",
showEdges: true,
canDragResize: true,
resizeFrom: [ "L", "R" ],
contents: "Member 2",
align: "center"
})
]
}); </SCRIPT> </BODY> </HTML>
</source>
