Membuat Tampilan List View dan Grid View Menggunakan Javascript

Haloo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Tampilan List View dan Grid View Menggunakan Javascript. List atau Grid view biasa diterapkan di halaman produk pada sebuah website online shop, salah satunya seperti online shop JD.ID dan berikut tampilan websitenya.

Nah sekarang kita akan coba Membuat Tampilan List View dan Grid View Menggunakan Javascript. Langkah pertama kita buat struktur htmlnya seperti script di bawah ini.

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Tampilan List View dan Grid View Menggunakan Javascript</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <div class="container">
    <h2>List View or Grid View</h2>
    <p>Tekan Tombol untuk memilih List View atau Grid View</p>

    <div id="btnContainer">
      <button class="btn" onclick="listView()"><i class="fa fa-bars"></i> List</button> 
      <button class="btn active" onclick="gridView()"><i class="fa fa-th-large"></i> Grid</button>
    </div>
    <br>

    <div class="row">
      <div class="column satu">
        <img src="images/Chrysanthemum.jpg">
        <h2>Column 1</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
      <div class="column dua">
        <img src="images/Desert.jpg">
        <h2>Column 2</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
    </div>

    <div class="row">
      <div class="column tiga">
        <img src="images/Hydrangeas.jpg">
        <h2>Column 3</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
      <div class="column empat">
        <img src="images/Koala.jpg">
        <h2>Column 4</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
    </div>
  </div>
</body>
</html>

Jika sudah maka kita buat terlebih dahulu style cssnya dan berikut scriptnya.

<style>
  * {
      box-sizing: border-box;
  }
  .container{
    margin:auto;
    background: salmon;
    padding: 10px;
    width: 900px;
  }
  .column {
      float: left;
      width: 50%;
      padding: 10px;
  }
  .row:after {
      content: "";
      display: table;
      clear: both;
  }
  .satu{
      background: #aaa;
  }
  .dua{
      background: #bbb;
  }
  .tiga{
      background: #ccc;
  }
  .empat{ 
      background: #ddd;
  }
  .btn {
      border: none;
      outline: none;
      padding: 12px 16px;
      background-color: #f1f1f1;
      cursor: pointer;
  }
  .btn:hover {
      background-color: #ddd;
  }

  .btn.active {
      background-color: #666;
      color: white;
  }
  img{
    width: 150px;
    float: left;
    margin-right: 10px;
  }
  </style>

Setelah selesai maka tahap terakhir teman-teman buat javascript untuk membuat tampilan list dan gridnya saat tombol di klik.

<script>
    var elements = document.getElementsByClassName("column");

    var i;

    function listView() {
        for (i = 0; i < elements.length; i++) {
            elements[i].style.width = "100%";
        }
    }

    function gridView() {
        for (i = 0; i < elements.length; i++) {
            elements[i].style.width = "50%";
        }
    }

    var container = document.getElementById("btnContainer");
    var btns = container.getElementsByClassName("btn");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function(){
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      });
    }
    </script>

Maka tampilannya akan seperti pada gambar di bawah ini ya teman-teman.

Gambar pertama adalah tampilan dengan format grid dan gambar kedua tampilan dengan format list. Demikian Artikel tentang Membuat Tampilan List View dan Grid View Menggunakan Javascript. Semoga bermanfaat dan selamat mencoba ya teman-teman.