Membuat Resizable dengan jQuery

Membuat Resizable dengan jQuery

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat elemen dapat diubah ukurannya (resizable) dengan menggunakan jQuery.

See the Pen Membuat Resizable dengan jQuery by WebbizID (@De-Orchids) on CodePen.

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Resizable dengan jQuery</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    .resizable {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
  <script>
    $(document).ready(function() {
      $(".resizable").resizable();
    });
  </script>
</head>
<body>
  <div class="resizable">
    <p>Ini adalah elemen yang dapat diubah ukurannya.</p>
  </div>
</body>
</html>
HTML

Dengan menggunakan kode di atas, Anda dapat membuat elemen dengan kelas “resizable” dapat diubah ukurannya. Ketika Anda menyeret sudut atau sisi elemen tersebut, ukurannya akan berubah sesuai dengan perubahan yang Anda lakukan.

Pastikan Anda telah menyertakan library jQuery dan jQuery UI pada halaman HTML Anda. Kemudian, pada bagian JavaScript, Anda perlu memanggil fungsi resizable() pada elemen yang ingin Anda buat dapat diubah ukurannya. Dalam contoh di atas, kita menggunakan kelas “resizable” untuk menandai elemen yang akan diubah ukurannya.

Anda juga dapat menyesuaikan gaya elemen yang dapat diubah ukurannya dengan menggunakan CSS. Dalam contoh di atas, kita memberikan elemen tersebut lebar dan tinggi awal sebesar 200 piksel, dengan border, padding, dan gaya lainnya yang sesuai dengan kebutuhan Anda.

Dengan menggunakan kode di atas, Anda dapat dengan mudah membuat elemen-elemen yang dapat diubah ukurannya dengan bantuan jQuery. Selamat mencoba!

Artikel Terbaru ⭐