Створіть адаптивні віджети з вкладками з GridTab

Завжди легше створювати веб-сайти за допомогою інструменти з відкритим кодом замість того, щоб винаходити колесо. Ці інструменти варіюються від бібліотек до дрібних плагінів, але ви можете знайти рішення для будь-якої справи.

Феноменальний jQuery GridTab плагін це один прекрасний приклад. Це дозволяє налаштувати власну сітку, визначити точки зупину, і створити відповідний віджет із вкладками який підходить будь-якому сайту.

Ви можете додати власні класи CSS або працювати з існуючими, щоб створити функцію вкладки, яка відповідає вашому дизайну. Цей плагін також підтримує елементи навігації для наступного / попереднього контролю і перемикання між вкладками.

Установка є легким, і вона вимагає лише jQuery бібліотека як залежність. Після встановлення ви можете отримати GridTab з npm або завантажити його безпосередньо з GitHub.

Майте на увазі, що цей плагін для вкладки з вкладками має стиль за замовчуванням, так що у нього є окремої таблиці стилів CSS поверх файлу модуля JS. Проте, ви завжди можете об'єднати цей CSS у свій власний, щоб зменшити HTTP-запити.

Щоб ініціалізувати плагін, ви просто передаєте загальний розмір сітки разом з будь-який необов'язковий параметр (усі перераховані в GitHub).

Ось простий сценарій ініціалізації:

 $ (document) .ready (function () $ ('# gridtab-1'). gridtab (grid: 3);); 

Налаштування включають користувальницькі селектори, чуйні стилі, налаштування рамки / відступу / кольору, і, звичайно, a функція зворотного виклику.

Можливо, вам буде цікаво побачити, як все це працює і як він виглядає у вашому браузері. Перевірте “Демос” розділ, щоб побачити a Кілька прикладів, у тому числі вихідний код можна скопіювати.

Більшість людей вважають вкладки функціями для невеликих віджетів профілю. Однак, веб-сайти портфоліо також можете використовувати сітки з вкладками і плагін GridTab є найкращим ресурсом для забивання цього ефекту.

Все, що потрібно знати, в тому числі повна документація, можна знайти на головній сторінці GridTab. Це також включає посилання на репо GitHub, щоб ви могли переглядати джерело та починати налаштовувати власні відповідні вкладки.