Как сделать - Представление сетки списка
Узнать, как создать представление сетки списка с CSS и JavaScript.
Нажмите на кнопку, чтобы выбрать вид списка или вид сетки.
Колонка 1
Некоторый текст..
Колонка 2
Некоторый текст..
Колонка 3
Некоторый текст..
Колонка 4
Некоторый текст..
Редактор кода »
Представление cетки cписка
Шаг 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%";
}
}
Редактор кода »