Думая многим эта идея понравится.
Примерно последние месяц-два все чаще стали появляться блоки, переключаемые с помощью вкладок-табуляторов, которые, судя по всему, становятся все популярнее.
Их полезность заключается в том, что они позволяют существенно сократить площадь, занимаемую информацией, выводимой в сайдбаре. К тому же это оригинально и красиво
Примеры
1. Как я уже сказал выше, вкладки есть прямо в моем блоге.
2. Вкладки на блоге
OneGadget.ru.
3.
Специальный отдельный пример (который можно скачать ниже).
Скачать
Удобные, практичные вкладки с помощью jQuery
А теперь я расскажу, как легко и просто прикрутить к свому блогу специальный скрипт, который позволяет это изящество реализовать. На мои глаза попадались разные вариации создания подобных вкладок и я выбрал, на мой взгляд, самый простой из них.
Итак, приступим.
1. В первую очередь нам потребуется популярная сегодня библиотека jQuery. Рекомендую скачать упакованную версию, которая занимает примерно 30 килобайт.
Копируем ее в папку с шаблоном блога и подключаем следующим кодом:
Code:
<script type="text/javascript" src="имя_файла.js"></script>
2. Затем нужно создать в сайдбаре блоки, которые будут переключаться с помощью закладок:
Code:
<ul class="tabs tabs1">
<li class="t1 tab-current"><a>Первая вкладка</a></li>
<li class="t2"><a>Вторая вкладка</a></li>
</ul>
<div class="t1">
контент первого блока
</div>
<div class="t2">
контент второго блока
</div>
3. CSS-стили можно увидеть в исходном коде страницы примера. Здесь я только хочу отметить, что для тех контентных блоков, которые по умолчанию скрыты, нужно указать соответствующее CSS-правило:
Code:
div.t2,
div.t3,
div.t4 {display: none}
Это необходимо на случай, когда у пользователя отключена в браузере поддержка JavaScript, иначе все блоки станут видны.
4. Теперь осталось подключить (по аналогии с jQuery) совсем небольшой скрипт, который и позволяет нам переключать закладки. Выглядит он следующим образом:
Code:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('ul.tabs li').css('cursor', 'pointer');
$j('ul.tabs.tabs1 li').click(function(){
var thisClass = this.className.slice(0,2);
$j('div.t1').hide();
$j('div.t2').hide();
$j('div.' + thisClass).show();
$j('ul.tabs.tabs1 li').removeClass('tab-current');
$j(this).addClass('tab-current');
});
});
На что прошу обратить внимание. Такие классы, как tabs1, t1, t2, должны быть уникальными. Т.е. если вы хотите создать, например, 2 отдельных блока с двумя вкладками в каждом, то для первого классами будут: tabs1, t1, t2, для второго: tabs2, t3, t4. Естественно, эти классы можно обозвать как угодно, главное - чтобы они не повторялись от блока к блоку.
При увеличении количества вкладок или блоков с вкладками, параметры в скрипт добавляются по аналогии, думаю, в этом не сложно разобраться.
Internet Explorer
Он, как всегда, отличился. Поскольку у тега ссылок во вкладках не используется параметр href (дабы при клике на них экран не прокручивался), IE6 и IE7 не воспринимают прописанные CSS-правила при наведении курсора на вкладку (не знаю почему, но в IE7 на моем блоге это работает).
Заключение
Как вы наверняка заметили (если посмотрели исходный код страницы примера), работа по реализации таких вкладок завязана на использовании CSS, т.е. установка скриптов занимает самую малую часть процесса, основную же часть составляет прописывание каскадной таблицы стилей, которая придаст вкладкам нужное оформление.
В примере все настроено так, что, если у посетителя отключена поддержка JavaScript, он увидит информацию из первой вкладки. Поэтому на такой случай рекомендую в первой вкладке вставлять наиболее важный контент.
Есть проблема. Когда я вставляешь скрипт из 4 пункта, корячит весь шаблон, т.е у меня на главной 3 столбца с инфой(vbadvanced), а при подключении сего скрипта все уходит в 1 колонку.
Статья взята с http://dimox.name
Создаем удобные, практичные вкладки с помощью jQuery
К YUI все статьи на английском, им будет неудобно копипастить)
