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

Дата публикации: 2015-06-03

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

Введение

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8" /> 
<link rel="stylesheet" href="css/style.css"/>

<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/core.js"></script>

<style>
</style>


<script>
</script>

<title>Tabs & Tooltip</title>
</head>
<body>

<div class="wrap">
 <h1>Tabs & Tooltip</h1>
 
 
 <nav class="tabs">
  <a class="tab" href="#tab1">One</a>
  <a class="tab" href="#tab2">Two</a>
  <a class="tab" href="#tab3">Three</a>
 </nav>
 
 
 <div id="tab1">
  <p>В 1933 году компания по производству автоматических ткацких станков Toyoda Automatic Loom Works создала новое отделение, специализирующееся на производстве автомобилей; его руководителем стал Киитиро Тоёда. В 1929 году Киитиро Тоёда совершил поездки в Европу и США для изучения автомобильной промышленности и в 1930 году приступил к разработке автомобилей с бензиновым двигателем. Правительство Японии всячески поощряло такую инициативу компании Toyoda Automatic Loom Works. В 1934 году компания произвела свой первый двигатель типа А, который был использован в первой модели пассажирского автомобиля А1 в мае 1935 года и в грузовике G1 в августе 1935 года. Производство пассажирского авто модели АА началось в 1936 году. Ранние модели напоминали уже существовавшие модели Dodge Power Wagon и Chevrolet.

Toyota Motor Co., Ltd. была основана в качестве самостоятельной компании в 1937 году. Несмотря на то, что фамилия основателей компании звучит как Тоёда, для упрощения произношения и в качестве символа отделения деловой деятельности от семейной жизни, компании было решено дать имя «Тоёта». В Японии название «Тоёта» (トヨタ) считается более удачным названием, чем «Тоёда» (豊田), так как 8 считается числом, приносящим удачу, а слово «Тоёта», написанное катаканой, как раз состоит из 8 черт.</p>
 
 </div>
 <div id="tab2">
  <p>Во время Второй мировой войны компания практически занималась только производством грузовиков для Японской императорской армии. Из-за строгого дефицита в тогдашней Японии военные грузовики делались в самых упрощенных вариантах, например, с одной фарой. Некоторые считают, что война быстро закончилась из-за бомбардировок союзников в городе Аити, уничтоживших заводы Toyota.
Штаб-квартира Toyota Motor Corporation

После войны в 1947 году начался выпуск коммерческих пассажирских авто модели SA. В 1950 году была создана отдельная компания по продажам — Toyota Motor Sales Co. (она просуществовала до июля 1982 года). В апреле 1956 года была создана дилерская сеть Toyopet. В 1957 году Toyota Crown стал первым японским автомобилем, экспортируемым в Америку (не только в США, но и в Бразилию).

Тойота начала расширяться быстрыми темпами в 1960-е годы. Первый автомобиль марки «Тойота», произведённый за пределами Японии, вышел с конвейера в апреле 1963 года в городе Мельбурн, в Австралии.</p>
 </div>
 <div id="tab3">
  <p>В I квартале 2007 года Toyota Motor впервые выпустила и продала больше автомобилей, чем General Motors. GM удерживала звание «крупнейшего автопроизводителя в мире» на протяжении 76 лет. Но последние годы GM, как и другие американские автопроизводители, переживала кризис и вынуждена была сокращать производство — освободившееся место на рынке занимают конкуренты, и в первую очередь Toyota. 24 апреля японская компания сообщила, что выпустила в I квартале 2,37 млн автомобилей и продала 2,35 млн. Таким образом, она впервые опередила GM, у которой соответствующие показатели составили 2,34 млн и 2,26 млн машин[2].

В мае 2009 года компания завершила финансовый год с убытками[3], этого не было с 1950 года.

В мае 2012 года Toyota вновь вырвалась на первое место, обогнав Volkswagen и General Motors[4].</p>
 
 </div> 
</div>

</body>
</html>

<!doctype html>

<html>

<head>

<style>

</style>

</script>

<title>Tabs & Tooltip</title>

</head>

<body>

<h1>Tabs & Tooltip</h1>

<a class="tab" href="#tab3">Three</a>

</nav>

<p>В 1933 году компания по производству автоматических ткацких станков Toyoda Automatic Loom Works создала новое отделение, специализирующееся на производстве автомобилей; его руководителем стал Киитиро Тоёда. В 1929 году Киитиро Тоёда совершил поездки в Европу и США для изучения автомобильной промышленности и в 1930 году приступил к разработке автомобилей с бензиновым двигателем. Правительство Японии всячески поощряло такую инициативу компании Toyoda Automatic Loom Works. В 1934 году компания произвела свой первый двигатель типа А, который был использован в первой модели пассажирского автомобиля А1 в мае 1935 года и в грузовике G1 в августе 1935 года. Производство пассажирского авто модели АА началось в 1936 году. Ранние модели напоминали уже существовавшие модели Dodge Power Wagon и Chevrolet.

Toyota Motor Co., Ltd. была основана в качестве самостоятельной компании в 1937 году. Несмотря на то, что фамилия основателей компании звучит как Тоёда, для упрощения произношения и в качестве символа отделения деловой деятельности от семейной жизни, компании было решено дать имя «Тоёта». В Японии название «Тоёта» (トヨタ) считается более удачным названием, чем «Тоёда» (豊田), так как 8 считается числом, приносящим удачу, а слово «Тоёта», написанное катаканой, как раз состоит из 8 черт.</p>

</div>

<p>Во время Второй мировой войны компания практически занималась только производством грузовиков для Японской императорской армии. Из-за строгого дефицита в тогдашней Японии военные грузовики делались в самых упрощенных вариантах, например, с одной фарой. Некоторые считают, что война быстро закончилась из-за бомбардировок союзников в городе Аити, уничтоживших заводы Toyota.

Штаб-квартира Toyota Motor Corporation

После войны в 1947 году начался выпуск коммерческих пассажирских авто модели SA. В 1950 году была создана отдельная компания по продажам — Toyota Motor Sales Co. (она просуществовала до июля 1982 года). В апреле 1956 года была создана дилерская сеть Toyopet. В 1957 году Toyota Crown стал первым японским автомобилем, экспортируемым в Америку (не только в США, но и в Бразилию).

Тойота начала расширяться быстрыми темпами в 1960-е годы. Первый автомобиль марки «Тойота», произведённый за пределами Японии, вышел с конвейера в апреле 1963 года в городе Мельбурн, в Австралии.</p>

</div>

<p>В I квартале 2007 года Toyota Motor впервые выпустила и продала больше автомобилей, чем General Motors. GM удерживала звание «крупнейшего автопроизводителя в мире» на протяжении 76 лет. Но последние годы GM, как и другие американские автопроизводители, переживала кризис и вынуждена была сокращать производство — освободившееся место на рынке занимают конкуренты, и в первую очередь Toyota. 24 апреля японская компания сообщила, что выпустила в I квартале 2,37 млн автомобилей и продала 2,35 млн. Таким образом, она впервые опередила GM, у которой соответствующие показатели составили 2,34 млн и 2,26 млн машин[2].

В мае 2009 года компания завершила финансовый год с убытками[3], этого не было с 1950 года.

В мае 2012 года Toyota вновь вырвалась на первое место, обогнав Volkswagen и General Motors[4].</p>

</div>

</body>

</html>

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

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

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

<link rel="stylesheet" href="css/tabs.css"/>
<script src="js/touch.js"></script>
<script src="js/mediaquery.js"></script>
<script src="js/swap.js"></script>
<script src="js/tabs.js"></script>

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

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

jQuery("document").ready(function($) {
  $(".tab").tabs();
 });

jQuery("document").ready(function($) {

$(".tab").tabs();

});

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

<nav class="tabs">
  <a class="tab" href="#tab1" data-tabs-group="group1">One</a>
  <a class="tab" href="#tab2" data-tabs-group="group1">Two</a>
  <a class="tabhref="#tab3" data-tabs-group="group1">Three</a>
 </nav>

<a class="tabhref="#tab3" data-tabs-group="group1">Three</a>

</nav>

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

.tabs { overflow: hidden; }
 .tab { display: block; float: left; }
 
 .tab,.fs-tabs-tab.fs-tabs-enabled { background: #393b3f;  color: #fff; font-size: 16px; line-height: 40px; margin: 0 1px 0 0; padding: 0 20px; }
 .tab:hover {background-color:#ccc;}
 

 .fs-tabs-tab.fs-tabs-active { background: #c65032; }

 .fs-tabs-tab_mobile.fs-tabs-enabled { width: 100%; }
 
 .fs-tabs-content {background: #f2f2f2; border-radius: 3px; padding: 5px 20px; }
 .fs-tabs-content.fs-tabs-active {border:1px solid #f2f2f2}
 
 
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
  -webkit-transition: background-color 0.15s linear, border-color 0.15s linear, box-shadow 0.15s linear, color 0.15s linear, opacity 0.15s linear;
 transition: background-color 0.15s linear, border-color 0.15s linear, box-shadow 0.15s linear, color 0.15s linear, opacity 0.15s linear;}

.tabs { overflow: hidden; }

.tab { display: block; float: left; }

.tab,.fs-tabs-tab.fs-tabs-enabled { background: #393b3f; color: #fff; font-size: 16px; line-height: 40px; margin: 0 1px 0 0; padding: 0 20px; }

.tab:hover {background-color:#ccc;}

.fs-tabs-tab.fs-tabs-active { background: #c65032; }

.fs-tabs-tab_mobile.fs-tabs-enabled { width: 100%; }

.fs-tabs-content {background: #f2f2f2; border-radius: 3px; padding: 5px 20px; }

.fs-tabs-content.fs-tabs-active {border:1px solid #f2f2f2}

a:link,

a:visited,

a:hover,

a:active,

a:focus {

-webkit-transition: background-color 0.15s linear, border-color 0.15s linear, box-shadow 0.15s linear, color 0.15s linear, opacity 0.15s linear;

transition: background-color 0.15s linear, border-color 0.15s linear, box-shadow 0.15s linear, color 0.15s linear, opacity 0.15s linear;}

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

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

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

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

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

Виджет Tooltip

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

<link rel="stylesheet" href="css/tooltip.css"/>
<script src="js/tabs.js"></script>

1 2	<link rel="stylesheet" href="css/tooltip.css"/> <script src="js/tabs.js"></script>

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

<nav class="tabs">
  <a class="tab" data-title="Вкладка 1" href="#tab1" data-tabs-group="group1">One</a>
  <a class="tab" data-title="Вкладка 2" href="#tab2" data-tabs-group="group1">Two</a>
  <a class="tab" data-title="Вкладка 3" href="#tab3" data-tabs-group="group1">Three</a>
 </nav>

<a class="tab" data-title="Вкладка 3" href="#tab3" data-tabs-group="group1">Three</a>

</nav>

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

$(".tab").tooltip();

1	$(".tab").tooltip();

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

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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс