JavaScript DHTML/Ajax Layer/Button
Button control based on layer
<source lang="html4strict">
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">
<a href="javascript:;" onclick="setButtonStyle("Button")">Standard Button</a>
<a href="javascript:;" onclick="setButtonStyle("ButtonFlat")">Flat Button</a>
<a href="javascript:;" onclick="setButtonStyle("ButtonImage")">Image Button (Fixed Size)</a>
<a href="javascript:;" onclick="greenbutton()">Image Button #2 - Green</a>
<a href="javascript:;" onclick="flatbutton2()">Flat Button #2 - Customized</a>
<script>
dynapi.document.insertAllChildren();
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Button widget
<source lang="html4strict">
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(" // 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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
HTML Button
<source lang="html4strict">
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:| {@fld} |
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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
