如何 TO - 列表網格檢視
如何建立列表網格檢視。
單擊按鈕選擇列表檢視或網格檢視。
列 1
一些文字..
列 2
一些文字..
列 3
一些文字..
列 4
一些文字..
自己動手試一試 »
列表網格檢視
步驟 1) 新增 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>
步驟 2) 新增 CSS
示例
/* 建立兩個相等的浮動列 */
.column {
float: left;
width: 50%;
padding: 10px;
}
/* 清除列後的浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
步驟 3) 新增 JavaScript
示例
// 獲取 class="column" 的元素
var elements = document.getElementsByClassName("column");
// 宣告一個迴圈變數
var i;
// 列表檢視
function listView() {
for (i = 0; i < elements.length; i++) {
elements[i].style.width = "100%";
}
}
// 網格檢視
function gridView() {
for (i = 0; i < elements.length; i++) {
elements[i].style.width = "50%";
}
}
自己動手試一試 »
