การจัดข้อมูลในเว็บโดยใช้ grid view.

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1394
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การจัดข้อมูลในเว็บโดยใช้ grid view.

โพสต์โดย Parichat » 10/01/2018 11:06 am

วิธีการสร้าง grid view. โดยมีวิธีการทำ list grid view.ดังนี้
    ขั้นตอนที่ 1.ทำการเพิ่มโค้ด HTML

    โค้ด: เลือกทั้งหมด

    <!-- Load Font Awesome Icon Library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Buttons to choose list or grid view -->
    <button onclick="listView()"><i class="fa fa-bars"></i> List</button>
    <button onclick="gridView()"><i class="fa fa-th-large"></i> Grid</button>

    <div class="row">
      <div class="column" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#bbb;">
        <h2>Column 2</h2>
        <p>Some text..</p>
      </div>
    </div>

    <div class="row">
      <div class="column" style="background-color:#ccc;">
        <h2>Column 3</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#ddd;">
        <h2>Column 4</h2>
        <p>Some text..</p>
      </div>
    </div>
    ขั้นตอนที่ 2.ทำการเพิ่มโค้ด CSS

    โค้ด: เลือกทั้งหมด

    /* Create two equal columns that floats next to each other */
    .column {
        float: left;
        width: 50%;
        padding: 10px;
    }

    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    ขั้นตอนที่ 3.ทำการเพิ่มโค้ด JavaScript

    โค้ด: เลือกทั้งหมด

    <script>
    // Get the elements with class="column"
    var elements = document.getElementsByClassName("column");

    // Declare a loop variable
    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%";
        }
    }

    // Add active class to the current button (highlight it)
    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>

ตัวอย่าง

โค้ด: เลือกทั้งหมด

<!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;
}

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 10px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/* Style the buttons */
.btn {
    border: none;
    outline: none;
    padding: 12px 16px;
    background-color:  #ffcce6;
    cursor: pointer;
}

.btn:hover, .active {
    background-color: #ff4da6;
    color: white;
}
</style>
</head>
<body>

<h2>ทดสอบการใช้งาน List View or Grid View</h2>

<p>คลิกที่ปุ่ม list view เพื่อเปลี่ยนให้เป็นรายการลงมา หรือจะคลิกปุ่ม grid view เพื่อเปลี่ยนเป็นตาราง4ช่อง</p>

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

<div class="row">
  <div class="column" style="background-color:#e6ffff;">
    <h2>ช่องที่ 1</h2>
    <p>1...</p>
  </div>
  <div class="column" style="background-color:#ccffff;">
    <h2>ช่องที่ 2</h2>
    <p>2...</p>
  </div>
</div>

<div class="row">
  <div class="column" style="background-color:#b3ffff;">
    <h2>ช่องที่ 3</h2>
    <p>3...</p>
  </div>
  <div class="column" style="background-color:#99ffff;">
    <h2>ช่องที่ 4</h2>
    <p>4...</p>
  </div>
</div>

<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");

// Declare a loop variable
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%";
    }
}

// Add active class to the current button (highlight it)
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>

ผลลัพธ์แบบที่ 1 เป็นการแสดงข้อมูลแบบ 2แถว2คอลัมน์
yyr.JPG


ผลลัพธ์แบบที่ 2 เป็นการแสดงแบบ listรายการ
rtyt.JPG


อ้างอิง: https://www.w3schools.com/howto/howto_js_list_grid_view.asp
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน