JavaScript DHTML/Ajax Layer/Border

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

Border Manager - Inner Border: pressed layer border

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - BorderManager - Inner Border</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.Color");
dynapi.library.include("dynapi.gui.BorderManager");
</script>
<script language="Javascript">
var box1 = dynapi.document.addChild(new DynLayer(null,100,100,100,100,"yellow"));
var box2 = dynapi.document.addChild(new DynLayer(null,210,100,100,100,"#EFEBD7"));
box1.setInnerBorder(1,"blue");
box1.addEventListener({
  onclick : function(e){
    var o=e.getSource();
    if(!o.__state) {
      o.__state=1;
      o.setInnerBorder(1,{top:"black",right:"white",bottom:"white",left:"black"})
    }
    else{
      o.__state=0;
      o.setInnerBorder(1,{top:"white",right:"black",bottom:"black",left:"white"})
    }
  }
});
box2.setInnerBorder(2,{top:"white",right:"silver",bottom:"silver",left:"white"});
box2.addEventListener({
  onclick : function(e){
    var o=e.getSource();
    if(!o.__state) {
      o.__state=1;
      o.setInnerBorder(2,{top:"silver",right:"white",bottom:"white",left:"silver"})
    }
    else{
      o.__state=0;
      o.setInnerBorder(2,{top:"white",right:"silver",bottom:"silver",left:"white"})
    }
  }
});
</script>
</head>
<body bgcolor="#e0e0e0">
Click on the Layers
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>


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


Border Manager - Outer Border using the Frame Object

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - BorderManager - Outer Border using the Frame Object</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");
</script>
<script language="Javascript">
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 simgs=[fn.src,fe.src,fs.src,fw.src];
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 cimgs=[fne.src,fse.src,fsw.src,fnw.src];
var tile=f.getImage(p+"f1-dot.gif");
var image1=f.getImage(p+"f1-sky.jpg");
var image2=f.getImage(p+"f1-skyp.jpg");
var image3=f.getImage(p+"f1-skyl.jpg");
var fa=[ // Array of frame styles to choose from.
  {w:2, s:"white"},
  {w:2, s:["white","black","black","white"]},
  {w:2, s:["black","white","white","black"]},
  {w:[20,15,10,5], s:["red","yellow","green","blue"]},
  {w:[2,2,0,0], s:["yellow","blue"]},
  {w:[0,0,2], s:"red"},
  {w:14, s:tile.src},
  {w:1},
  {},
  {w:17, s:simgs, c:cimgs}
];
// Frame will take content location.
var frame1=dynapi.document.addChild(new Frame(17,simgs,cimgs));
frame1.addContent(new DynLayer(image1.getHTML(),150,60,377,182));
frame1.setBgColor("#c4c2c7");
frame1.setSize(440,244); // Content will auto center.
frame1.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,fa[o._fState].c);
  }
});
var frame2=dynapi.document.addChild(new Frame(14,tile.src));
frame2.addContent(new DynLayer(image2.getHTML(),10,60,75,100));
frame2.setBgColor("#c40000");
frame2.setSize(112,140); // Multiple of tile size.
var frame3=dynapi.document.addChild(new Frame(14,tile.src));
frame3.addContent(new DynLayer(image3.getHTML(),10,210,100,75));
frame3.setSize(126,98);
</script>
</head>
<body bgcolor="#cccccc">
Clicking on the large image will cycle through some frame styles. Click following<br>
links to <a href="" onclick="frame1.setLocation(200,100); return false;">move</a> or <a href="" onclick="frame1.setLocation(150,60); return false;">return </a> frame location and to <a href="" onclick="frame1.setSize(frame1.w+42,frame1.h+42); return false;">increase</a> or <a href="" onclick="frame1.setSize(frame1.w-42,frame1.h-42); return false;">decrease</a> frame size.
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>


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


Box Model Fix (Border Manager)

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - Box Model Fix (BorderManager)</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("BorderManager");
</script>
<script language="Javascript">
var lyr1 = dynapi.document.addChild(new DynLayer("",100,100,100,100,"yellow"));
var lyr2 = dynapi.document.addChild(new DynLayer("",202,100,100,100,"lime"));
lyr1.setBorder(1,"black","dotted");
lyr2.setBorder(1,"silver","solid");
// Note: NS4 will default to solid style
//lyr1.setBorder({top:2,bottom:1},"black",{top:"solid",bottom:"dotted"});

</script>
</head>
<body>
<a href="" onclick="lyr2.setSize(lyr2.w+10,lyr2.h+10); return false;">increase</a><br>
<a href="" onclick="lyr2.setSize(lyr2.w-10,lyr2.h-10); return false;">decrease</a>
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>


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


Random Borders

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - Random Borders</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.Math");
dynapi.library.include("dynapi.functions.Color");
dynapi.library.include("BorderManager");
</script>
<script language="Javascript">

var styles=["solid","dotted","inset","outset","groove"];
function generate(n) {
  for (var i=0;i<n;i++) {
    var d = new DynLayer();
    d.setBgColor(dynapi.functions.getRandomColor());
    d.setSize(10+80*Math.random(),10+80*Math.random());
    d.setLocation(100+500*Math.random(),400*Math.random());
    color = "#"+dynapi.functions.getRandomColor();
    d.setBorder(parseInt(4*Math.random()),color,styles[parseInt(4*Math.random())]);
    dynapi.document.addChild(d);
  }
}
generate(100)
</script>
</head>
<body bgcolor="#FFFFFF">
<script>
  dynapi.document.insertAllChildren();
</script>
</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/Border&oldid=4173»