synchronous-resize.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery UI Resizable - Synchronous resize</title>
  6. <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7. <script src="../../jquery-1.10.2.js"></script>
  8. <script src="../../ui/jquery.ui.core.js"></script>
  9. <script src="../../ui/jquery.ui.widget.js"></script>
  10. <script src="../../ui/jquery.ui.mouse.js"></script>
  11. <script src="../../ui/jquery.ui.resizable.js"></script>
  12. <link rel="stylesheet" href="../demos.css">
  13. <style>
  14. #resizable { background-position: top left; }
  15. #resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
  16. #resizable h3, #also h3 { text-align: center; margin: 0; }
  17. #also { margin-top: 1em; }
  18. </style>
  19. <script>
  20. $(function() {
  21. $( "#resizable" ).resizable({
  22. alsoResize: "#also"
  23. });
  24. $( "#also" ).resizable();
  25. });
  26. </script>
  27. </head>
  28. <body>
  29. <div id="resizable" class="ui-widget-header">
  30. <h3 class="ui-state-active">Resize</h3>
  31. </div>
  32. <div id="also" class="ui-widget-content">
  33. <h3 class="ui-widget-header">will also resize</h3>
  34. </div>
  35. <div class="demo-description">
  36. <p>Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the <code>alsoResize</code> option.</p>
  37. </div>
  38. </body>
  39. </html>