首页 教程 JavaScript 开发教程 jQuery UI 技术教程 jQuery UI 实例 – 缩放(Resizable)
jQuery UI 技术教程
1 . jQuery UI 教程2 . jQuery UI 简介3 . jQuery UI 下载4 . jQuery UI 使用5 . jQuery UI 定制6 . jQuery UI 工作原理7 . jQuery UI 主题8 . jQuery UI ThemeRoller9 . jQuery UI CSS 框架 API10 . jQuery UI 设计主题11 . jQuery UI 部件库12 . jQuery UI 通过部件库扩展小部件13 . jQuery UI 小部件方法调用14 . jQuery UI 为什么使用部件库15 . jQuery UI 如何使用部件库16 . jQuery UI API 文档17 . jQuery UI API 类别 – 特效18 . jQuery UI API 类别 – 特效核心19 . jQuery UI API 类别 – 交互20 . jQuery UI API 类别 – 方法重载21 . jQuery UI API 类别 – 方法22 . jQuery UI API 类别 – 选择器23 . jQuery UI API 类别 – 主题24 . jQuery UI API 类别 – UI 核心25 . jQuery UI API 类别 – 实用工具26 . jQuery UI API 类别 – 小部件27 . jQuery UI 实例28 . jQuery UI 实例 – 拖动(Draggable)29 . jQuery UI 实例 – 放置(Droppable)30 . jQuery UI 实例 – 缩放(Resizable)31 . jQuery UI 实例 – 选择(Selectable)32 . jQuery UI 实例 – 排序(Sortable)33 . jQuery UI 实例 – 折叠面板(Accordion)34 . jQuery UI 实例 – 自动完成(Autocomplete)35 . jQuery UI 实例 – 按钮(Button)36 . jQuery UI 实例 – 日期选择器(Datepicker)37 . jQuery UI 实例 – 对话框(Dialog)38 . jQuery UI 实例 – 菜单(Menu)39 . jQuery UI 实例 – 进度条(Progressbar)40 . jQuery UI 实例 – 滑块(Slider)41 . jQuery UI 实例 – 旋转器(Spinner)42 . jQuery UI 实例 – 标签页(Tabs)43 . jQuery UI 实例 – 工具提示框(Tooltip)44 . jQuery UI 实例 – 特效(Effect)45 . jQuery UI 实例 – 显示(Show)46 . jQuery UI 实例 – 隐藏(Hide)47 . jQuery UI 实例 – 切换(Toggle)48 . jQuery UI 实例 – 添加 Class(Add Class)49 . jQuery UI 实例 – 移除 Class(Remove Class)50 . jQuery UI 实例 – 切换 Class(Toggle Class)51 . jQuery UI 实例 – 转换 Class(Switch Class)52 . jQuery UI 实例 – 颜色动画(Color Animation)53 . jQuery UI 实例 – 定位(Position)54 . jQuery UI 实例 – 部件库(Widget Factory)

jQuery UI 实例 – 缩放(Resizable)

jQuery UI 实例 - 缩放(Resizable)

使用鼠标改变元素的尺寸。

如需了解更多有关 resizable 交互的细节,请查看 API 文档 可调整尺寸小部件(Resizable Widget)

默认功能

在任意的 DOM 元素上启用 resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放(Resizable) - 默认功能</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable();
  });
  </script>
</head>
<body>
 
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">缩放(Resizable)</h3>
</div>
 
 
</body>
</html>

动画

使用 animate 选项(布尔值)使缩放行为动画化。当该选项设置为 true 时,拖拽轮廓到所需的位置,元素会在拖拽停止时以动画形式调整到该尺寸。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放(Resizable) - 动画</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  .ui-resizable-helper { border: 1px dotted gray; }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      animate: true
    });
  });
  </script>
</head>
<body>
 
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">动画</h3>
</div>
 
 
</body>
</html>

限制缩放区域

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放(Resizable) - 限制缩放区域</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #container { width: 300px; height: 300px; }
  #container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
  #resizable { background-position: top left; width: 150px; height: 150px; }
  #resizable, #container { padding: 0.5em; }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      containment: "#container"
    });
  });
  </script>
</head>
<body>
 
<div id="container" class="ui-widget-content">
  <h3 class="ui-widget-header">限制</h3>
  <div id="resizable" class="ui-state-active">
    <h3 class="ui-widget-header">缩放(Resizable)</h3>
  </div>
</div>
 
 
</body>
</html>

延迟开始

通过 delay 选项设置延迟开始缩放的毫秒数。通过 distance 选项设置光标被按下且拖拽指定像素后才允许缩放。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放(Resizable) - 延迟开始</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3, #resizable2 h3 { text-align: center; margin: 0; }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      delay: 1000
    });
 
    $( "#resizable2" ).resizable({
      distance: 40
    });
  });
  </script>
</head>
<body>
 
<h3 class="docs">时间延迟 (ms):</h3>
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">时间</h3>
</div>
 
<h3 class="docs">距离延迟 (px):</h3>
<div id="resizable2" class="ui-widget-content">
  <h3 class="ui-widget-header">距离</h3>
</div>
 
 
</body>
</html>

助手

通过设置 helper 选项为一个 CSS class,当缩放时只显示元素的轮廓。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放(Resizable) - 助手</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  .ui-resizable-helper { border: 2px dotted #00F; }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      helper: "ui-resizable-helper"
    });
  });
  </script>
</head>
<body>
 
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">助手</h3>
</div>
 
 
</body>
</html>

最大/最小尺寸

使用 maxHeightmaxWidthminHeightminWidth 选项限制 resizable 元素的最大或最小高度或宽度。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放(Resizable) - 最大/最小尺寸</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable { width: 200px; height: 150px; padding: 5px; }
  #resizable h3 { text-align: center; margin: 0; }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      maxHeight: 250,
      maxWidth: 350,
      minHeight: 150,
      minWidth: 200
    });
  });
  </script>
</head>
<body>
 
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">放大/缩小</h3>
</div>
 
 
</body>
</html>

保持纵横比

保持现有的纵横比或设置一个新的纵横比来限制缩放比例。设置 aspectRatio 选项为 true,且可选地传递一个新的比率(比如,4/3)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放(Resizable) - 保持纵横比</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable { width: 160px; height: 90px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      aspectRatio: 16 / 9
    });
  });
  </script>
</head>
<body>
 
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">保持纵横比</h3>
</div>
 
 
</body>
</html>

对齐到网格

对齐 resizable 元素到网格。通过 grid 选项设置网格单元的尺寸(以像素为单位的高度和宽度)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放(Resizable) - 对齐到网格</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      grid: 50
    });
  });
  </script>
</head>
<body>
 
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">网格</h3>
</div>
 
 
</body>
</html>

同步缩放

通过点击并拖拽一个元素的边来同时调整多个元素的尺寸。给 alsoResize 选项传递一个共享的选择器。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放(Resizable) - 同步缩放</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable { background-position: top left; }
  #resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
  #resizable h3, #also h3 { text-align: center; margin: 0; }
  #also { margin-top: 1em; }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      alsoResize: "#also"
    });
    $( "#also" ).resizable();
  });
  </script>
</head>
<body>
 
<div id="resizable" class="ui-widget-header">
  <h3 class="ui-state-active">缩放</h3>
</div>
 
<div id="also" class="ui-widget-content">
  <h3 class="ui-widget-header">同步缩放</h3>
</div>
 
 
</body>
</html>

文本框

可缩放的文本框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放(Resizable) - 文本框</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  .ui-resizable-se {
    bottom: 17px;
  }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      handles: "se"
    });
  });
  </script>
</head>
<body>
 
<textarea id="resizable" rows="5" cols="20"></textarea>
 
 
</body>
</html>

视觉反馈

通过设置 ghost 选项为 true,可在缩放期间显示一个半透明的元素,而不是显示一个实际的元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放(Resizable) - 视觉反馈</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  .ui-resizable-ghost { border: 1px dotted gray; }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      ghost: true
    });
  });
  </script>
</head>
<body>
 
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Ghost</h3>
</div>
 
 
</body>
</html>