jQuery tabs. Простенько и со вкусом…
В одной из ранних своих публикация я познакомил Вас с вариантом простого таба на js. А сегодня будет полезно, если Вы хотите использовать табы в своем блоге (отлично работает в sidebar.php) посмотреть и применить такой вариант на jQuery.
Чем же хорош этот таб? Мнений может быть несколько. Во-первых…
Простота интеграции, готовая библиотека jQuery, возможность приспособить к дизайну своего блога (сайта) по стилевому оформлению… И так, приступим.
Для начала, как обычно — подключим библиотеку jQuery в header блога. Но, если Вы планируете использовать таб в sidebar-e, резонно прописать вызов скрипта в шаблон sidebar.php.
|
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> |
И сразу же под этой строкой пропишем несколько строк кода с заданными параметрами для работы таба:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Скрыть все $("ul.tabs li:first").addClass("active").show(); //Активируем 1-ю вкладку $(".tab_content:first").show(); //Показываем содержание 1-й вкладки //Действие по клику $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Удаляем "active" класс $(this).addClass("active"); //Добавим "active" класс к выбранной вкладке $(".tab_content").hide(); //Скрыть все содержимое вкладки var activeTab = $(this).find("a").attr("href"); //Найти значение атрибута "rel" для выявления активной вкладки с содержимым $(activeTab).fadeIn(); //Активируем fade - плавное появление активной вкладки return false; }); }); </script> |
На этом подключение скриптов закончено. Теперь займемся стилями. Полезно будет прописать стили для табов в стилевой файл вашей темы. Но можно вынести и в отдельный фай, прописав в header темы путь к нему.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
body { background: #f0f0f0; margin: 0; padding: 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; color: #444; } h1 {font-size: 3em; margin: 20px 0;} .container {width: 500px; margin: 10px auto;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: 1px solid #999; border-left: none; margin-bottom: -1px; background: #e0e0e0; overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; } .tab_container { border: 1px solid #999; border-top: none; clear: both; float: left; width: 100%; background: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 20px; font-size: 1.2em; } .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em; } .tab_content h3 a{ color: #254588; } .tab_content img { float: left; margin: 0 20px 20px 0; border: 1px solid #ddd; padding: 5px; } |
Здесь Вам открывается масса возможностей для изменения цветов рамки, фона таба, фона блока контента и др. атрибутов. Поэкспериментируйте со стилями и «подгоните» оформление табов под дизайн своего блога сами. Здесь — стандартная, светлая тема.
И последнее — вывод табов в любом месте Вашего блога:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="container"> <ul class="tabs"> <li class="active"><a href="#tab1">Tab 1</a></li> <li class=""><a href="#tab2">Tab 2</a></li> <li class=""><a href="#tab3">Tab 3</a></li> <li class=""><a href="#tab4">Tab 4</a></li> </ul> <div class="tab_container"> <div style="display: block;" id="tab1" class="tab_content"> <h2>Заголовок первого таба</h2> <p>Здесь любой текст, картинка или все, что угодно...</p> </div> <div style="display: none;" id="tab2" class="tab_content"> <h2>Заголовок 2-го таба</h2> <a href="http://tinyurl.com/nknoq3n"> <img src="bodyart.jpg" alt="bodyart"></a> <h3><a href="http://tinyurl.com/nknoq3n">BodyArt</a></h3> <p>Умопомрачительный бодиарт!</p> </div> <div style="display: none;" id="tab3" class="tab_content"> <h2>Заголовок 3-го таба</h2> <p>Любой текст, картинка или...</p> </div> <div style="display: none;" id="tab4" class="tab_content"> <h2>Заголовок 4-го таба</h2> <p>Любой текст, картинка или...</p> </div> </div> </div> |
На этом все! Смотрим пример работы таба.
Удачи и… до новых встреч!
| ◄ Определение географических координат на карте Google | CSS Circular Image. Стилизация изображений на чистом CSS ► |
 (Голосовало: 1 ) Загрузка...Метки: jQuery ○ WEB мастеру ○ Как сделать? ○ Табы ○ Обновление статьи: 02.11.2015 Просмотров: 1418 Короткая ссылка: http://tinyurl.com/o68dajp |
Подишись на сообщения блога по E-mail и получай свежие новости в числе первых! |
Наберитесь терпения - новые публикации в процессе осмысления... |
На сегодня в блоге...
|
|
|
 |
- Бегущая строка для сайта на «чистом» CSS (Обновление от 06.04.2018)
- Как установить на сайт скрипт Test Speed (Обновление от 05.04.2018)
- Создаем генератор QR кода для своего сайта (Обновление от 05.04.2018)
- Делаем рейтинг для блога, как на YouTube (Обновление от 04.04.2018)
Добавить комментарий
Пожалуйста зарегистрируйтесь или войдите, используя свой логнн.
Рубрики
Календарь публикаций
| Пн | Вт | Ср | Чт | Пт | Сб | Вс |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 | ||||
MasterPRO в Twitter’e
Рейтинг статей
- Редкие HTML символы (5,00 из 5)
- Удаляем «Google-шпионов» с Android устройств (5,00 из 5)
- Пишем текст поверх картинки средствами CSS (5,00 из 5)
- Как «включить» gzip компрессию на сайте WordPress? (5,00 из 5)
- SmartAPKTool — v.2.2 Работаем с .apk файлами для Android (5,00 из 5)
Информер праздников
 |  |
