[#] Drupal kontra "tabs", czyli tworzymy dynamiczne zakładki

( Ostatnio zmieniony śr., 11/06/2008 - 13:48 )
 

Przydatne linki: http://stilbuero.de/tabs

Wymagania

Aby móc tworzyć zakładki potrzebna będzie wtyczka „tabs“ dostępna w module Javascript Tools

Użyte moduły: Views, Tabs (jstools)

Moduł Views jest bardzo użyteczny lecz nie konieczny, aby stosować zakładki.

Przykład użycia:

<?php
  $form = array();

  $form['categories1'] = array(
    '#type' => 'tabset',
  );
  $items = array();
  $tree = taxonomy_get_tree(6, $parent = 0, $depth = -1, $max_depth = NULL);
  foreach ($tree as $term) {
    // Decide how you want to render the terms. This is just one possibility.
    $items[] = l(check_plain($term->name), taxonomy_term_path($term));
  }
  $form['categories1']['tab1'] = array(
    '#type' => 'tabpage',
    '#title' => t('Terminy słownika Elektronika'),
    '#content' =>  theme('item_list', $items),
  );
  $form['categories1']['tab2'] = array(
    '#type' => 'tabpage',
    '#title' => t('Statyczna zakładka'),
    '#content' =>  t('Jakiś tekst który jest tu wpisany na stałe'),
  );

  print tabs_render($form);
?>

Dwie zakładki a każda z innym „widokiem“

<?php

  $limit = 5;
  $views_args = "";

  $my_view_php_code_output1 = views_build_view('block', views_get_view('TUTAJ_NAZWA_WIDOKU_1'), $view_args, true, $limit);
  $my_view_php_code_output2 = views_build_view('block', views_get_view('TUTAJ_NAZWA_WIDOKU_2'), $view_args, true, $limit);


  $form['example1'] = array(
    '#type' => 'tabset',
  );
  $form['example1']['tab1'] = array(
    '#type' => 'tabpage',
    '#title' => t('Słownik 1'),
    '#content' => t($my_view_php_code_output1),
  );
  $form['example1']['tab2'] = array(
    '#type' => 'tabpage',
    '#title' => t('Słownik 2'),
    '#content' => t($my_view_php_code_output2),
  );

  return tabs_render($form);

?>

Trzy zakładki, dwie z użyciem Views i jedna statyczna

Informacja: Działa również przy wyłączonym module Views.

<?php
  /* ---------------------------------------------------------- */

  $module = 'views';
  $delta = 'TUTAJ_NAZWA_WIDOKU_1';

  $block = (object) module_invoke($module, 'block', 'view', $delta);
  $block->module = $module;
  $block->delta = $delta;

  $tab_A = theme('block', $block);

  /* ---------------------------------------------------------- */

  $module = 'views';
  $delta = 'TUTAJ_NAZWA_WIDOKU_2';

  $block = (object) module_invoke($module, 'block', 'view', $delta);
  $block->module = $module;
  $block->delta = $delta;

  $tab_B = theme('block', $block);

  /* ---------------------------------------------------------- */

  $form = array();

  $form['hpTabs'] = array(
      '#type' => 'tabset',
  );

  $form['hpTabs']['tab1'] = array(
      '#type' => 'tabpage',
      '#title' => t('Zakładka 1'),
      '#content' => $tab_A,
  );

  $form['hpTabs']['tab2'] = array(
      '#type' => 'tabpage',
      '#title' => t('Zakładka 2'),
      '#content' => $tab_B,
  );

  $form['hpTabs']['tab3'] = array(
      '#type' => 'tabpage',
      '#title' => t('Zakładka z tekstem'),
      '#content' => t('Jakiś tekst.'),
  );

  return tabs_render($form);

?>

Jedna zakładka z terminami słownika o ID=3, BEZ użycia Views

<?php

  $vocabulary_id = 3;
  $result = db_query("SELECT d.tid, d.name FROM {term_data} d WHERE d.vid = $vocabulary_id GROUP BY d.tid, d.name ORDER BY d.name");

  $items = array();
  while ($category = db_fetch_object($result)) {
    $items[] = l($category->name, 'taxonomy/term/'. $category->tid);
  }

  $tob = theme('item_list', $items);

  $form = array();
  $form['categories1'] = array(
    '#type' => 'tabset',
  );
  $form['categories1']['tab1'] = array(
    '#type' => 'tabpage',
    '#title' => t('Zakładka'),
    '#content' => $tob
  );
  print tabs_render($form);

?>

J.w lecz z wykorzystaniem „taxonomy_get_tre­e()“

Jedna zakładka z terminami słownika o ID=3, BEZ użycia Views

<?php
  $form = array();

  $form['categories1'] = array(
    '#type' => 'tabset',
  );
  $items = array();
  $tree = taxonomy_get_tree(6, $parent = 0, $depth = -1, $max_depth = NULL);
  foreach ($tree as $term) {
    // Decide how you want to render the terms. This is just one possibility.
    $items[] = l(check_plain($term->name), taxonomy_term_path($term));
  }
  $form['categories1']['tab1'] = array(
    '#type' => 'tabpage',
    '#title' => t('Zakładka'),
    '#content' =>  theme('item_list', $items),
  );
  return tabs_render($form);

?>

J.w tylko z dwoma zakładkami (przykład działania na stronie)

<?php
  $form = array();

  $form['categories1'] = array(
    '#type' => 'tabset',
  );
  $items = array();
  $tree = taxonomy_get_tree(6, $parent = 0, $depth = -1, $max_depth = NULL);
  foreach ($tree as $term) {
    // Decide how you want to render the terms. This is just one possibility.
    $items[] = l(check_plain($term->name), taxonomy_term_path($term));
  }
  $form['categories1']['tab1'] = array(
    '#type' => 'tabpage',
    '#title' => t('Terminy słownika Elektronika'),
    '#content' =>  theme('item_list', $items),
  );
  $form['categories1']['tab2'] = array(
    '#type' => 'tabpage',
    '#title' => t('Statyczna zakładka'),
    '#content' =>  t('Jakiś tekst który jest tu wpisany na stałe'),
  );

  return tabs_render($form);

?>

Porada:
Jeśli chcesz umieścić taką wstawkę na stronie wybierz format danych na „PHP code“ oraz zastosuj na końcu swojego kodu zamiast return polecenie print tak aby dowolny tekst umieszczony za kodem mógł się również wykonać.

Efekty specjalne stosowane w zakładkach

Dla zakładek istnieje możliwość ustawienia takich efektów jak:

  • cieniowanie
  • szybkość
  • efekt slajdu
  • stała wysokość

To wszystko i wiele więcej można ustawić jednak nie bezpośrednio. I tu jest pies pogrzebany. Aby móc modyfikować te parametry z poziomu panelu administratora trzeba dokonać modyfikacji plików tabs.js oraz tabs.module

Modyfikacja tabs.js

// ... jakiś kod

Drupal.tabsAttach = function() {

// test efektów
//alert('fade: '+ Drupal.settings.tabs.fade ? 'yes' : 'no');
//alert('slide: '+ Drupal.settings.tabs.slide ? 'yes' : 'no');
//alert('speed: '+ Drupal.settings.tabs.speed);

  $('.drupal-tabs')
    .addClass('tabs')
    .tabs({

      // modyfikacja dla efektów
      fxFade: Drupal.settings.tabs.fade,
      fxSlide: Drupal.settings.tabs.slide,
      fxSpeed: Drupal.settings.tabs.speed,
      fxAutoHeight: Drupal.settings.tabs.auto_height,


      onShow: Drupal.tabsAddClassesCallback()
    })
    .show()
    .find('ul.anchors')
    .addClass('tabs')
    .addClass('primary');
  Drupal.tabsAddClasses();
}

// ... jakiś kod

Modyfikacja tabs.module

// ... jakiś kod

/* tabs_menu() i tabs_admin_settings dodane (dla efektów) */

/**
 * @file
 * API for creating tabbed pages.
 */


function tabs_menu($may_cache) {
  $items = array();
  if ($may_cache) {
    $items[] = array(
      'path' => 'admin/settings/tabs',
      'title' => t('Tabs'),
      'description' => t('Configuration for tabs'),
      'callback' => 'drupal_get_form',
      'callback arguments' => array('tabs_admin_settings')
    );
  }
  else {
     tabs_load();
   }
  return $items;
}

/**
 * Menu callback for admin settings.
 */
function tabs_admin_settings() {
  $form = array();
  $form['tabs_slide'] = array(
    '#type' => 'radios',
    '#title' => t('Slide effect'),
    '#description' => t('Apply slide effect when changing tabs.'),
    '#default_value' => variable_get('tabs_slide', 0),
    '#options' => array(t('disabled'), t('enabled')),
  );
  $form['tabs_fade'] = array(
    '#type' => 'radios',
    '#title' => t('Fade effect'),
    '#description' => t('Apply fade effect when changing tabs.'),
    '#default_value' => variable_get('tabs_fade', 0),
    '#options' => array(t('disabled'), t('enabled')),
  );
  $form['tabs_speed'] = array(
    '#type' => 'radios',
    '#title' => t('Effect speed'),
    '#description' => t('Speed at which to apply effects.'),
    '#default_value' => variable_get('tabs_speed', 'slow'),
    '#options' => array('slow' => t('slow'), 'fast' => t('fast')),
  );
  $form['tabs_auto_height'] = array(
    '#type' => 'radios',
    '#title' => t('Fixed height'),
    '#description' => t('Set all tabs to have the height of the tallest tab. If not enabled, content will adjust to fit when tabs are changed. Note: fixed height is not fully compatible with slide and fade effects.'),
    '#default_value' => variable_get('tabs_auto_height', 0),
    '#options' => array(t('disabled'), t('enabled')),
  );
  $form = system_settings_form($form);
  return $form;
}


 // ... jakiś kod


function tabs_load(){

  // ... jakiś kod

    // modyfikacja dla efektów
    drupal_add_js(array('tabs' => array('slide' => (bool) variable_get('tabs_slide', 0), 'fade' => (bool) variable_get('tabs_fade', 0), 'speed' => variable_get('tabs_speed', 'slow'), 'auto_height' => (bool) variable_get('tabs_auto_height', 0))), 'setting');

  // ... jakiś kod
}

// ... jakiś kod
5
Twoja ocena: Brak Średnio: 5 (1 vote)