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

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

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

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

function my_tabs() {
 
}

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

tabs.PNG

Сейчас создадим отдельную функцию, которая получает заголовки из статей. Чтобы не дублировать эту функцию для новостей и для афиш (в нашем примере), то в эту функцию будем передавать тип материала (ведь новости и афиша различаются только в типе материалов). Назовём её 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. В этот файл надо будет положить следующий код:

$(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');
    //и далее наш код
}

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

Комментарии

Аватар пользователя D.Choomc
D.Choomc написал:

Вот спасибо, Жека)) Спалил-таки тему))
Отлично!

05.10.2010 19:13
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

угумс, так и запишем "Табы"

11.10.2010 01:30
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Очепятка:

get_title('asisha');

11.10.2010 09:50
Аватар пользователя Spleshka
Spleshka написал:

Спасибо :)

11.10.2010 15:06
Аватар пользователя hetrus
hetrus написал:

Спасибо.
Опечатка - $news = get_title('news') вместо - $news = get_titles('news')

05.04.2011 02:24
Аватар пользователя Spleshka
Spleshka написал:

Ага, спасиб большое :)

05.04.2011 13:09
Аватар пользователя Stown
Stown написал:

Можно ли вставить код

<?php echo my_tabs(); ?>

сразу в файл темы, а не в блок?

17.07.2012 16:01
Аватар пользователя Олег
Олег написал:

а если с шаблоном ноды работать? как сделать?

03.12.2012 12:57

Комментировать