Isotope.js
Isotope.js to biblioteka JavaScript, która umożliwia dynamiczne układanie i filtrowanie elementów na stronie internetowej. Dzięki niej można łatwo tworzyć interaktywne galerie obrazów, portfolio, czy listy produktów. Isotope.js oferuje wiele opcji konfiguracji, co pozwala na dostosowanie układu do indywidualnych potrzeb projektu.
Kluczowe funkcje Isotope.js
- Dynamiczne układanie: Elementy są automatycznie układane w optymalny sposób, aby wypełnić dostępne miejsce.
- Filtrowanie: Możliwość filtrowania elementów na podstawie określonych kryteriów.
- Sortowanie: Elementy mogą być sortowane według różnych parametrów, takich jak data, nazwa, czy kategoria.
- Animacje: Płynne animacje podczas zmiany układu, filtrowania czy sortowania elementów.
Więcej informacji na temat Isotope.js można znaleźć na oficjalnej stronie biblioteki.
Isotope
Isotope to potężna biblioteka do tworzenia dynamicznych i responsywnych układów, umożliwiająca filtrowanie, sortowanie i piękne aranżowanie elementów. Poniżej znajdziesz prosty przykład, jak używać Isotope do filtrowania elementów, sortowania ich oraz wyjaśnienia.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Isotope Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
<link rel="stylesheet" href="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js">
<style>
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 30%;
margin: 5px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<button id="filter-all">Show All</button>
<button id="filter-one">Filter One</button>
<button id="filter-two">Filter Two</button>
<button id="sort-asc">Sort Ascending</button>
<button id="sort-desc">Sort Descending</button>
</div>
<div class="grid">
<div class="grid-item" data-category="one">Item 1</div>
<div class="grid-item" data-category="two">Item 2</div>
<div class="grid-item" data-category="one">Item 3</div>
<div class="grid-item" data-category="two">Item 4</div>
<div class="grid-item" data-category="one">Item 5</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>
$(document).ready(function () {
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'fitRows',
getSortData: {
name: function (itemElem) {
return $(itemElem).text();
}
}
});
$('#filter-all').on('click', function () {
$grid.isotope({ filter: '*' });
});
$('#filter-one').on('click', function () {
$grid.isotope({ filter: '[data-category="one"]' });
});
$('#filter-two').on('click', function () {
$grid.isotope({ filter: '[data-category="two"]' });
});
$('#sort-asc').on('click', function () {
$grid.isotope({ sortBy: 'name', sortAscending: true });
});
$('#sort-desc').on('click', function () {
$grid.isotope({ sortBy: 'name', sortAscending: false });
});
});
</script>
</body>
</html>
Code Review
Language Adjustments: Wszystkie etykiety przycisków i teksty elementów siatki zostały zmienione na język polski.
„Show All” to teraz „Pokaż Wszystko”. „Filter One” to teraz „Filtruj Kategoria 1”. „Filter Two” to teraz „Filtruj Kategoria 2”. „Sort Ascending” to teraz „Sortuj Rosnąco”. „Sort Descending” to teraz „Sortuj Malejąco”. Elementy siatki: Tekst wewnątrz elementów siatki został przetłumaczony na język polski, zmieniając „Item X” na „Element X” dla jasności.
Możesz teraz użyć tego fragmentu kodu, aby stworzyć interfejs filtrowania i sortowania dostosowany do polskojęzycznych użytkowników! Daj mi znać, jeśli potrzebujesz dalszych modyfikacji lub wyjaśnień.
Dodaj komentarz
Musisz się zalogować, aby móc dodać komentarz.