How To

Cara Membuat List Grid View

Di bawah ini kita akan mempelajari cara membuat tampilan kisi daftar.

Klik pada tombol untuk memilih tampilan daftar atau tampilan kisi

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
  box-sizing: border-box;
}

/* Buat dua kolom yang sama yang mengapung di samping satu sama lain */.column {
  float: left;
  width: 50%;
  padding: 10px;
}

/* Hapus floats setelah columns */.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Style untuk buttons */.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;
}
</style>
</head>
<body>

<h2>List View or Grid View</h2>

<p>Klik pada tombol untuk memilih tampilan daftar atau tampilan kisi.</p>

<div id="btnContainer">
  <button class="btn" >var elements = document.getElementsByClassName("column");

// Deklarasikan variabel loop
var i;

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

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

/* Opsional: Tambahkan kelas aktif ke tombol saat ini (sorot) */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>

</body>
</html>

Tampilan Kotak Daftar

Langkah 1) Tambahkan HTML:
Contoh

<div id="btnContainer">
  <button class="btn" >

Langkah 2) Tambahkan CSS:
Contoh

/* Buat dua kolom yang sama yang mengapung di samping satu sama lain */.column {
  float: left;
  width: 50%;
  padding: 10px;
}

/* Hapus floats setelah columns */.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Style untuk buttons */.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;
}

Langkah 3) Tambahkan JavaScript:
Contoh

// Dapatkan elemen dengan class = "column"
var elements = document.getElementsByClassName("column");

// Deklarasikan variabel loop
var i;

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

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

/* Opsional: Tambahkan kelas aktif ke tombol saat ini (sorot) */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";
  });
}

Hanifah Nurbaeti

Share
Tags: CSSHow To