JavaScript DHTML/Ajax Layer/Layer Container

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

Container 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 - HTML Container</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("HTMLContainer"); </script> <script language="Javascript">

var tp = new Template("This is the Template:
Some text {@fld} More text
",100,100,250,200,"lime");

var hc = new HTMLContainer(null,"Hello World",180,50) tp.addChild(hc,"fld"); dynapi.document.addChild(tp); setTimeout(tp.fld+".setHTML("Hello World From
HTMLContainer")",1200); </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>


Image in Frame

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI - Image Frame</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.functions.Image"); dynapi.library.include("dynapi.gui.Frame"); dynapi.library.include("dynapi.gui.BorderManager"); dynapi.library.include("dynapi.gui.TemplateManager"); </script> <script language="Javascript"> var doc=dynapi.document; var p="./dynapiexamples/images/"; var f=dynapi.functions; var fN=f.getImage(p+"f1-n.jpg",100,17), fE=f.getImage(p+"f1-e.jpg",17,100), fS=f.getImage(p+"f1-s.jpg",100,17), fW=f.getImage(p+"f1-w.jpg",17,100); var fNE=f.getImage(p+"f1-ne.jpg",17,17), fSE=f.getImage(p+"f1-se.jpg",17,17), fSW=f.getImage(p+"f1-sw.jpg",17,17), fNW=f.getImage(p+"f1-nw.jpg",17,17); var fa=[ // Array of frame styles to choose from. 

 {w:2, s:"red"},
 {w:2, s:["white","black","black","white"]},
 {w:2, s:["black","white","white","black"]},
 {w:[1,0,3,4], s:["red","yellow","green","blue"]},
 {w:[2,2,0,0], s:["yellow","blue"]},
 {w:2, s:["red","green"]},
 {w:[2,0,0,2], s:"blue"},
 {w:[0,2,4,0], s:"red"},
 {w:[0,0,2,2], s:"blue"},
 {w:[0,0,2], s:"red"},
 {w:1},
 {}

]; // Frame style with image sides and corners. var albumFrame=doc.addChild(new Frame(17,[fN.src,fE.src,fS.src,fW.src],[fNE.src,fSE.src,fSW.src,fNW.src])); albumFrame.setBgColor("#c4c2c7"); var albumHTML=[

"", "", "", "", "", "", "
Click on an image to cycle it\"s frame.
{@thumb0}{@thumb1}{@thumb2}{@thumb3}{@thumb4}
{@thumb5}{@thumb6}{@thumb7}{@thumb8}{@thumb9}
{@thumb10}{@thumb11}{@thumb12}{@thumb13}{@thumb14}
{@thumb15}{@thumb16}{@thumb17}{@thumb18}{@thumb19}
"

]; var albumTemplate=new Template(albumHTML.join(""),10,10,250,220); albumFrame.addContent(albumTemplate); albumFrame.setSize(300,270); var album=[ {thumb:p+"arrowdown.gif",tw:9,th:5}, {thumb:p+"arrowleft.gif",tw:5,th:9}, {thumb:p+"arrowright.gif",tw:5,th:9}, {thumb:p+"arrowup.gif",tw:9,th:5}, {thumb:p+"left.gif",tw:20,th:22}, {thumb:p+"btn_delete.gif",tw:25,th:22}, {thumb:p+"btn_first.gif",tw:25,th:22}, {thumb:p+"btn_last.gif",tw:25,th:22}, {thumb:p+"btn_new.gif",tw:25,th:22}, {thumb:p+"btn_next.gif",tw:25,th:22}, {thumb:p+"btn_prev.gif",tw:25,th:22}, {thumb:p+"btn_save.gif",tw:25,th:22}, {thumb:p+"btn_undo.gif",tw:25,th:22}, {thumb:p+"calc.gif",tw:32,th:32}, {thumb:p+"eicon1.gif",tw:32,th:32}, {thumb:p+"eicon2.gif",tw:32,th:32}, {thumb:p+"eicon3.gif",tw:32,th:32}, {thumb:p+"bin_full.gif",tw:32,th:32}, {thumb:p+"bin_off.gif",tw:32,th:32}, {thumb:p+"bin_on.gif",tw:32,th:32} ]; var n, a, img, frame, length=album.length; for(n=0;n<length;n++) { 

 a=album[n];
 img=f.getImage(a.thumb,a.tw,a.th);
 frame = albumTemplate.addChild(new Frame(fa[0].w,fa[0].s),"thumb"+n)
 frame.addContent(new DynLayer(img.getHTML(),null,null,img.w,img.h));
 frame._fImage=img;
 img._fFrame=frame;
 a.frame=frame;
 frame.addEventListener({
   onclick:function(e){
     var o=e.getSource();
     o._fState=(o._fState<fa.length-1)?o._fState+1:0;
     o.setBorder(fa[o._fState].w,fa[o._fState].s);
   }
 });

} function futureSetBorder(frame,style) { 

 frame._fState=style;
 var rand=Math.floor(100+Math.random()*(500-101)); // 100ms to 500ms
 setTimeout(frame+".setBorder(fa["+style+"].w,fa["+style+"].s)",rand);

}; dynapi.onLoad(function() { 

 for(n=0;n<length;n++) {
   a=album[n]; frame=a.frame; img=frame._fImage;
   if(img.ruplete) futureSetBorder(frame,1);
   else img.onload=function() { futureSetBorder(this._fFrame,2); };
 }

}); </script> </head> <body bgcolor="#cccccc"> <script> 

 dynapi.document.insertAllChildren();

</script> </body> </html> 

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Load HTML file to Layer

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - LoadPanel</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.library"); dynapi.library.include("dynapi.api"); //dynapi.library.include("dynapi.debug"); dynapi.library.include("dynapi.gui.LoadPanel"); </script> <script language="JavaScript">

</script> </head> <body bgcolor="#999999"> <script> 

 dynapi.document.insertAllChildren();

</script> <a href="javascript:lp.setURL("./dynapiexamples/loadpanel/file1.html")">file 1</a>
<a href="javascript:lp.setURL("./dynapiexamples/loadpanel/file2.html")">file 2</a>
<a href="javascript:lp.setURL("./dynapiexamples/loadpanel/file3.html")">file 3</a>

<a href="javascript:lp.history.back()">back</a>
<a href="javascript:lp.history.forward()">forward</a>
<a href="javascript:lp.reload()">reload</a>
<a href="javascript:lp.clear()">clear</a> <p><a href="javascript:alert(lp.history)">show history</a>
</body> </html> </source> <A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Relative Layers: External Source example

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML> <HEAD> <TITLE>Relative Layers: External Source example</TITLE> <SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="rl_browser_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_source_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT> </HEAD> <BODY BGCOLOR="#ffffff">

<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(0, 10);" ONMOUSEUP="return layer2.stopScroll();">scroll up</A>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(10, 0);" ONMOUSEUP="return layer2.stopScroll();">scroll left</A> <A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(-10, 0);" ONMOUSEUP="return layer2.stopScroll();">scroll right</A>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(0, -10);" ONMOUSEUP="return layer2.stopScroll();">scroll down</A>

</BODY> </HTML> 

      </source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/relativelayers-0.9.7.zip">relativelayers-0.9.7.zip( 74 k)</a>

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