Бібліотека FormStone. Створення табів

26

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

Бібліотека FormStone. Створення табівБібліотека FormStone. Створення табів

Введення

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

Бібліотека FormStone. Створення табів

В уроці Бібліотека FormStone. Оформляємо радіокнопки, чекбокси і списки, який раніше публікувався на нашому сайті, ми детально розглядали установку даної бібліотеки. Тому на сьогоднішньому уроці ми на цьому зупинятися не будемо. Отже, для сьогоднішнього уроку я буду використовувати наступну тестову сторінку:

Бібліотека FormStone. Створення табів

Зверніть увагу, що це звичайна сторінка HTML, в центрі якої відображається величезний текст, відповідно, для його відображення необхідний, так само величезний за розміром блок і, звичайно ж, вільне місце на сторінці. Але якщо відображати даний текст не цілком, а по окремих абзаців – то це дозволить значно заощадити місце на сторінці. При цьому кожен абзац, буде відображатися у відповідній вкладці. Посилання над текстом – необхідні для управління вкладками. Вихідний код тестової сторінки:

Tabs & Tooltip

Tabs & Tooltip

One
Two
Three

У 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 рис.

Під час Другої світової війни компанія практично займалася тільки виробництвом вантажівок для Японської імператорської армії. З-за суворого дефіциту в тогочасній Японії військові вантажівки робилися в найбільш спрощених варіантах, наприклад, з однією фарою. Деякі вважають, що війна швидко скінчилася через бомбардувань союзників у місті Аіті, знищили заводи Toyota.
Штаб-квартира Toyota Motor Corporation
Після війни в 1947 році почався випуск комерційних пасажирських авто моделі SA. У 1950 році була створена окрема компанія з продажу — Toyota Motor Sales Co. (вона проіснувала до липня 1982 року). В квітні 1956 року була створена дилерська мережа Toyopet. У 1957 році Toyota Crown став першим японським автомобілем, що експортуються в Америку (не тільки в США, але і в Бразилії).
Тойота почала розширюватися швидкими темпами в 1960-ті роки. Перший автомобіль марки «Тойота», вироблений за межами Японії, вийшов з конвеєра в квітні 1963 року в місті Мельбурн, австралія.

У 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].

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

Створення вкладок

Насамперед, на даній сторінці, згідно з документацією, необхідно підключити віджет Tabs і елементи, від яких він залежить:

Бібліотека FormStone. Створення табів

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

Потім за допомогою бібліотеки jQuery, вибираємо елементи управління вкладки – посилання, по класу tab, який присвоєно кожній з них і викликаємо на виконання метод tabs():

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

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

One
Two
Three

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

Бібліотека FormStone. Створення табів

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

.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.15 s linear, border-color 0.15 s linear, box-shadow 0.15 s linear, color 0.15 s linear, opacity 0.15 s linear;
transition: background-color 0.15 s linear, border-color 0.15 s linear, box-shadow 0.15 s linear, color 0.15 s linear, opacity 0.15 s linear;}

При оновленні інформації, ми побачимо наступне:

Бібліотека FormStone. Створення табів

Налаштування віджета:

customClass – довільний клас, який буде доданий до віджету;

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

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

Віджет Tooltip

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

Далі до кожної посиланням, додаємо атрибут data title=»», вміст якого буде відображено у спливаючій підказці:

One
Two
Three

І нарешті, вибираємо за допомогою jQuery, елементи керування вкладками (посилання з класом tab), і викликаємо метод tootip().

$(«.tab»).tooltip();

Бібліотека FormStone. Створення табів

При цьому ми бачимо, що при наведенні курсору миші на одну з посилань – відображається гарна підказка. Налаштування:

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

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

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

margin – зовнішній відступ блоку підказки;

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

formatter – в даній настройці необхідно вказати або описати функцію, яка поверне текст спливаючої підказки.

На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!