Implementacja dowolnej funkcjonalności jQuery UI w Drupalu na przykładzie zakładek

Czym jest jQuery UI?

jQuery UI to JavaScriptova biblioteka rozszerzająca funkcjonalność biblioteki jQuery o funkcjonalności związaną z efektami wizualnymi i interfejsem użytkownika.

Rdzeń Drupala 7 zawiera wszystkie biblioteki jQuery UI, jednak domyślnie nie są one ładowane. Zatem jeżeli zachodzi potrzeba zaimplementowania jakiejś funkcjonalności jQuery UI na stronie trzeba zrobić mały trik.

Ładowanie dowolnej funkcjonalności jQuery UI

Aby załadować dowolną bibliotekę trzeba w szablonie strony np. w pliku page.tpl.php, umieścić poniższy fragment kodu:

drupal_add_library('system', 'ui.tabs');

Powyższy kod spowoduje dodanie funkcjonalności związanej z obsługa zakładek na dowolnej stronie.

Dostępne funkcjonalności jQuery UI

Aby załadować dowolną funkcjonalność z biblioteki jQuery UI trzeba użyć funkcji drupal_add_library gdzie argumentami są system i nazwa funkcjonalności.

jQuery UI zawiera następujące funkcjonalności:

//Załączenie wszystkich funkcjonalności w jednej linii
drupal_add_library('system', 'ui');
 
//Załączenie tylko takiej funkcjonalności jakiej potrzebujemy
drupal_add_library('system', 'ui.accordion');
drupal_add_library('system', 'ui.autocomplete');
drupal_add_library('system', 'ui.button');
drupal_add_library('system', 'ui.datepicker');
drupal_add_library('system', 'ui.dialog');
drupal_add_library('system', 'ui.draggable');
drupal_add_library('system', 'ui.droppable');
drupal_add_library('system', 'ui.mouse');
drupal_add_library('system', 'ui.position');
drupal_add_library('system', 'ui.progressbar');
drupal_add_library('system', 'ui.resizable');
drupal_add_library('system', 'ui.selectable');
drupal_add_library('system', 'ui.slider');
drupal_add_library('system', 'ui.sortable');
drupal_add_library('system', 'ui.tabs');
drupal_add_library('system', 'ui.widget');

Wstawienie zakładek na dowolnej stronie

Przed wstawieniem zakładek na dowolnej stronie należy w szablonie, w pliku page.tpl.php, umieścić poniższy fragment kodu:

drupal_add_library('system', 'ui.tabs');
drupal_add_js('jQuery(document).ready(function(){jQuery("#tabs").tabs();});', 'inline');

Mając załadowaną funkcjonalność tabs można wstawić na stronę zakładki. W tym celu w zawartości strony, na której chcemy mieć nasze zakładki wpisujemy:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Zakładka 1</a></li>
    <li><a href="#tabs-2">Zakładka 2</a></li>
    <li><a href="#tabs-3">Zakładka 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Zawartość pierwszej zakładki</p>
  </div>
  <div id="tabs-2">
    <p>Zawartość drugiej zakładki</p>
  </div>
  <div id="tabs-3">
    <p>Zawartość trzeciej zakładki</p>
  </div>
</div>

Dodaj nowy komentarz

Filtrowany HTML

  • Adresy internetowe są automatycznie zamieniane w odnośniki, które można kliknąć.
  • Dozwolone znaczniki HTML: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Znaki końca linii i akapitu dodawane są automatycznie.
  • Tekstowe buźki będą zamieniane na ich graficzne odpowiedniki.

Czysty tekst

  • Znaczniki HTML niedozwolone.
  • Adresy internetowe są automatycznie zamieniane w odnośniki, które można kliknąć.
  • Znaki końca linii i akapitu dodawane są automatycznie.
  • Tekstowe buźki będą zamieniane na ich graficzne odpowiedniki.
CAPTCHA
W celu potwierdzenia, że jesteś człowiekiem, prosimy o wykonanie poniższego zadania
Target Image