كيفية إنشاء: عرض القائمة والشبكة

عرض القائمة والشبكة

الخطوة الأولى - إضافة HTML:

حلقة تحميل مكتبة أيقونات Font Awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
حلقة اختيار عرض القائمة أو الشبكة
<button onclick="listView()"><i class="fa fa-bars"></i> قائمة</button>
<button onclick="gridView()"><i class="fa fa-th-large"></i> شبكة</button>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>عمود 1</h2>
    <p>نص بعض...</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>عمود 2</h2>
    <p>نص بعض...</p>
  </div>
</div>
<div class="row">
  <div class="column" style="background-color:#ccc;">
    <h2>عمود 3</h2>
    <p>نص بعض...</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>عمود 4</h2>
    <p>نص بعض...</p>
  </div>
</div>

الخطوة الثانية - إضافة CSS:

/* يتم إنشاء عمودين متساويين العرض، مما يجعلهم يطفون معًا */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}
/* يتم تنظيف الع浮动 بعد الأعمدة */
.row:after {
  content: "";
  display: table;
  clear: both;
}

الخطوة الثالثة - إضافة JavaScript:

// يتم الحصول على العناصر التي تحتوي على class="column"
var elements = document.getElementsByClassName("column");
// يتم إعلان متغير الدوران
var i;
// عرض قائمة
function listView() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "100%"; // يضبط عرض كل عنصر إلى 100%
  }
}
// عرض شبكة
function gridView() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "50%"; // يضبط عرض كل عنصر إلى 50%
  }
}