Табы для сайта на jQuery

21 октября 2014 Антон Кулешов 1472 2

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

Реклама

Для начала нам нужно будет скачать архив с jQuery плагином, который находиться на странице github.

Далее подключаем скрипты и стили к своему проекту:

<link href="tabulous.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.min.js"></script>

В теле HTML документа создаём следующую структуру:

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Таб 1</a></li>
		<li><a href="#tabs-2">Таб 2</a></li>
		<li><a href="#tabs-3">Таб 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>

Как видите, в разметке нет ничего сложного. У нас есть ссылки с названиями табов и сами блоки с контентом. Для того что бы добавить ещё один таб потребуются дописать бок с контентом указав ему id и ссылку в пути которой будет этот же id.

После всех подготовительных действий вызываем новый появившийся метод tabulous() применительно к элементу div с id=tabs.

$("#tabs").tabulous();

У плагина есть четыре варианта анимации при переключении: scale, slideLeft, scaleUp, flip. Изменять их можно указав в настройке effect.

$("#tabs").tabulous({
	effect: "scale"
});

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

Реклама
ti1schweiger
ti1schweiger 7 ноября 2014
Довольно удобные табы для редактирования стилей.
Антон Кулешов
Антон Кулешов 7 ноября 2014
Мне тоже данный плагин понравился, когда я на него наткнулся.
no_avatar
Читайте далее

Ajax-загрузка данных на сервер

16 июля 2015 Антон Кулешов

Хороший скрипт – это инструмент, который сэкономит вам массу времени и нервных клеток при разработке веб-приложения. По своему опыту создания сайтов знаю, что значительную часть времени приходиться тратить именно на поиск готовых «велосипедов» и решений, которые упрощают нашу работу. Сегодня мы затронем одну из важнейших тем – загрузка файлов или картинок на сервер при помощи ajax. И, хотя есть множество статьей и скриптов, я расскажу своё видение данной проблемы и её решения у себя в проекте.

О том, как я не очень «легко» коротал вечер в компании приложений Facebook

14 января 2016 Антон Кулешов

Миром овладели соцсети, а потому, мало кто станет регистрироваться на сайте или форуме, заполняя при этом кучу полей, добавляя аватарку и прочее. Дабы привлечь посетителей нам придется использовать API социальных сетей – где уже есть вся нужная нам информация для оформления профиля. Ранее мы уже рассматривали один из способов авторизации пользователя через «ВКонтакте», сегодня поговорим о Facebook.

Кнопка «Добавить в избранное» на JavaScript

25 декабря 2014 Антон Кулешов

Наверняка на многих сайтах вы видели кнопку «Добавить в избранное» и у вас мог возникнуть вопрос, как реализовать у себя в проекте такой же функционал.