в 09:58, 26 мая 2010

2010-05-26T09:58:48Z

Admin: 1 версия

2010-05-26T07:16:06Z

1 версия

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

==Layer auto-resize feature==



<source lang="html4strict">

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - DynLayer auto-resize feature</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">
// Note: this table"s width will resize differently when displayed inside Opera
var t ="<table width="100%" border="1"><tr><td>Test Table</td></tr></table>"
var lyr = new DynLayer("text",110,110,50,30,"yellow");
dynapi.document.addChild(lyr);
//lyr.enableBlackboard();
lyr.setAutoSize(true,true)
function changeHTML(){
var f=document.forms["frm"];
var html = "<nobr>"+f.txt.value+"</nobr>"; // always use <nobr> with plain text to prevent text wrapping in ns4
lyr.deleteAllChildren();
if(lyr.getHTML()!=html) lyr.setHTML(html);
};
function removeLayer(){
lyr.deleteChild(lyr.children[lyr.children.length-1])
};
function addLayer(){
var x=Math.random()*200;
var y=Math.random()*200;
var l = new DynLayer(null,x,y,10,10,"green");
lyr.addChild(l);
};
</script>
</HEAD>
<BODY>
<script>
dynapi.document.insertAllChildren();
</script>
<form name="frm">
<textarea rows="4" cols="20" name="txt">Enter a very long text here</textarea>
<input type="button" onclick="return changeHTML();" value="Set HTML"> 
<input type="button" onclick="return addLayer();" value="Add Layer"> 
<input type="button" onclick="return removeLayer();" value="Remove Layer">
<form>
</body>
</html>

</source>

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

==RelativeLayers : Move and resize example==



<source lang="html4strict">

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

<HTML>
<HEAD>
<TITLE>RelativeLayers : Move and resize 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">

</SCRIPT>
</HEAD>
<BODY BGCOLOR="#2F4078">
<DIV ID="layer1Div">
Demo of the interactive move functions.<BR>
</DIV>
<DIV ID="layer2Div">
<A HREF="javascript:layer1.visibleMoveBy(-10,0)">Left</A>
<A HREF="javascript:layer1.visibleMoveBy(10,0)">Right</A>
<A HREF="javascript:layer1.visibleMoveBy(0,-10)">Up</A>
<A HREF="javascript:layer1.visibleMoveBy(0,10)">Down</A><BR>
<A HREF="javascript:layer1.visibleMoveTo("50%",0)">Top edge</A>
<A HREF="javascript:layer1.visibleMoveTo("50%","100%-"+layer1.calculateVisibleHeight())">Bottom edge</A>
<A HREF="javascript:layer1.visibleMoveTo("50%", Math.floor((layer2.getAbsoluteY()-layer1.calculateVisibleHeight())/2))">Center</A>
<A HREF="javascript:center_offset_x = Math.ceil(layer1.calculateVisibleWidth()/2); layer1.visibleMoveTo(center_offset_x,"10%")">Left edge</A>
<A HREF="javascript:center_offset_x = Math.ceil(layer1.calculateVisibleWidth()/2); layer1.visibleMoveTo("100%-"+center_offset_x,"10%")">Right edge</A><BR>
<A HREF="javascript:layer1.visibleResizeTo("10%","60%")">Narrow</A>
<A HREF="javascript:layer1.visibleResizeTo("100%","60%")">Wide</A>
<A HREF="javascript:layer1.visibleResizeTo("80%","60%")">Normal</A>
<A HREF="javascript:layer1.visibleResizeTo("80%","10%")">Short</A>
<A HREF="javascript:layer1.visibleResizeTo("80%","90%")">Long</A><BR>
<A HREF="javascript:layer1.visibleResizeBy("-10%",0)">Narrower</A>
<A HREF="javascript:layer1.visibleResizeBy("10%",0)">Wider</A>
<A HREF="javascript:layer1.visibleResizeBy(0,"-10%")">Shorter</A>
<A HREF="javascript:layer1.visibleResizeBy(0,"10%")">Longer</A><BR>
</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>

==Set layer size==



<source lang="html4strict">

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - Blackboard</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("DynLayer");
</script>
<script language="Javascript">
var cnt=0;
var lyr=new DynLayer(null,100,100,200,200,"yellow");
lyr.addChild(new DynLayer({x:10,y:10,html:"child layer",color:"lime"}));
lyr.enableBlackboard();
dynapi.document.addChild(lyr);
function change(w,h){
var h;
w=w||100;
h=h||100;
cnt++;
h="<table width=""+w+"" height=""+h+"" border="1"><tr><td bgcolor="#e0e0e0" align="center">Some Text Here"
+"</td></tr></table>";
lyr.setHTML(h);
}
change();
</script>
</head>
<body>
<script>
dynapi.document.insertAllChildren();
</script>
<a href="javascript:;" onclick="change(150,150)">Set Table Size 150,150</a><br>
<a href="javascript:;" onclick="change(200,200)">Set HTML 200,200</a>
</body>
</html>

</source>

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

==Set layer width and height==



<source lang="html4strict">

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>Content Width/Height Test</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
</script>
<script>
var lyr=dynapi.document.addChild(new DynLayer(null,200,100,200,200,"yellow"));
function getWH(){
var w,h,f=document.forms["frm"];
f.lw.value=w=lyr.getWidth();
f.lh.value=h=lyr.getHeight();
lyr.setSize(1,1);
f.cw.value=lyr.getContentWidth();
f.ch.value=lyr.getContentHeight();
lyr.setSize(w,h);
}
function content1(){
var t="<table border="1" width="60" height="100"><tr><td>Table #1 60x100</td></tr></table>";
lyr.setHTML(t);
getWH();
}
function content2(){
var t="<table border="1" width="80" height="150"><tr><td>content #2 80x150</td></tr></table>";
lyr.setHTML(t);
getWH();
}
</script>
</head>
<body>
<script>
dynapi.document.insertAllChildren();
</script>
<form name="frm">
Layer Width:<input type="text" name="lw" size="5">
Layer Height:<input type="text" name="lh" size="5"><br>
Layer Content Width:<input type="text" name="cw" size="5">
Layer Content Height:<input type="text" name="ch" size="5">
<p><a href="javascript:content1();">Set Content 1</a><br>
<a href="javascript:content2();">Set Content 2</a></p>
</body>
</html>

</source>

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

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

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

в 09:58, 26 мая 2010

Admin: 1 версия