JavaScript DHTML/Ajax Layer/Layer Resize Move

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

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 ="
Test 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">

Demo of the interactive move functions.

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

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

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

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

</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="
Some Text Here" +"
"; 
 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>
<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 #1 60x100
"; 
 lyr.setHTML(t);
 getWH();

} function content2(){

var t="
content #2 80x150
"; 
 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">
Layer Content Width:<input type="text" name="cw" size="5"> Layer Content Height:<input type="text" name="ch" size="5">

<a href="javascript:content1();">Set Content 1</a>
<a href="javascript:content2();">Set Content 2</a>

</body> </html> 


      </source>

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

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