JavaScript DHTML/SmartClient/Button
Содержание
Button event handler
<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> Label.create({
ID:"results", height:20, width:200, top:300, left:35
}) function showClicked(name) {
results.setContents(name + " clicked");
}
Button.create({
ID:"b1", left:20, top:45, height:50, title:"Button", click:"showClicked(this.title)"
});
Button.create({
ID:"b2", left:140, top:45, height:50, title:"Disabled", click:"showClicked(this.title)", disabled:true
});
Button.create({
ID:"cb1", left:20, top:125, height:50, title:"Checkbox 1", click:"showClicked(this.title);", selected:true, actionType:"checkbox"
});
Button.create({
ID:"cb2", left:140, top:125, height:50, title:"Checkbox 2", click:"showClicked(this.title)", actionType:"checkbox"
});
Button.create({
ID:"cb3", left:260, top:125, height:50, title:"Selected & Disabled", wrap:true, click:"showClicked(this.title)", disabled:true, selected:true, actionType:"checkbox"
});
Button.create({
ID:"rb1", left:20, top:205, height:50, title:"Radio 1", click:"if (selectedButton != this) {selectedButton.deselect(); selectedButton=this}; showClicked(this.title)", selected:true, actionType:"radio"
});
Button.create({
ID:"rb2", left:140, top:205, height:50, title:"Radio 2", click:"if (selectedButton != this) {selectedButton.deselect(); selectedButton=this}; showClicked(this.title)", actionType:"radio"
});
Button.create({
ID:"rb3", left:260, top:205, height:50, title:"Radio 3", click:"if (selectedButton != this) {selectedButton.deselect(); selectedButton=this}; showClicked(this.title)", actionType:"radio"
});
var selectedButton = rb1; </SCRIPT> </BODY> </HTML>
</source>
Button 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/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.IButton.create({
title: "Stretch Button", width: 150, icon: "find.png"
}); isc.Button.create({
left: 200, title: "CSS Button", icon: "yourFile.png"
}); isc.ImgButton.create({
left: 400, width:18, height:18, src:"button.png"
});
</SCRIPT> </BODY> </HTML>
</source>
Change button title
<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.Button.create({
ID: "button1", autoFit: true, autoDraw: false, title: "Find Related",
}); isc.IButton.create({
ID: "button2", autoFit: true, autoDraw: false, title: "Search within results"
}); isc.HStack.create({
membersMargin: 20, height: 24, border: "1px solid blue", members: [ button1, button2 ]
});
isc.Button.create({
title: "Change Title", top: 45, left: 60, click : function () { // have buttons exchange their titles var title1 = button1.getTitle(); button1.setTitle(button2.getTitle()); button2.setTitle(title1); }
});
</SCRIPT>
</BODY>
</HTML>
</source>
Create Button with text label and 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/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Canvas.create({
ID: "cubeBin", top:40, width:400, height:300, showEdges: true
})
isc.IButton.create({
title:"Create", icon:"http://www.wbex.ru/style/logo.png", mouseUp: function () { isc.Img.create({ left: isc.Math.random(340), top: isc.Math.random(240), width:48, height:48, parentElement: cubeBin, src: "http://www.wbex.ru/style/logo.png", click: "this.destroy()" }) }
})
</SCRIPT> </BODY> </HTML>
</source>
Disable and enable a button
<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.IButton.create({
ID: "findButton", width: 120, title: "Find Related", icon: "icons/16/find.png"
}); isc.Button.create({
ID: "saveButton", title: "Save", left: 150, icon: "icons/16/icon_add_files.png", iconOrientation: "right", showDownIcon: true
}); isc.Button.create({
title: "Disable Save", width: 120, left: 60, top: 45, click : function () { if (saveButton.isDisabled()) { saveButton.enable(); this.setTitle("Disable Save"); } else { saveButton.disable(); this.setTitle("Enable Save"); } }
});
</SCRIPT>
</BODY>
</HTML>
</source>
Set icon orientation
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir=".";</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.IButton.create({
title: "Hello", icon: "http://www.wbex.ru/style/logo.png", iconOrientation: "right", click: "isc.say("Hello world!")"
})
</SCRIPT> </BODY> </HTML>
</source>
Standard button and big button
<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">
<style TYPE="text/css">
.bigButton {
font-family:Tahoma,Verdana,Helvetica,sans-serif; font-size:16px; font-weight:bold; color:black; border-left:2px solid #FFFFFF; border-top:2px solid #FFFFFF; border-right:2px solid #808080; border-bottom:2px solid #808080; background-color:#DDDDDD;
} .bigButtonOver {
font-family:Tahoma,Verdana,Helvetica,sans-serif; font-size:16px; font-weight:bold; color:black; border-left:2px solid #FFFFFF; border-top:2px solid #FFFFFF; border-right:2px solid #808080; border-bottom:2px solid #808080; background-color:#CCCCCC;
} .bigButtonSelected {
font-family:Tahoma,Verdana,Helvetica,sans-serif; font-size:16px; font-weight:bold; color:black; border-left:2px solid #808080; border-top:2px solid #808080; border-right:2px solid #FFFFFF; border-bottom:2px solid #FFFFFF; background-color:#DDDDDD;
} .bigButtonDown, .bigButtonSelectedOver, .bigButtonSelectedDown {
font-family:Tahoma,Verdana,Helvetica,sans-serif; font-size:16px; font-weight:bold; color:black; border-left:2px solid #808080; border-top:2px solid #808080; border-right:2px solid #FFFFFF; border-bottom:2px solid #FFFFFF; background-color:#CCCCCC;
} .bigButtonDisabled, .bigButtonSelectedDisabled {
font-family:Tahoma,Verdana,Helvetica,sans-serif; font-size:16px; font-weight:bold; color:#808080; border-left:2px solid #808080; border-top:2px solid #808080; border-right:2px solid #808080; border-bottom:2px solid #808080; background-color:#CCCCCC;
} </style> <SCRIPT>
// create a standard button for comparison Button.create({
left:50, top:50, title:"standard button title"
});
// define a BigButton class (subclass of Button) ClassFactory.defineClass("BigButton", Button);
// change the settings of various Button properties, for BigButton instances BigButton.addProperties({
height:50, overflow:"visible", baseStyle:"bigButton", wrap:true
});
// create a couple of BigButton instances BigButton.create({
left:50, top:100, title:"big button title"
}); BigButton.create({
left:200, top:100, title:"big button with a very very very long title"
});
</SCRIPT> </BODY> </HTML>
</source>