в 09:58, 26 мая 2010

2010-05-26T09:58:48Z

Admin: 1 версия

2010-05-26T07:15:56Z

1 версия

Новая страница

==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:<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>

</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=[
"<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>

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

</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">
<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>

</source>

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

← Предыдущая	Версия 09:58, 26 мая 2010
(нет различий)

JavaScript DHTML/Ajax Layer/Layer Container - История изменений

в 09:58, 26 мая 2010

Admin: 1 версия