12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- <!doctype html>
- <html>
- <head>
- <title>container with css scale transform test</title>
- <link rel="stylesheet" href="cssTransformTest.css">
- </head>
- <body>
- <a href="cssTransformTestsMootools.html">mootools version</a>
- <a href="cssTransformTestsYUI.html">yui version</a>
-
- <div id="controls">
- <button class="in">+</button>
- <button class="out">-</button>
- <span>Current Zoom:</span>
- <span id="curZoom">100</span>
- <span>%</span>
- </div>
- <div id="container">
- <div id="w1" class="w">one</div>
- <div id="w2" class="w">two</div>
- </div>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
- <!-- support lib for bezier stuff -->
- <script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
- <!-- main jsplumb engine -->
- <script type="text/javascript" src="../../js/1.3.5/jsPlumb-1.3.5-RC1.js"></script>
- <!-- connectors, endpoint and overlays -->
- <script type="text/javascript" src="../../js/1.3.5/jsPlumb-defaults-1.3.5-RC1.js"></script>
- <!-- SVG renderer -->
- <script type="text/javascript" src="../../js/1.3.5/jsPlumb-renderers-svg-1.3.5-RC1.js"></script>
- <!-- canvas renderer -->
- <script type="text/javascript" src="../../js/1.3.5/jsPlumb-renderers-canvas-1.3.5-RC1.js"></script>
- <!-- vml renderer -->
- <script type="text/javascript" src="../../js/1.3.5/jsPlumb-renderers-vml-1.3.5-RC1.js"></script>
- <!-- jquery jsPlumb adapter -->
- <script type="text/javascript" src="../../js/1.3.5/jquery.jsPlumb-1.3.5-RC1.js"></script>
- <script>
- jsPlumb.ready(function() {
- var e1 = jsPlumb.addEndpoint("w1", { isSource:true, anchor:"BottomCenter" }),
- e2 = jsPlumb.addEndpoint("w2", { isTarget:true, anchor:"TopCenter" });
-
- jsPlumb.draggable($(".w"));
- jsPlumb.connect({source:e1,target:e2});
- jsPlumb.bind("click", function(c) { jsPlumb.detach(c); });
- var zl = [25,50,100,200,400],
- z = 2,
- zoom = function(to) {
- z = to;
- if (z == zl.length) z = 0;
- if (z < 0) z = zl.length - 1;
- $("#container").css("transform", "scale(" + (zl[z] / 100) + ")");
- $("#container").css("-webkit-transform", "scale(" + (zl[z] / 100) + ")");
- $("#container").css("-moz-transform", "scale(" + (zl[z] / 100) + ")");
- $("#container").css("-o-transform", "scale(" + (zl[z] / 100) + ")");
- $("#curZoom").html(zl[z]);
- },
- cz = function(inc) {
- return function() {
- zoom(z + inc);
- };
- };
- $(".in").click(cz(1));
- $(".out").click(cz(-1));
- });
- </script>
- </body>
- </html>
|