Membuat Selectable dengan jQuery

Membuat Selectable dengan jQuery

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat selectable dengan menggunakan jQuery.

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

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Membuat Selectable dengan jQuery</title>
  <style>
    .selectable {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    .selectable li {
      margin: 3px;
      padding: 10px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    .selectable li.ui-selected {
      background-color: #ccc;
    }
  </style>
  <link rel="stylesheet" href="//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>
  <script>
    $(function() {
      $(".selectable").selectable();
    });
  </script>
</head>
<body>
  <ul class="selectable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</body>
</html>
HTML

Dengan menggunakan kode di atas, Anda dapat membuat daftar item yang dapat dipilih dengan menggunakan jQuery. Setiap item dalam daftar akan memiliki latar belakang berwarna abu-abu (#f0f0f0) dan bingkai dengan warna abu-abu (#ccc). Ketika item dipilih, latar belakangnya akan berubah menjadi abu-abu yang lebih gelap (#ccc).

Anda dapat mengganti daftar item dengan item-item yang sesuai dengan kebutuhan Anda. Selain itu, Anda juga dapat menyesuaikan gaya CSS untuk mencocokkan tampilan selectable dengan desain Anda.

Tutorial lainnya:

Semoga contoh kode di atas dapat membantu Anda dalam membuat selectable menggunakan jQuery dalam form HTML.

Artikel Terbaru ⭐