Библиотека FormStone. Создание табов

Библиотека FormStone. Создание табов

От автора: очень часто при создании веб-страниц необходимо отображать большие объемы информации в небольших по размеру блоках, причем использование горизонтального или вертикального скролла не приветствуется. Поэтому в данном уроке мы с Вами поговорим о виджете Tabs библиотеки FormStone, используя который можно разделить большой контент на несколько отдельных вкладок. Также в данном уроке мы поговорим о виджете Tooltip, который позволяет красиво оформить всплывающие подсказки для различных элементов Вашей страницы.

скачать исходникискачать урок

Введение

В данном уроке мы с Вами продолжаем изучение элементов библиотеки Formstone. Напомню, официальный сайт библиотеки – http://formstone.it:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

В уроке Библиотека FormStone. Оформляем радиокнопки, чекбоксы и списки, который ранее публиковался на нашем сайте, мы подробно рассматривали установку данной библиотеки. Поэтому в сегодняшнем уроке мы на этом останавливаться не будем. Итак, для сегодняшнего урока я буду использовать следующую тестовую страницу:

Обратите внимание, что это обычная страница HTML, в центре которой отображается огромный текст, соответственно, для его отображения необходим, так же огромный по размеру блок и, конечно же, свободное место на странице. Но если отображать данный текст не целиком, а по отдельным абзацам – то это позволит значительно сэкономить место на странице. При этом каждый абзац, будет отображаться в соответствующей вкладке. Ссылки над текстом – необходимы для управления вкладками. Исходный код тестовой страницы:

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

Создание вкладок

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

Далее, проверяем, что бы каждая будущая вкладка была включена в отдельный блок, которому присвоен уникальный идентификатор. Элементы управления вкладками – ссылки, в атрибуте href, должны содержать идентификатор, той вкладки, которая должна быть открыта при клике по данной ссылке.

Затем при помощи библиотеки jQuery, выбираем элементы управления вкладками – ссылки, по классу tab, который присвоен каждой из них и вызываем на исполнение метод tabs():

Далее, каждому элементу управления – ссылке – добавляем атрибут data-tabs-group – с именем группы вкладок (то есть, используя данный атрибут – можно сгруппировать вкладки в единый функционал). При этом код блока навигации будет следующим:

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

Далее добавим несколько правил CSS, для более красивого оформления вкладок:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

При обновлении информации, мы увидим следующее:

Настройки виджета:

customClass – произвольный класс, который будет добавлен к виджету;

maxWidth – максимальная ширина в пикселях, при которой работа виджета будет отключена;

mobileMaxWidth – ширина окна браузера, при которой виджет переходит в режим отображения информации для мобильных устройств.

Виджет Tooltip

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

Далее к каждой ссылке, добавляем атрибут data-title=»", содержимое которого, будет отображено во всплывающей подсказке:

И наконец, выбираем при помощи jQuery, элементы управления вкладками (ссылки с классом tab), и вызываем метод tootip().

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

direction — направление отображения подсказки (по умолчанию top, возможно left, bottom, right);

delay – время задержки, в миллисекундах, появления подсказки;

follow – если данной настройке передать значение TRUE – всплывающая подсказка будет следовать за курсором мыши в области блока ссылки;

margin – внешний отступ блока всплывающей подсказки;

match – если данной настройке передать значение TRUE, всплывающая подсказка будет появляться в той позиции, которая указана в настройке direction, и точно напротив курсора мыши;

formatter – в данной настройке необходимо указать или описать функцию, которая вернет текст всплывающей подсказки.

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree