club762.ruПанели со вкладками позволяют компактно разместить важную информацию и сохранить экранное пространство сайта. На различных блогах, а также на динамически изменяющихся сайтах панели со вкладками используются для отображения последних добавленных комментариев, популярных записей и других аналогичных материалов, легко группируемых по разделам.
В плане создания и управления панели со вкладками не представляют никаких сложностей. Создание функциональности панелей со вкладками чаще всего достигается с помощью использования специальных скриптов. Один из таких скриптов, приведенных в следующем примере, отлично подходит для создания качественной панели со вкладками. Сценарий использует библиотеку Prototype, которую мы вызываем в проекте с помощью wp_enqueue_script(). Здесь мы опустим часть вызова библиотеки, и остановимся на коде скрипта, который должен быть размещен в файле header.php:
<script>
// Function to view tab
function viewTab(tabId) {
// Get all child elements of "contents-container"
var elements = $('contents-container').childElements();
// Loop through them all
for (var i=0, end=elements.length; i<end; i++) {
// Is clicked tab
if (tabId == elements[i].id) {
// - Show element
elements[i].show();
// - Make sure css is correct for tab
$('tab-'+ elements[i].id).addClassName('active-tab');
}
// Is not the clicked tab
else {
// - Hide
elements[i].hide();
// - Make sure css is correct for tab
$('tab-'+ elements[i].id).removeClassName('active-tab');
}
}
}
</script>Код скрипта можно было бы оформить и в виде отдельного файла. Ниже представлена базовая разметка для панели со вкладками:
<ul id="tabs">
<li id="tab-content-recent">
<a href="javascript:viewTab('content-recent');">Recent</a>
</li>
<li id="tab-content-popular">
<a href="javascript:viewTab('content-popular');">Popular</a>
</li>
<li id="tab-content-comments">
<a href="javascript:viewTab('content-comments');">Comments</a>
</li>
</ul>
<div id="contents-container">
<div id="content-recent">
Content for Recent tab.
</div>
<div id="content-popular" style="display: none;">
Content for Popular tab.
</div>
<div id="content-comments" style="display: none;">
Content for Comments tab.
</div>
</div>В каждом из блоков div должна находиться какая-либо информация, отвечающая поставленной тематике той или иной вкладки. Для того чтобы облегчить процесс размещения информации, каждую из вкладок можно виджетизировать, т.е. задать область виджетов.
Регистрируем области виджетов в functions.php:
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Recent Posts'));
register_sidebar(array('name'=>'Popular Posts'));
register_sidebar(array('name'=>'Recent Comments'));
));Зададим области виджетов для каждой вкладки (являющейся блоком div):
<ul id="tabs">
<li id="tab-content-recent">
<a href="javascript:viewTab('content-recent');">Recent</a>
</li>
<li id="tab-content-popular">
<a href="javascript:viewTab('content-popular');">Popular</a>
</li>
<li id="tab-content-comments">
<a href="javascript:viewTab('content-comments');">Comments</a>
</li>
</ul>
<div id="contents-container">
<div id="content-recent">
<!— Recent tab widget area —>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Recent Posts') ) :
?><?php endif; ?>
</div>
<div id="content-popular" style="display: none;">
<!— Popular tab widget area —>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Popular Posts') ) :
?><?php endif; ?>
</div>
<div id="content-comments" style="display: none;">
<!— Comments tab widget area —>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Recent Comments') ) :
?><?php endif; ?>
</div>
</div>Теперь вы можете легко поместить любую информацию во вновь определенные области виджетов через панель администратора.
Использовать или нет панели со вкладками? Ответ на этот вопрос неодозначен. Существует множество как «за», так и «против» использования панелей со вкладками. В большинстве случаев все зависит от исходного сайта и контента, размещенного на нем. Немаловажный момент использования панели со вкладками состоит в удобстве и ясности для посетителя. Гость должен представлять себе, как правильно пользоваться указанным элементом. Информация, размещенная на различных вкладках, не должна быть слишком важной, поскольку чаще всего она скрыта от посетителя. Нельзя размещать во вкладках меню или другие важные атрибуты сайта, ведь посетитель может просто не найти, как переходить на другие страницы, и в итоге он больше никогда не вернется на ваш сайт.
Использование панелей со вкладками часто вызывает различные дополнительные неудобства для посетителя. Если вы решили использовать данный тип функциональности, обязательно убедитесь в том, что он полностью отвечает поставленным целям и задачам, иначе вы рискуете получить негативные результаты.
