RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Апр
21

Эффектные табы для сайта

Всем привет. Табы можно использовать как для переключения отдельных статей, содержащих огромное количество информации, так и для помещения в них отдельно блока с новостями, категориями, подписками в общем всего, что вздумается. Сегодняшняя наша с вами задача: сделать модель табов работающую на скрипте JQuery и которая может использоваться абсолютно на любом сайте будь это WordPress, Joomla, или другая любая известная Вам CMS или на самом обычном сайте построенном на HTML.

В конце этой статьи Вы можете посмотреть пример данного скрипта в работе и скачать все исходные файлы, которые понадобятся для установки его на сайт.
Далее опишем подробную инструкцию по установке этого скрипта. Итак начнем.

табы на сайт

Подключение скриптов табов

  В HTML код страницы вам нужно подключить готовый файл данного скрипта, и скрипта различных эффектов, которые прилагаются в исходниках. Для этого, через FTP загрузите файл tabulous.js в папку с вашими скриптами, если такая имеется укажите путь к данному файлу. Если же такой папки нет то создайте папку с название «js» в корневом каталоге вашего сайта и поместите туда файл скрипта. Далее после тега HEAD добавьте следующий код, предварительно заменив слова «ваш сайт» на Url сайта:

<script type="text/javascript" src="http://ваш сайт/js/tabulous.js"></script>

<script type="text/javascript" src="http://ваш сайт/js/js.js"></script>

Важно! Не забывайте подключать библиотеки JQuery. Многие используют библиотеки с сервера Google. Для этого в тоже место вашего HTML кода вставьте следующие строки:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Это делается один раз и навсегда и в следующий раз, когда будете подключать другие скрипты этого делать не понадобится.

Подключаем CSS стили вкладок

  Чтобы наши вкладки (табы) приобрели хоть какой-то вид, нам нужно подключить CSS стили. Для этого загрузите файл tabulous.css из архива через FTP в папку, где лежат стили вашего сайта, меняете путь к нему и добавляете строку со следующим кодом:

<link href='http://путь к файлу стилей tabulous.css' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

Итак, все скрипты и стили мы подключили, теперь нам нужно вставить основной HTML код вкладок, который и будет отвечать за отображение наших вкладок (табов) на сайте.

Добавляем вкладки на сайт

  После тега BODY, в то место где будут располагаться наши вкладки, добавляем следующий HTML код:

<div id="tabs">
<ul>

<!--названия табов Tab 1 и.т.д-->

<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">

<!--содержание первого таба-->

</div>
<div id="tabs-2">

<!--содержание второго таба-->

</div>
<div id="tabs-3">
<!--содержание третьего таба-->
</div>
</div><!--Конец контейнера с содержанием табов-->
</div><!--Конец общего блока вкладок-->
Изменение количества вкладок (табов)

Для того, чтобы добавить или удалить вкладки нужно сделать следующее:

  • В том месте где прописывается название вкладок просто удалите ненужные вам вкладки. Не забывайте в этом случает удалить контент относящий к этой вкладке.

demodownload

Совместимость вкладок (табов) с браузерами

Проверено на Opera, Firefox, Mozilla, Chrome.

На этом наш урок по установке модуля с вкладками на сайт закончен. надеюсь все было понятно, если нет оставляйте комментарии, отвечу на все вопросы.

Желаю удачи.

Получай первым обновления блога!

Введите Ваш e-mail:

Оставить комментарий


вверх