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

Данная система вкладок позволит сохранить пространство, и красиво структурировать информацию для посетителя привлекая к ярким вкладкам, вот как выглядит эта система вкладок:

Как всегда, нам необходимо создать элементы разметки HTML, которая будет иметь следующий вид:

Разметка проста и не должна вызвать у вас трудностей, если вы хотите расширить количество вкладок, можно это сделать следующим образом, при этом так же поправить информацию в JavaScript’e:

Вот так будет выглядеть разметка для каждой вкладки. Она состоит из элемента li, который находится внутри неупорядоченного списка .tabContainer выше, и содержит ссылку с двумя span.

Теперь начинаем стилизацию с помощью CSS стилей:

Приведенный код использует свойство box-shadow, которое добавляет тени под вкладками (#tabContent div и #contentHolder). Затем свойство text-shadow, которое отвечает за цветную тень (outer glow другими словами) вокруг вкладок.

Затем подключаем библиотеки jQuery, их необходимо вставить между тегами head /head:

И так, jQuery будет выполнять некоторые функции, например при полной загрузке страницы $(document).ready() функция, которая предоставлена в качестве параметра, выполняется. Объект Tabs проходит несколько итераций (циклов) с помощью метода $.each() и несколько элементов LI создаются и прибавляются к .tabContainer <UL>

Внимательно рассмотрев код выше, можно легко добавлять новые вкладки, и изменить некоторую цветовую гамму. Здесь мы создадим новый элемент div и передадим объект с ID и CCSS свойствами вместо определения их по отдельности с помощью методов .attr() и .css().

Следует обратить внимание на некоторые детали, метод использования data() по всему коду. Он присваивает информацию элементу вызывая метод с 2-мя параметрами $(‘#selector’).data(‘label’,”String Data”). Это присваивает строку “String Data” элементу и мы можем позже к ней обратиться (или проверить) вызывая метод без второго параметра.

Вывод нашего урока-Вы получили отличные вкладки для вашего сайта, с возможностью вставки различного контента, разобрались с работой Ajax запросов, и многое другое.

На главную