в 09:58, 26 мая 2010

2010-05-26T09:58:48Z

Admin: 1 версия

2010-05-26T07:15:45Z

1 версия

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

==Drag and Snap (SnapX)==



<source lang="html4strict">

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dynapi Examples - Drag & Snap (SnapX)</title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="JavaScript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("dynapi.api.ext.DragEvent");
dynapi.library.include("dynapi.fx.SnapX");
dynapi.library.include("dynapi.functions.Color");
</script>
<script language="JavaScript">
var l1,l2,l3,l4,l5,l6,l7,l8,l9,l1txt,l2txt,l3txt,l4txt,l5txt,l6txt,l7txt,l8txt,l9txt;
l1txt = "<font size="1" face="Verdana">drag<br />snap<br />inner, 5</font>";
l2txt = "<font size="1" face="Verdana">drag<br />snap<br />outer, 5</font>";
l3txt = "<font size="1" face="Verdana">drag<br />snap<br />both, 5</font>";
l4txt = "<font size="1" face="Verdana">drag<br />snap<br />both, 10<br />sticky</font>";
l5txt = "<font size="1" face="Verdana">drag<br />snap<br />both, 10<br />grid, def</font>";
l6txt = "<font size="1" face="Verdana">static<br />snap<br />def, 15</font>";
l7txt = "<font size="1" face="Verdana">static<br />snap<br />def, 10<br />sticky</font>";
l8txt = "<font size="1" face="Verdana">drag<br />snap<br />def, def<br />grid, def</font>";
//l9txt = "<font size="1" face="Verdana">drag<br />snap<br />def, def</font>";
l1 = new DynLayer(l1txt,25,25,50,50,"red");
l2 = new DynLayer(l2txt,185,25,50,50,"orange");
l3 = new DynLayer(l3txt,350,25,50,50,"yellow");
l4 = new DynLayer(l4txt,515,25,50,50,"lightgreen");
l5 = new DynLayer(l5txt,675,25,50,50,"lightblue");
l6 = new DynLayer(l6txt,25,100,100,100,"violet");
l7 = new DynLayer(l7txt,225,100,100,100,"tan");
l8 = new DynLayer(l8txt,425,100,175,175,"lightgrey");
//l9 = new DynLayer(l9txt,625,100,100,100,"gray");
l1.setTextSelectable(false);
l2.setTextSelectable(false);
l3.setTextSelectable(false);
l4.setTextSelectable(false);
l5.setTextSelectable(false);
l6.setTextSelectable(false);
l7.setTextSelectable(false);
l8.setTextSelectable(false);
//l9.setTextSelectable(false);
l1.enableSnap();
l2.enableSnap();
l3.enableSnap();
l4.enableSnap();
l4.enableStickySnap();
l5.enableSnap();
l5.enableGridSnap();
l6.enableSnap();
l7.enableSnap();
l7.enableStickySnap();
l8.enableSnap();
l8.enableGridSnap();
//l9.enableSnap();
l1.setSnapBoundary("inner",5);
l2.setSnapBoundary("outer",5);
l3.setSnapBoundary("both",5);
l4.setSnapBoundary("both",10);
l5.setSnapBoundary("both",10);
l6.setSnapBoundary(15);
l7.setSnapBoundary(10);
l8.setSnapBoundary(15,40);
l1.setZIndex(100);
l2.setZIndex(101);
l3.setZIndex(102);
l4.setZIndex(103);
l5.setZIndex(104);
l6.setZIndex(10);
l7.setZIndex(11);
l8.setZIndex(12);
//l9.setZIndex(13);
DragEvent.enableDragEvents(l1);
DragEvent.enableDragEvents(l2);
DragEvent.enableDragEvents(l3);
DragEvent.enableDragEvents(l4);
DragEvent.enableDragEvents(l5);
l1.addEventListener({
onsnap : function(e) {
var src = e.getSource();
}
});
l2.addEventListener({
onsnap : function(e) {
var src = e.getSource();
}
});
l3.addEventListener({
onsnap : function(e) {
var src = e.getSource();
}
});
l4.addEventListener({
onsnap : function(e) {
var src = e.getSource();
}
});
l5.addEventListener({
onsnap : function(e) {
var src = e.getSource();
}
});
dynapi.document.addChild(l1);
dynapi.document.addChild(l2);
dynapi.document.addChild(l3);
dynapi.document.addChild(l4);
dynapi.document.addChild(l5);
dynapi.document.addChild(l6);
dynapi.document.addChild(l7);
dynapi.document.addChild(l8);
//dynapi.document.addChild(l9);
</script>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<font face="Verdana, Arial" size="2">Drag & Snap the layers above.<br />
<br />
<b>API notes:</b><br />
<br />
Public Methods (Snap):
<ul>
<li>[null] enableSnap() & disableSnap()</li>
<li>[null] setSnapBoundaryTypeDefault([inner|outer|both]) & [inner|outer|both] getSnapBoundaryTypeDefault()</li>
<li>[null] setSnapBoundaryType([inner|outer|both]) & [snapType] getSnapBoundaryType()</li>
<li>[null] setSnapBoundaryDefault(b) & [b] getSnapBoundaryDefault()</li>
<li>[null] setSnapBoundary() or setSnapBoundary(b) or<br />
[null] setSnapBoundary([inner|outer|both],b) or<br />
[null] setSnapBoundary(number,number) or<br />
[null] setSnapBoundary([inner|outer|both],t,r,b,l) or<br />
[null] setSnapBoundary(ti,ri,bi,li,to,ro,bo,lo)</li>
<li>[Array (t,r,b,l)] getSnapBoundary([inner|outer]) or<br/>
[Array (ti,ri,bi,li,to,ro,bo,lo)] getSnapBoundary(both)</li>
<li>[null] enableStickySnap() & disableStickySnap()</li>
<li>[null] enableGridSnap() & disableGridSnap()</li>
<li>[null] setGridSnapSize(b)</li>
</ul>
BUGS list:
<ul>
<li>Dragging a grid snap layer over a sticky snap layer acts like grid snap when it should not.</li>
<li>Double check & clean up inner & outer corner grid snapping code.</li>
<li>Add sticky snap support for both sides of the target layer"s border (currently inner or outer only).</li>
<li>Add sticky snap support for upper-right and lower-left corners (i.e. reflective w.r.t. real edge).</li>
<li>Find a way to make the snapping/resnapping less jittery (i.e. sticky & grid are options).</li>
</ul>
TODO list:
<ul>
<li>Add argument passing to enableSnap() for more compact way to specify snap type [normal|sticky|grid], boundary type [inner|outer|both], grid size (if applicable) and boundary sizes.</li>
<li>Add a dockable feature.</li>
<li>Add a "ghost" feature.</li>
</ul>
</font>
</body>
</html>

</source>

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

==Draggable Layers==

<A href="http://www.wbex.ru/Code/JavaScriptDownload/MochiKit-1.3.1.zip">MochiKit-1.3.1.zip( 302 k)</a>

1.
<A href="/Code/JavaScript/Ajax-Layer/DragandSnapSnapX.htm">Drag and Snap (SnapX)</a>
<A href="/Code/JavaScript/Ajax-Layer/DragandSnapSnapX.htm"></a>
2.
<A href="/Code/JavaScript/Ajax-Layer/Layerdragevent.htm">Layer drag event</a>
<A href="/Code/JavaScript/Ajax-Layer/Layerdragevent.htm"></a>
3.
<A href="/Code/JavaScript/Ajax-Layer/DraggingLargeChildLayers.htm">Dragging Large Child Layers</a>
<A href="/Code/JavaScript/Ajax-Layer/DraggingLargeChildLayers.htm"></a>
4.
<A href="/Code/JavaScript/Ajax-Layer/DraggingFormsandLayersformcontrolsonalayer.htm">Dragging Forms and Layers: form controls on a layer</a>
<A href="/Code/JavaScript/Ajax-Layer/DraggingFormsandLayersformcontrolsonalayer.htm"></a>
5.
<A href="/Code/JavaScript/Ajax-Layer/RelativeLayersDragdropexample.htm">Relative Layers : Drag & drop example</a>
<A href="/Code/JavaScript/Ajax-Layer/RelativeLayersDragdropexample.htm"></a>
6.
<A href="/Code/JavaScript/Ajax-Layer/Inlinelayerdraganddrop.htm">Inline layer drag and drop</a>
<A href="/Code/JavaScript/Ajax-Layer/Inlinelayerdraganddrop.htm"></a>

==Dragging Forms and Layers: form controls on a layer==



<source lang="html4strict">

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dragging Forms & Layers</title>
<script language="Javascript" type="text/javascript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript" type="text/javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("DragEvent")
//-->
</script>
<script language="Javascript" type="text/javascript">
lyr = new DynLayer(null,50,50,250,200,"red");
lyr.setHTML("drag me <form>"+
"<input type="radio" value="1" name="r1" checked>"+
"<input type="radio" value="1" name="r1">"+
"<input type="checkbox" value="1"><br>"+
"<input type="text" value="text">"+
"<input type="button" value="submit">"+
"<input type="image" name="myimage" src="./dynapisrc/ext/images/debug_imgreload.gif">"+
"<textarea name="ta" cols=20 rows=3>textarea textarea textarea textarea textarea textarea textarea</textarea>"+
"<br><img src="./dynapiexamples/images/arrowdown.gif" width=50 height=50></form>");
dynapi.document.addChild(lyr);
DragEvent.enableDragEvents(lyr);
DragEvent.setDragBoundary(lyr);
</script>
</head>
<body bgcolor="#ffffff">
Issue: Unable to scroll or select text in some browsers (e.g. IE) when drag events are
enabled on the layer
Try scrolling or selecting text within the text boxes
</body>
</html>

</source>

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

==Dragging Large Child Layers==



<source lang="html4strict">

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>Dragging Large Child Layers</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("DragEvent");
</script>
<script language="Javascript">
var container = new DynLayer(null,0,0,200,200,"e0e0e0");
var insideObj = new DynLayer("Can drag until x & y=0. This due to boundrary {left:0, right:0, top:0, bottom:0} and this layer being larger than it"s parent",100,100,400,400, "lime"); // larger than our container...
container.addChild(insideObj);
DragEvent.setDragBoundary(insideObj, {left:0, right:0, top:0, bottom:0});
DragEvent.enableDragEvents(insideObj);
dynapi.document.addChild(container);
var container = new DynLayer(null,250,0,200,200,"e0e0e0");
var insideObj = new DynLayer("Can"t drag due to boundrary {left:0, right:0, top:0, bottom:0} and this layer being larger than it"s parent",0,0,400,400, "yellow"); // larger than our container...
container.addChild(insideObj);
DragEvent.setDragBoundary(insideObj, {left:0, right:0, top:0, bottom:0});
DragEvent.enableDragEvents(insideObj);
dynapi.document.addChild(container);
</script>
</head>
<body>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>

</source>

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

==Inline layer drag and drop==



<source lang="html4strict">

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - Inline Widget</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.library");
dynapi.library.include("dynapi.debug");
dynapi.library.include("dynapi.api");
dynapi.library.include("DynLayerInline");
dynapi.library.include("DragEvent");
</script>
<script language="Javascript">
var mylayer = dynapi.document.addChild(new DynLayer(),null,"mylayer");
mylayer.addChild(new DynLayer(),"lyrBox1","box1");
mylayer.addChild(new DynLayer(),"lyrBox2","box2");
mylayer.addChild(new DynLayer(),"lyrBox3","box3");
mylayer.addChild(new DynLayer(),"lyrBox4","box4");
DragEvent.enableDragEvents(
mylayer,
mylayer.lyrBox1,
mylayer.lyrBox2,
mylayer.lyrBox3,
mylayer.lyrBox4
);
var el = {
onmousedown : function(e) {
dynapi.debug.print("mousedown on "+e.getSource().id)
e.preventBubble();
}
}
mylayer.addEventListener(el);
</script>
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF">
<div id="mylayer">
<table border="0" height="200" width="200"><tr><td align="center"><font color="#ffffff">My Inline Widget<br>Drag Me</font></td></tr></table>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</div>
</body>
</html>

</source>

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

==Layer drag event==



<source lang="html4strict">

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - Drag Event</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.library");
dynapi.library.include("dynapi.debug");
dynapi.library.include("DragEvent");
</script>
<script language="Javascript">
var p = dynapi.document.addChild(new DynLayer(null,50,50,200,200,"silver"))
var a=p.addChild(new DynLayer(null,10,10,20,20,"red"))
DragEvent.enableDragEvents(a);
DragEvent.setDragBoundary(a, {left:5, right:5, top:5, bottom:5});
dynapi.onLoad(function() {
str = "// Try these tests:\n\n"+
"p.setSize(150,350);\n"+
"//p.setSize(200,200);\n";
dynapi.debug.setEvaluate(str);
});
</script>
</head>
<body bgcolor="#999999">
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>

</source>

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

==Relative Layers : Drag & drop example==



<source lang="html4strict">

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

<HTML>
<HEAD>
<TITLE>RelativeLayers : Drag & drop 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_dragdrop_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT>
</HEAD>
<BODY BGCOLOR="#2F4078">
<DIV ID="layer1Div">
Layer 1.<BR>
Demo of drag and drop.<BR>
</DIV>
<DIV ID="layer2Div">
Layer 2.<BR>
<A HREF="javascript:layer2.visibleResizeBy("-10%",0)">Narrower</A>
<A HREF="javascript:layer2.visibleResizeBy("10%",0)">Wider</A>
<A HREF="javascript:layer2.visibleResizeBy(0,"-10%")">Shorter</A>
<A HREF="javascript:layer2.visibleResizeBy(0,"10%")">Longer</A><BR>

<DIV ID="layer3Div">
Layer 3.<BR>
Demo of drag and drop.<BR>
</DIV>
</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>

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

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

в 09:58, 26 мая 2010

Admin: 1 версия