От автора: очень часто при создании веб-страниц необходимо отображать большие объемы информации в небольших по размеру блоках, причем использование горизонтального или вертикального скролла не приветствуется. Поэтому в данном уроке мы с Вами поговорим о виджете Tabs библиотеки FormStone, используя который можно разделить большой контент на несколько отдельных вкладок. Также в данном уроке мы поговорим о виджете Tooltip, который позволяет красиво оформить всплывающие подсказки для различных элементов Вашей страницы.
Введение
В данном уроке мы с Вами продолжаем изучение элементов библиотеки Formstone. Напомню, официальный сайт библиотеки – http://formstone.it:
Современные технологии веб-разработки
AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке
В уроке Библиотека 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>
Хотел бы обратить Ваше внимание, что на данной странице уже подключена библиотека 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();
});
Далее, каждому элементу управления – ссылке – добавляем атрибут 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>
Теперь после обновления информации в браузере, мы увидим, что исходный текст отображается в виде обычных вкладок.
Далее добавим несколько правил CSS, для более красивого оформления вкладок:
Современные технологии веб-разработки
AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке
.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;}
При обновлении информации, мы увидим следующее:
Настройки виджета:
customClass – произвольный класс, который будет добавлен к виджету;
maxWidth – максимальная ширина в пикселях, при которой работа виджета будет отключена;
mobileMaxWidth – ширина окна браузера, при которой виджет переходит в режим отображения информации для мобильных устройств.
Виджет Tooltip
Теперь, когда вкладки успешно отображаются, я предлагаю добавить к каждой ссылке вкладки, подсказку, которая будет отображаться при наведении мыши. Для этого воспользуемся функционалом виджета Tooltip. Для начала подключим необходимые элементы к странице:
<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>
И наконец, выбираем при помощи jQuery, элементы управления вкладками (ссылки с классом tab), и вызываем метод tootip().
$(".tab").tooltip();
При этом мы видим, что при наведении курсора мыши на одну из ссылок – отображается красивая всплывающая подсказка. Настройки:
direction — направление отображения подсказки (по умолчанию top, возможно left, bottom, right);
delay – время задержки, в миллисекундах, появления подсказки;
follow – если данной настройке передать значение TRUE – всплывающая подсказка будет следовать за курсором мыши в области блока ссылки;
margin – внешний отступ блока всплывающей подсказки;
match – если данной настройке передать значение TRUE, всплывающая подсказка будет появляться в той позиции, которая указана в настройке direction, и точно напротив курсора мыши;
formatter – в данной настройке необходимо указать или описать функцию, которая вернет текст всплывающей подсказки.
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
Современные технологии веб-разработки
AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке
Практика HTML5 и CSS3 с нуля до результата!
Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3
Получить
