极客教程jQuery UI的resizable
jQuery UI的可调整大小的部件有助于拖动和调整所选元素的大小。
让我们写一段代码，在一个div标签内使用可调整的小部件。
语法:
$( "#my_resizable" ).resizable();
AlsoResize:这个选项允许你通过只控制一个小部件来平行地调整多个小部件的大小。
语法:
$( ".selector" ).resizable({
alsoResize: "#my_widget"
});
animate:该选项可用于为元素的大小调整添加动画。
语法:
$( ".selector" ).resizable({
animate: true
});
animateDuration:这个字段允许你选择你想让动画持续多长时间。
语法:
$( ".selector" ).resizable({
animateDuration: "fast"
});
animateEasing:这个选项说的是在调整大小的时候，你想在动画的结尾有什么样的缓和效果。
语法:
$( ".selector" ).resizable({
animateEasing: "easeOutBounce"
});
aspectRatio:这个选项需要一个布尔值来决定在调整小组件的大小时是否应该遵循一个特定的长宽比。
语法:
$( ".selector" ).resizable({
aspectRatio: true
});
autoHide:这个选项也需要一个布尔值，它决定当光标没有悬停在元素上时，是否要隐藏手柄。
语法:
$( ".selector" ).resizable({
autoHide: true
});
cancel:禁止调整所选特定元素的大小。
语法:
$( ".selector" ).resizable({
cancel: ".cancel"
});
classes:用于指定额外的类来添加到widgets。额外的类可以在jQuery UI的主题设置部分选择。
语法:
$( ".selector" ).resizable({
classes: {
"ui-resizable": "highlight"
}
});
disabled:取一个布尔值来决定是否禁用可调整大小的部件。
语法:
$( ".selector" ).resizable({
disabled: true
});
helper:一个类的名字，它将被添加到代理元素上，在拖动调整大小手柄的过程中勾勒出调整大小。一旦调整大小完成，原始元素的大小就会被调整。
语法:
$( ".selector" ).resizable({
helper: "resizable-helper"
});
handle:哪些handle可以用来调整大小。
支持多种类型：
- String。以逗号分隔的下列任何一项的列表。n, e, s, w, ne, se, sw, nw, all 。必要的手柄将由该插件自动生成。
- Object。支持以下按键。{ n, e, s, w, ne, se, sw, nw }。任何指定的值应该是一个jQuery的选择器，与resizable的子元素匹配，作为该句柄使用。如果句柄不是resizable的子元素，你可以直接传入DOMElement或一个有效的jQuery对象。
语法:
$( ".selector" ).resizable({
handles: "n, e, s, w"
});
其他重要属性：
- containment。该选项用于将可调整大小限制在一个最大和最小值。
- ghost：当被触发时，会显示一个半透明的帮助元素来调整大小。
- grid。网格选项用于在像素元素x和y中抓取调整元素。默认情况下，其值被设置为False。
- maxHeight:这个选项需要一个数字作为输入，并指定可调整大小的元素可以被允许扩展到的最大高度。
- maxWidth: 这个选项可以用来指定可调整大小的元素可以被允许扩展到的最大宽度。
- minHeight:这个小组件用来指定可调整大小的元素可以被允许压缩到的最小高度。
- minWidth: 这个选项可以用来指定可调整大小的元素可以被允许压缩到的最小宽度。
- destroy。该选项删除了jquery ui的工具提示部件，并将其改为本地工具提示。
- disable:该选项禁用工具提示小部件。
- enable:如果工具提示之前被禁用，该选项可以启用它。
- instance。检索可调整大小的实例对象。如果该元素没有一个相关的实例，则返回未定义。
- option。获取当前与选择的选项名称相关的值。
- widget。返回一个包含可调整大小对象的jQuery对象。
在下面的例子中，我们为div标签指定了各种属性，如边框、背景，以区分div标签内的内容和div标签外的内容。
示例 1:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<style>
#my_resizable {
height: 80px;
width: 80px;
background: #f1f1f1;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=my_resizable></div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
("#my_resizable").resizable();
})
</script>
</center>
</body>
</html>
输出:
alsoresize：使用alsoresize选项，我们可以通过调整前一个元素的尺寸来控制另一个元素的尺寸。下面是一个例子，我们通过调整另一个div标签的大小来调整一个div标签的大小。
示例 2:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<style>
.my_box {
height: 80px;
width: 80px;
background: #f1f1f1;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=my_resizable class=my_box></div>
<div id=my_resizable2 class=my_box></div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
("#my_resizable").resizable({
alsoResize: "#my_resizable2"
});
})
</script>
</center>
</body>
</html>
输出:
animate:使用animate选项，我们可以为元素的大小变化方式添加动画效果。我们通过设置其值为True来实现。默认情况下，它被设置为false。
这里有一个示范性的代码。
示例 3:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<style>
.my_box {
height: 80px;
width: 80px;
background: #f1f1f1;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=my_resizable class=my_box></div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
("#my_resizable").resizable({
animate: true
});
})
</script>
</center>
</body>
</html>
输出:
animationDuration:使用animationDuration我们可以指定我们希望动画调整元素大小的速度。下面是一个例子。
示例 4:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<style>
.my_box {
height: 80px;
width: 80px;
background: #f1f1f1;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=my_resizable class=my_box></div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
("#my_resizable").resizable({
animate: true,
animateDuration: "fast"
});
})
</script>
</center>
</body>
</html>
输出:
animateEasing:它为animate选项添加了一个额外的效果，你可以在jQuery代码中指定效果。我们已经使用了”easeOutBounce”。
示例 5:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<style>
.my_box {
height: 80px;
width: 80px;
background: #f1f1f1;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=my_resizable class=my_box></div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
("#my_resizable").resizable({
animate: true,
animateEasing: "easeOutBounce"
});
})
</script>
</center>
</body>
</html>
输出:
