JavaScript DHTML/Ajax Layer/Layer Limits

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

Relative Layers : Limits example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
// RelativeLayers 0.9.7
// 
// $Id: example7.html 1.8 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 : Limits 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_limits_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);
applyLimits();
function applyLimits()
{
  layer1.addLimit(LEFTEDGE, RIGHTSIDE, "layer2Div", LEFT, -40);
  layer1.addLimit(RIGHTEDGE, LEFTSIDE, "layer2Div", RIGHT, 40);
  layer1.addLimit(TOPEDGE, BELOW, "", TOP, 20);
  layer1.addLimit(BOTTOMEDGE, ABOVE, "layer2Div", TOP, -20);
  layer1.addDimensionLimit(WIDTH, MINIMUM, "layer2Div", LEFT, 0, "layer2Div", RIGHT, 0);
  layer1.addDimensionLimit(HEIGHT, MAXIMUM, "layer2Div", TOP, 0, "layer2Div", BOTTOM, 0);
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#2F4078">
<DIV ID="layer1Div">
   Demo of the application of limits.<BR>
</DIV>
<DIV ID="layer2Div">
    <B>Layer1</B><BR>
  <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.clearLimits(); layer1.position();">Clear limits</A>
  <A HREF="javascript:applyLimits(); layer1.position();">Apply limits</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>
    <B>Layer2</B><BR>
  <A HREF="javascript:layer2.visibleMoveBy(-10,0)">Left</A>
  <A HREF="javascript:layer2.visibleMoveBy(10,0)">Right</A>
  <A HREF="javascript:layer2.visibleMoveBy(0,-10)">Up</A>
  <A HREF="javascript:layer2.visibleMoveBy(0,10)">Down</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>

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