Redimensionnable
Utilisez votre souris pour modifier la taille d'un élément.
Pour plus de détails sur les interactions redimensionnables, consultez la documentation de l'API pour les widgets redimensionnables.
Fonctionnalité par défaut
Activer la fonctionnalité redimensionnable sur n'importe quel élément DOM. Faites glisser la bordure droite ou inférieure avec la souris jusqu'à la largeur ou la hauteur souhaitée.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 默认功能</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Animation
Utilisez l'option animate (booléenne) pour animer le comportement du zoom. Lorsque cette option est définie sur true, faites glisser le contour vers la position souhaitée et l'élément s'animera à cette taille lorsque le glissement s'arrêtera.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 动画</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Limiter la zone de zoom
Définissez les limites de la zone de zoom. Utilisez l'option containment pour spécifier un élément DOM parent ou un sélecteur jQuery, tel que « document ».
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 限制缩放区域</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Départ différé
Définissez le nombre de millisecondes pour retarder le début de la mise à l'échelle via l'option delay. Utilisez l'option distance pour que le curseur soit enfoncé et déplacé vers le pixel spécifié avant que le zoom ne soit autorisé.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 延迟开始</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Assistant
En définissant l'option helper sur une classe CSS, seul le contour de l'élément sera affiché lors du zoom.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 助手</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Taille maximale/minimale
Limiter la hauteur maximale ou minimale des éléments redimensionnables à l'aide des touches maxHeight, maxWidth, minHeight et minWidth options ou largeur.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 最大/最小尺寸</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Conserver le rapport hauteur/largeur
Conserver le rapport hauteur/largeur existant ou définir un nouveau rapport hauteur/largeur pour limiter la mise à l'échelle. Définissez l'option aspectRatio sur true et transmettez éventuellement un nouveau ratio (par exemple, 4/3).
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 保持纵横比</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Aligner sur la grille
Aligner les éléments redimensionnables sur la grille. Définissez les dimensions des cellules de la grille (hauteur et largeur en pixels) via les options grid.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 对齐到网格</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Mise à l'échelle synchronisée
Redimensionnez plusieurs éléments simultanément en cliquant et en faisant glisser les côtés d'un élément. Passez un sélecteur partagé à l'option alsoResize.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 同步缩放</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Zone de texte
Zone de texte évolutive.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 文本框</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Retour visuel
En définissant l'option ghost sur true, un élément translucide peut être affiché pendant le zoom au lieu d'afficher un élément réel .
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 视觉反馈</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/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>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
