Делаем вкладки-табы Query UI в Drupal 7

Добавление библиотек jQuery делает сайт гораздо более привлекательным и повышает юзабилити.

На данный момент состав Drupal 7 заранее включена популярная библиотека jQuery UI

В этом примере я покажу, как можно применить JQuery для получения вкладок-Табов на обычной страничке сайта без подключения дополнительных модулей, фильтров и т.п.

Вкладки будут иметь примерно такой вид, кликните по изображению, чтобы перейти на страничку с демонстрацией работы:

d

Прежде всего в типе материала следует включить PHP-фильтр для включения обработчика кода PHP в тексте на страничке.
Затем с помощью PHP загрузить JQuery библиотеки:

1
2
3
<?php
drupal_add_library ( 'system' , 'ui.tabs' );
?>

Теперь подключим JQuery вкладки, которые будут содержать JQuery UI.
Для выполнения JavaScript используем функцию drupal_add_js ():

1
2
3
4
5
6
<?php
drupal_add_js ( 'jQuery(document).ready(function(){
jQuery("#tabs").tabs();
});
' , 'inline' );
?>

Теперь создадим вкладки в HTML. В этом примере я создам три вкладки, каждая из которых содержит текст и картинку, а также имеет своё уникальное название.

Во-первых, определим три вкладки (в этом фрагменте кода содержится открытый div, он закроется в продолжении кода):

1
2
3
4
5
6
<div id="tabs">
<ul>
<li><a href="#tabs-1">Исходная гистограмма</a></li>
<li><a href="#tabs-2">Исправленная гистограмма</a></li>
<li><a href="#tabs-3">Готовое фото</a></li>
</ul>

Теперь заполним вкладки содержанием, каждая из них будет находится в отдельном контейнере div, имеющий такой же ID, как указано выше в гиперссылках (здесь div, открытый в первом фрагменте, закрывается).

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="tabs-1">
<img src="/sites/default/files/image1.jpg" width="258" height="102" alt="" style="float: right;"/>
Текст, текст, текст.
</div>
<div id="tabs-2">
<img src="/sites/default/files/image2.jpg" width="258" height="102" alt="" style="float: right;"/>
Текст, текст, текст.
</div>
<div id="tabs-3">
<img src="/sites/default/files/image3.jpg" width="258" height="102" alt="" style="float: right;"/>
Текст, текст, текст.
</div>
</div>

И привожу полный код:

Код PHP, который размещаем вверху страницы:

1
2
3
4
<?php
drupal_add_library ( 'system' , 'ui.tabs' );
drupal_add_js ( 'jQuery(document).ready(function(){jQuery("#tabs").tabs();});' , 'inline' );
?>

Код HTML с вкладками и полезным текстом, который размещается в нужном месте страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="tabs">
<ul>
<li><a href="#tabs-1">Исходная гистограмма</a></li>
<li><a href="#tabs-2">Исправленная гистограмма</a></li>
<li><a href="#tabs-3">Готовое фото</a></li>
</ul>
<div id="tabs-1">
<img src="/sites/default/files/image1.jpg" width="258" height="102" alt="" style="float: right;"/>
Текст, текст, текст.
</div>
<div id="tabs-2">
<img src="/sites/default/files/image2.jpg" width="258" height="102" alt="" style="float: right;"/>
Текст, текст, текст.
</div>
<div id="tabs-3">
<img src="/sites/default/files/image3.jpg" width="258" height="102" alt="" style="float: right;"/>
Текст, текст, текст.
</div>
</div>

Я применил данные табы для создания миниатюрных фотогалерей, убрал неуместный, на мой взгляд, border и фон, заданные в стилях табов по умолчанию, а также "прилепил" заголовки вкладок к изображению. Фон и border я убрал, задав CSS-стиль основному диву, а чтобы вкладки прилепить к верхнему краю фотки, я положил маркированный список с гиперссылками в div, которому задал соответствующие стили, конкретно отрицательное значение margin-bottom. Посмотреть пример фотогалереи Вы также можете на странице демонстрации, и пример практического использования в статье "Как использовать Кривые (Curves) в Photoshop".

Помощь сайту

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение "Фонарик" для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

Преимущества: гибкие настройки. Вы можете задать в настройках, чтобы фонарик сразу включался при запуске приложения и автоматическое включение таймера при запуске приложения. Настройки позволяют отключить блокировку экрана и блокировку фонарика кнопкой включения телефона. Также вы можете самостоятельно установить время таймера.

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

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

Я думаю, что не открою Америку, утверждая, что дизайн (внешний вид) сайта является одним из самых важных критериев успешности, а, значит, и...
профессиональная видеосъёмка в Санкт-Петербурге и области
Профессиональный видеооператор, режиссер, оператор, оператор-постановщик, фотограф и видеограф Николай Карпов предлагает вам элитную видеосъёмку...
В этом материале я расскажу, как создать модную в наше неспокойное время фишку для сайта - слайдшоу, т.е. использование визуального слайдера для...
Почти каждый счастливый обладатель «яблочного» смартфона рано или поздно сталкивается с проблемой: как установить рингтон на айфон. В библиотеке...

Комментарии


Аватар пользователя nutya
Автор комментария: nutyaот: 04/05/2015 - 19:04

Спасибо, пригодилась статья! У меня подобный вопрос... как сделать несколько мест с вкладками на одной странице или например вкладки в одной из вкладок?


Аватар пользователя nutya
Автор комментария: nutyaот: 04/05/2015 - 21:17

Разобралась =) #tabs, #tabs2 и т.д.