cssTransformTests.html 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>container with css scale transform test</title>
  5. <link rel="stylesheet" href="cssTransformTest.css">
  6. </head>
  7. <body>
  8. <a href="cssTransformTestsMootools.html">mootools version</a>
  9. <a href="cssTransformTestsYUI.html">yui version</a>
  10. <div id="controls">
  11. <button class="in">+</button>
  12. <button class="out">-</button>
  13. <span>Current Zoom:</span>
  14. <span id="curZoom">100</span>
  15. <span>%</span>
  16. </div>
  17. <div id="container">
  18. <div id="w1" class="w">one</div>
  19. <div id="w2" class="w">two</div>
  20. </div>
  21. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
  22. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
  23. <!-- support lib for bezier stuff -->
  24. <script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
  25. <!-- main jsplumb engine -->
  26. <script type="text/javascript" src="../../js/1.3.5/jsPlumb-1.3.5-RC1.js"></script>
  27. <!-- connectors, endpoint and overlays -->
  28. <script type="text/javascript" src="../../js/1.3.5/jsPlumb-defaults-1.3.5-RC1.js"></script>
  29. <!-- SVG renderer -->
  30. <script type="text/javascript" src="../../js/1.3.5/jsPlumb-renderers-svg-1.3.5-RC1.js"></script>
  31. <!-- canvas renderer -->
  32. <script type="text/javascript" src="../../js/1.3.5/jsPlumb-renderers-canvas-1.3.5-RC1.js"></script>
  33. <!-- vml renderer -->
  34. <script type="text/javascript" src="../../js/1.3.5/jsPlumb-renderers-vml-1.3.5-RC1.js"></script>
  35. <!-- jquery jsPlumb adapter -->
  36. <script type="text/javascript" src="../../js/1.3.5/jquery.jsPlumb-1.3.5-RC1.js"></script>
  37. <script>
  38. jsPlumb.ready(function() {
  39. var e1 = jsPlumb.addEndpoint("w1", { isSource:true, anchor:"BottomCenter" }),
  40. e2 = jsPlumb.addEndpoint("w2", { isTarget:true, anchor:"TopCenter" });
  41. jsPlumb.draggable($(".w"));
  42. jsPlumb.connect({source:e1,target:e2});
  43. jsPlumb.bind("click", function(c) { jsPlumb.detach(c); });
  44. var zl = [25,50,100,200,400],
  45. z = 2,
  46. zoom = function(to) {
  47. z = to;
  48. if (z == zl.length) z = 0;
  49. if (z < 0) z = zl.length - 1;
  50. $("#container").css("transform", "scale(" + (zl[z] / 100) + ")");
  51. $("#container").css("-webkit-transform", "scale(" + (zl[z] / 100) + ")");
  52. $("#container").css("-moz-transform", "scale(" + (zl[z] / 100) + ")");
  53. $("#container").css("-o-transform", "scale(" + (zl[z] / 100) + ")");
  54. $("#curZoom").html(zl[z]);
  55. },
  56. cz = function(inc) {
  57. return function() {
  58. zoom(z + inc);
  59. };
  60. };
  61. $(".in").click(cz(1));
  62. $(".out").click(cz(-1));
  63. });
  64. </script>
  65. </body>
  66. </html>