JavaScript DHTML/Ajax Layer/Layer Resize Move

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

Layer auto-resize feature

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">&nbsp;
  <input type="button" onclick="return addLayer();" value="Add Layer">&nbsp;
  <input type="button" onclick="return removeLayer();" value="Remove Layer">
<form>
</body>
</html>


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


RelativeLayers : Move and resize example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
// RelativeLayers 0.9.7
// 
// $Id: example4.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>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">
<!--
layer1 = new RelativeLayer(
"layer1Div", "", "",
"80%","60%",LEFT,"50%",TOP,"10%","0","-50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd");
layer1.setVisible(true);
layer2 = new RelativeLayer(
"layer2Div", "", "",
"80%","AUTO",LEFT,"50%",BOTTOM,"-10%","0","50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#ffffff");
layer2.setVisible(true);
//-->
</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>


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


Set layer size

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>


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


Set layer width and height

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>


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

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