Написать табы (закладки) собственноручно? Легко!

Одним из лучших способов экономить место на сайте являются табы. Это простой переключатель контента, который одновременно нетруден в создании - и удобен в использовании. Для этой возможности можно использовать связку модулей views + quick tabs. Однако некоторых этот результать может не устроить из-за того, что вьюзы нагружает сайт. Да и лишний код, как всегда, не потворствует SEO оптимизации.

Поэтому можно написать свою собственную функцию (как сделать модуль из этого - в след.уроке), в которой мы получим всё, что надо.

Для начала - работать мы будем с файлом template.php. Называем нашу функцию как-нибудь, например my_tabs()

function my_tabs() {   }

В моём примере функция будет вытягивать из базы данных заголовок статьи со ссылкой на полный материал - каждая закладка для своего типа данных. Пример того, что будет:

Сейчас создадим отдельную функцию, которая получает заголовки из статей. Чтобы не дублировать эту функцию для новостей и для афиш (в нашем примере), то в эту функцию будем передавать тип материала (ведь новости и афиша различаются только в типе материалов). Назовём её get_titles()

function get_titles($type) { //на вход мы подаём тип материала, из которого брать заголовки   //т.к. у нас на выходе будет список, то начинаем его формировать
	$output = '<ul>';   //далее идёт запрос к базе данных, которая получает nid и title
        // последних пяти статей из заданного типа материала
	$result = db_query_range("SELECT title, nid, created FROM {node} WHERE type = '%s' ORDER BY created DESC", $type, 0, 5);   //обрабатываем данные, которые мы получили в результате запроса
	while ($node = db_fetch_object($result)) {
                //оборачиваем каждый заголовок в элемент li и 
                //в ссылку, используя функцию l()
		$output .= '<li>' . l($node->title,"node/".$node->nid) .'</li>';
	}   //закрываем список
	$output .= '</ul>';
	return $output;
}

Теперь вернёмся к нашей исходной функции my_tabs(). Она будет выглядеть следующим образом:

function my_tabs() {
   //получаем заголовки для типа материала news и afisha соответственно
   $news = get_titles('news');
   $afisha = get_titles('afisha');   //создаём html-структуру для наших табов, в которую заносим наши
   //списки с заголовками $afisha и $news
   $output = '
      <div id = "tabs">   <div class = "header">
	    <div class = "news active">
	       '. t('News') .'
	    </div>
	    <div class = "afisha">
	       '. t('Afisha') .'
	    </div>
         </div>   <div class = "body">
	    <div class = "news-content">
	       '. $news .'
	    </div>
	    <div class = "afisha-content" style = "display: none;">
	       '. $afisha.'
	    </div>
          </div>   </div>';   return $output;
}

Далее заходим на наш сайт и создаём новый блок (/admin/build/block/add). Здесь в содержимое блока ставляем следующее:

<?php echo my_tabs(); ?>

И ставим формат ввода - PHP code(если такого нет - то его необходимо включить в разделе /admin/build/modules - он встроен в стандартную сборку друпала).
Сохраняем блок.

Мы увидим в этом блоке два заголовка "News" и "Afisha" и 5 заголовков со ссылкой на полный материал. Но при клике на заголовки никакого переключения не происходит - мы ещё не добавили javascript'ы для переключения этих закладок.

Поэтому сразу же после начала функции my_tabs() мы подсунем подключение скриптов:

function my_tabs() {
    drupal_add_js(drupal_get_path('theme','имя темы').'/tabs.js');
    //и далее наш код
}

В папке, где лежит наш template.php создадим пустой файл и назовём его tabs.js. В этот файл надо будет положить следующий код:

if (Drupal.jsEnabled){
    $(document).ready(function(){   $('#tabs .news').click(
            function(){
                $('#tabs .afisha').removeClass('active');
                $('#tabs .news').addClass('active');
                $('#tabs .afisha-content').hide();
                $('#tabs .news-content').show();
            }
        );   $('#tabs .afisha').click(
            function(){
                $('#tabs .news').removeClass('active');
                $('#tabs .afisha').addClass('active');
                $('#tabs .news-content').hide();
                $('#tabs .afisha-content').show();
            }
         );   });
}

Сохраняем, проверяем. Теперь всё работает как надо. Вам остаётся только добавить стили в этот блок. Подключим стили таким же образом как и скрипты:

function my_tabs() {
    drupal_add_css(drupal_get_path('theme','имя темы').'/tabs.css');
    drupal_add_js(drupal_get_path('theme','имя темы').'/tabs.js');
    //и далее наш код
}

Оформляем необходимые стили - и красивые табы на сайте готовы и работают

Оригинал статьи: http://drupalace.ru/lesson/napisat-taby-zakladki-sobstvennoruchno-legko