โดย 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คอลัมน์
ผลลัพธ์แบบที่ 2 เป็นการแสดงแบบ
listรายการ
อ้างอิง:
https://www.w3schools.com/howto/howto_j ... d_view.asp
[b][color=#FF00BF][size=150]วิธีการสร้าง grid view. โดยมีวิธีการทำ list grid view.[/size][/color][/b]ดังนี้
[list]ขั้นตอนที่ 1.ทำการเพิ่มโค้ด HTML
[code]<!-- 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>[/code][/list]
[list]ขั้นตอนที่ 2.ทำการเพิ่มโค้ด [url=https://www.mindphp.com/forums/viewforum.php?f=73]CSS[/url]
[code]/* 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;
}[/code][/list]
[list]ขั้นตอนที่ 3.ทำการเพิ่มโค้ด [url=https://www.mindphp.com/forums/viewforum.php?f=78]JavaScript[/url]
[code]<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][/list]
[color=#FF0000][b]ตัวอย่าง[/b][/color]
[code]<!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>[/code]
[color=#FF0000][b]ผลลัพธ์แบบที่ 1[/b][/color] เป็นการแสดงข้อมูลแบบ [b]2แถว2คอลัมน์[/b]
[attachment=1]yyr.JPG[/attachment]
[color=#FF0000][b]ผลลัพธ์แบบที่ 2[/b][/color] เป็นการแสดงแบบ [b]listรายการ[/b]
[attachment=0]rtyt.JPG[/attachment]
อ้างอิง: [url]https://www.w3schools.com/howto/howto_js_list_grid_view.asp[/url]