Ефектні таби для сайту
Наприкінці цієї статті Ви можете переглянути приклад даного скрипту в роботі та завантажити всі вихідні файли, які знадобляться для встановлення його на сайт. Далі опишемо докладну інструкцію щодо встановлення цього скрипта. Тож почнемо.
Підключення скриптів табів
У HTML-коді сторінки вам потрібно підключити готовий файл даного скрипта, і скрипта різних ефектів, які додаються у вихідних записах. Для цього, за допомогою FTP завантажте файлtabulous.js у папку з вашими скриптами, якщо така є вкажіть шлях до цього файлу. Якщо ж такої папки немає, то створіть папку з назвою «js» у кореневому каталозі вашого сайту і помістіть туди файл скрипту. Далі після тега HEAD додайте наступний код, попередньо замінивши слова "ваш сайт" на Url сайту:
Важливо! Не забувайте підключати бібліотеки JQuery. Багато хто використовує бібліотеки із сервера Google. Для цього в те ж місце вашого HTML коду вставте наступні рядки:
Це робиться один раз і назавжди і наступного разу, коли підключатимете інші скрипти, цього робити не знадобиться.
Підключаємо CSS стилі вкладок
Щоб наші вкладки (таби) набули хоч якогось вигляду, нам потрібно підключити CSS стилі. Для цього завантажте файл tabulous.css з архіву через FTP до папки, де лежать стилі вашого сайту, змінюєте шлях до нього та додаєте рядок з наступним кодом:
Отже, всі скрипти та стилі ми підключили, тепер нам потрібно вставити основний HTML код вкладок, який відповідатиме за відображення наших вкладок (табів) на сайті.
Додаємо вкладки на сайт
Після тегу BODY, в те місце де будуть розміщуватися наші вкладки, додаємо наступний HTML код:
Зміна кількості вкладок (табів)
Для того, щоб додати або видалити вкладки, потрібно зробити таке:
- Там, де прописується назва вкладок, просто видаліть непотрібні вам вкладки. Не забувайте в цьому випадку видалити контент, що відноситься до цієї вкладки.
Сумісність вкладок (табів) з браузерами
Перевірено на Opera, Firefox, Mozilla, Chrome.