JavaScript DHTML/Ajax Layer/Layer Container

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

Container based on Layer

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:<center><table border="1"><tr><td>Some text {@fld} More text</td></tr></table></center>",100,100,250,200,"lime");
var hc = new HTMLContainer(null,"<font face="arial" size="4">Hello World</font>",180,50)
tp.addChild(hc,"fld");
dynapi.document.addChild(tp);
setTimeout(tp.fld+".setHTML("<font face=arial size=4>Hello World From <br><font color=blue><b>HTMLContainer</b></font></font>")",1200);
</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>


Image in Frame

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=[
"<table width=250 height=220 border=0 cellspacing=0 cellpadding=0>",
"<tr><td height=20 align="center" valign="middle" colspan=5><b>Click on an image to cycle it\"s frame.</b></td></tr>",
"<tr><td width=50 height=50 align="center" valign="middle">{@thumb0}</td><td width=50 align="center" valign="middle">{@thumb1}</td><td width=50 align="center" valign="middle">{@thumb2}</td><td width=50 align="center" valign="middle">{@thumb3}</td><td width=50 align="center" valign="middle">{@thumb4}</td></tr>",
"<tr><td height=50 align="center" valign="middle">{@thumb5}</td><td align="center" valign="middle">{@thumb6}</td><td align="center" valign="middle">{@thumb7}</td><td align="center" valign="middle">{@thumb8}</td><td align="center" valign="middle">{@thumb9}</td></tr>",
"<tr><td height=50 align="center" valign="middle">{@thumb10}</td><td align="center" valign="middle">{@thumb11}</td><td align="center" valign="middle">{@thumb12}</td><td align="center" valign="middle">{@thumb13}</td><td align="center" valign="middle">{@thumb14}</td></tr>",
"<tr><td height=50 align="center" valign="middle">{@thumb15}</td><td align="center" valign="middle">{@thumb16}</td><td align="center" valign="middle">{@thumb17}</td><td align="center" valign="middle">{@thumb18}</td><td align="center" valign="middle">{@thumb19}</td></tr>",
"</table>"
];
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>


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


Load HTML file to Layer

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">
<!--
lp = new LoadPanel("./dynapiexamples/loadpanel/file1.html");
lp.setLocation(200,20);
lp.setSize(300,300);
lp.setBgColor("#C0C0C0");
dynapi.document.addChild(lp);
//-->
</script>
</head>
<body bgcolor="#999999">
<script>
  dynapi.document.insertAllChildren();
</script>
<a href="javascript:lp.setURL("./dynapiexamples/loadpanel/file1.html")">file 1</a><br>
<a href="javascript:lp.setURL("./dynapiexamples/loadpanel/file2.html")">file 2</a><br>
<a href="javascript:lp.setURL("./dynapiexamples/loadpanel/file3.html")">file 3</a>
<p><a href="javascript:lp.history.back()">back</a><br>
<a href="javascript:lp.history.forward()">forward</a><br>
<a href="javascript:lp.reload()">reload</a><br>
<a href="javascript:lp.clear()">clear</a>
<p><a href="javascript:alert(lp.history)">show history</a><br>
</body>
</html>


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


Relative Layers: External Source example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
// RelativeLayers 0.9.7
// 
// $Id: example9.html 1.7 04/02/02 21:22:32+01:00 gbevin@willow.uwyn.office $
// 
// Library for creating dynamic designs that adapt themselves to the user"s
// browser environment.
// 
// Copyright (C) 1998-2004, Geert Bevin
// Distributed under the terms of the GNU Lesser General Public, v2.1 or later
// 
// gbevin[remove] at uwyn dot com
// http://www.uwyn.ru/projects/relativelayers
-->
<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">
<!--
layer1 = new RelativeLayer(
"layer1Div", "", "",
"100%","AUTO",LEFT,"0",TOP,"0","-50%","-50%",
"100%","100%",LEFT,"50%",TOP,"50","0","0",
"#dddddd", "");
layer1.setVisible(true);
layer2 = new RelativeLayer(
"layer2Div", "", "",
"30%","50%",LEFT,"50%",TOP,"50%","0","0",
"200%","AUTO",LEFT,"50%",TOP,"0","0","-50%",
"#dddddd", "");
layer2.setVisible(true);
layer2.setSource("example9_content.html");
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">
<DIV ID="layer1Div">
<CENTER>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(0, 10);" ONMOUSEUP="return layer2.stopScroll();">scroll up</A><BR>
<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><BR>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(0, -10);" ONMOUSEUP="return layer2.stopScroll();">scroll down</A><BR>
</CENTER>
</DIV>
</BODY>
</HTML>


<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»