定义缩放区域的边界。使用 containment 选项来指定一个父级的 DOM 元素或一个 jQuery 选择器,比如 'document.'。

限制

缩放(Resizable)

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery UI 缩放(Resizable) - 限制缩放区域</title>
  6. <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7. <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9. <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10. <style>
  11. #container { width: 300px; height: 300px; }
  12. #container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
  13. #resizable { background-position: top left; width: 150px; height: 150px; }
  14. #resizable, #container { padding: 0.5em; }
  15. </style>
  16. <script>
  17. $(function() {
  18. $( "#resizable" ).resizable({
  19. containment: "#container"
  20. });
  21. });
  22. </script>
  23. </head>
  24. <body>
  25. <div id="container" class="ui-widget-content">
  26. <h3 class="ui-widget-header">限制</h3>
  27. <div id="resizable" class="ui-state-active">
  28. <h3 class="ui-widget-header">缩放(Resizable)</h3>
  29. </div>
  30. </div>
  31. </body>
  32. </html>