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

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

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

Parichat
PHP VIP Members
PHP VIP Members
Posts: 4859
Joined: 08/01/2018 10:03 am

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

Post by Parichat »

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

    Code: Select all

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

    Code: Select all

    /* 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

    Code: Select all

    <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>
ตัวอย่าง

Code: Select all

<!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_j ... d_view.asp
Live Simply, Laugh Often, Love Deeply.....
  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: Google Adsense [Bot] and 4 guests