Boleh diubah saiz


Gunakan tetikus anda untuk menukar saiz elemen.

Untuk butiran lanjut tentang interaksi boleh ubah saiz, lihat dokumentasi API untuk Widget Boleh Diubah.

Kefungsian lalai

Dayakan kefungsian boleh ubah saiz pada mana-mana elemen DOM. Seret sempadan kanan atau bawah dengan tetikus ke lebar atau ketinggian yang dikehendaki.

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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Animasi

Gunakan pilihan animate (boolean) untuk menghidupkan gelagat zum. Apabila pilihan ini ditetapkan kepada benar, seret garis besar ke kedudukan yang diingini dan elemen akan bernyawa kepada saiz itu apabila menyeret berhenti.

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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Hadkan kawasan zum

Tentukan sempadan kawasan zum. Gunakan pilihan containment untuk menentukan elemen DOM induk atau pemilih jQuery, seperti 'dokumen.'

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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Tunda mula

Tetapkan bilangan milisaat untuk menangguhkan permulaan penskalaan melalui pilihan delay. Gunakan pilihan distance untuk menetapkan kursor untuk ditekan dan diseret ke piksel yang ditentukan sebelum zum dibenarkan.

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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Pembantu

Dengan menetapkan pilihan helper kepada kelas CSS, hanya garis besar elemen akan dipaparkan apabila dizum.

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>

Run instance »

Klik butang "Run Instance" untuk melihat instance dalam talian

Saiz Maksimum/Minimum

Hadkan ketinggian maksimum atau minimum elemen boleh ubah saiz menggunakan maxHeight, maxWidth, minHeight dan minWidth pilihan atau lebar.

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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Kekalkan nisbah bidang

Kekalkan nisbah bidang sedia ada atau tetapkan nisbah bidang baharu untuk mengehadkan penskalaan. Tetapkan pilihan aspectRatio kepada benar dan secara pilihan lulus nisbah baharu (cth., 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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Jajarkan ke grid

Jajarkan elemen boleh ubah saiz ke grid. Tetapkan dimensi sel grid (tinggi dan lebar dalam piksel) melalui pilihan 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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Penskalaan disegerakkan

Ubah saiz berbilang elemen serentak dengan mengklik dan menyeret bahagian tepi elemen. Hantar pemilih kongsi kepada pilihan 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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Kotak Teks

Kotak teks boleh skala.

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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Maklum Balas Visual

Dengan menetapkan pilihan ghost kepada benar, elemen lut sinar boleh dipaparkan semasa zum dan bukannya menunjukkan elemen sebenar .

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>

Jalankan contoh »

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian