JavaScript DHTML/Ajax Layer/Button
Button control based on layer
http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - Button</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("dynapi.gui.BorderManager");
dynapi.library.include("Button");
dynapi.library.include("ButtonFlatStyle"); // (optional)
dynapi.library.include("ButtonImageStyle"); // (optional)
</script>
<script language="Javascript">
// Set BlueGel Image Path
// Styles.setImagePath("./dynapiexamples/images/bluegel/");
// Make all buttons use the Flat Style
//Styles.addStyle("Button",FlatButtonStyle);
//var btnStyle = Styles.getStyle("ButtonFlat");
//btnStyle.setStyleAttribute("backColor","#C0C0C0"); // set global style atribute
var btn = new Button("B",300,100,20,20);
var btn2 = new Button("Flat Button 2",300,170,100,30,"ButtonFlat");
var btn3 = new Button("I2",300,130,21,21,"ButtonImage");
dynapi.document.addChild(btn);
dynapi.document.addChild(btn2);
dynapi.document.addChild(btn3);
var cnt=0; // onbuttonclick gives better performance than onclick in IE
btn.onbuttonclick = function(e){
window.status = cnt++;
}
function setButtonStyle(t){
btn.setStyle(t||"Button")
//btn.setLocalStyleAttribute("foreColor","red");
//btn.setEnabled(false);
}
function flatbutton2(t){
// set local back ground color
btn2.setLocalStyleAttribute("backColor","Yellow");
btn2.setLocalStyleAttribute("mOverBackColor","Lime");
btn2.setLocalStyleAttribute("mDownBackColor","#FFCC00");
btn2.setLocalStyleAttribute("fontBold",true);
};
function greenbutton(){
btn3.setStyle("ButtonImage");
btn3.setLocalStyleAttribute("imageOn",dynapi.functions.getImage("./dynapiexamples/images/btn_green_on.gif",22,22));
}
</script>
</head>
<body bgcolor="#FFFFFF">
<p> </p>
<a href="javascript:;" onclick="setButtonStyle("Button")">Standard Button</a><br>
<a href="javascript:;" onclick="setButtonStyle("ButtonFlat")">Flat Button</a><br>
<a href="javascript:;" onclick="setButtonStyle("ButtonImage")">Image Button (Fixed Size)</a><br><br>
<a href="javascript:;" onclick="greenbutton()">Image Button #2 - Green</a><br><br>
<a href="javascript:;" onclick="flatbutton2()">Flat Button #2 - Customized</a><br>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Button widget
http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head><title>DynAPI Tutor - Button widget</title>
<script language="Javascript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
</script>
<script language="Javascript">
//The widget (later we include it as a .js file)
function Button(x,y,w,h,caption) {
this.Dynlayer=DynLayer;
this.Dynlayer(null,x,y,w,h);
this.caption=caption||"";
this.onPreCreate(Button.PreCreate);
this.addEventListener(Button.listener);
}
var p = dynapi.setPrototype("Button","DynLayer");
Button.PreCreate = function() {
this.setBgColor("#c0c0c0") // make the widget look gray
// create child layer for caption
this.addChild(new DynLayer(null,1,1,this.w-2,this.h-2),"dyncaption");
this.dyncaption.setHTML("<center>"+this.caption+"</center>");
// add 3D looking borders at the edges of the widget
this.BorderL=new DynLayer(null,0,0,1,this.h,"#f0f0f0");
this.BorderT=new DynLayer(null,0,0,this.w,1,"#f0f0f0");
this.BorderR=new DynLayer(null,this.w-1,1,1,this.h-1,"#808080");
this.BorderB=new DynLayer(null,1,this.h-1,this.w-1,1,"#808080");
this.addChild(this.BorderL);
this.addChild(this.BorderT);
this.addChild(this.BorderR);
this.addChild(this.BorderB);
this.setVisible(true); // make sure the widget is visible
// add layer for event handling
this.dynevents = new DynLayer(null,0,0,this.w,this.h);
this.addChild(this.dynevents);
}
Button.listener = {
onmousedown : function(e) { // add onmousedown handler
var o=e.getSource();
// switch colors to make the button look pressed
o.BorderL.setBgColor("#808080");
o.BorderR.setBgColor("#f0f0f0");
o.BorderT.setBgColor("#808080");
o.BorderB.setBgColor("#f0f0f0");
},
onmouseup : function(e) {
var o=e.getSource();
// switch colors to make the button look normal
o.BorderL.setBgColor("#f0f0f0");
o.BorderR.setBgColor("#808080");
o.BorderT.setBgColor("#f0f0f0");
o.BorderB.setBgColor("#808080");
o.invokeEvent("pressed"); // new line to invoke the onpressed() event
}
}
myListener = {
onpressed : function(e) {
var o=e.getSource();
alert("You hit "+o.caption+"!")
}
}
myButton=new Button(100,100,80,23,"Ok")
myButton.addEventListener(myListener);
myButton2=new Button(180,100,80,23,"Cancel")
myButton2.addEventListener(myListener);
dynapi.document.addChild(myButton);
dynapi.document.addChild(myButton2);
</script>
</head>
<body bgcolor=#d0d0d0>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
HTML Button
http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - HTML Button</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("TemplateManager");
dynapi.library.include("HTMLButton");
dynapi.library.include("FlashSound");
</script>
<script language="Javascript">
fs = new FlashSound();
fs.setSWF("./dynapiexamples/images/sndfx.swf");
HTMLComponent.setFlashSound(fs); // Set FlashSound object for all HCs
var tp = new Template("This is the Template:<center><form><table border="1" width="150"><tr><td align="center">{@fld}</td></tr></table></form></center>",100,100,250,200,"#EEEEEE");
hb = new HTMLButton(null,"Click Here");
hb.sndOnClick = "/click@start";
hb.addEventListener({
onclick:function(e){
var o=e.getSource();
alert("This is a Button");
}
});
tp.addChild(hb,"fld");
dynapi.document.addChild(tp);
</script>
</head>
<body>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
