JavaScript DHTML/Ajax Layer/Button

Материал из Web эксперт
Перейти к: навигация, поиск

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>&nbsp;</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>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Button&oldid=1697»