Realizując niedawno projekt musiałem się zmierzyć z problemem zakładek. Postanowiłem, że nie będę tym razem pisać wszystkich Java Scriptów od postaw, lecz wykorzystałem bibliotekę JQuery. Dodatkowo, tworząc kod chcę, by był on łatwy do wykorzystania w innych projektach. Serwis wykonany był w PHP, postanowiłem więc połączyć możliwości JQuery z PHP.
W efekcie końcowym udało mi się utworzyć klasę, która w kilku linijkach (już cztery komendy) pozwala na utworzenie ciekawego efektu zakładek. 
Na potrzeby realizacji serwisu zaimplementowałem klasę Tabs. Jednak przed jej wykorzystaniem należy zdefiniować odpowiednie style CSS, o czym będzie później.
Kolejnym krokiem jest utworzenie nowego obiektu klasy Tabs, do którego można dodować zakładki metodą addTab() oraz narysować zestaw zakładek na ekranie metodą show().

Całość kodu PHP wygląda tak:

$tabs = new Tabs("test");
$tabs->addTab("Tab 1","Content 1");
$tabs->addTab("Tab 2","Content 2");
$tabs->addTab("Tab 3","Content 3");
$tabs->show();

Jak to jest zrobione

Jak wspomniałem na wstępie, najpierw musimy zdefiniować odpowiednie style. Mój arkusz styli opisuje następujące elementy:
div.tabHeaders – jest kontenerem zakładek,
div.tabInactive – nieaktywna zakładka,
div.tabActive – aktywna zakładka,
div.tabPages - kontener treści dla poszczególnych zakładek.
Zmiana wyglądu poszczególnych elementów zakładek ogranicza się do modyfikacji arkusza styli.

Hierarchicznie, elementy wygenerowane przez kod PHP prezentują się w sposób następujący:

Zadaniem skryptu jest prezentowanie tylko jednej treści (odpowiedni tabContent), powiązanej z aktywną zakładką. Reszta warstw (w node tabPages) jest wyłączana. I za to odpowiedzialny jest kod Javascriptowy, który wykorzystuje bibliotekę JQuery.
Gdy utworzymy zakładki, podając w konstruktorze nazwę test, klasa PHP w metodzie show() wygeneruje następujący kod (opis kodu w komentarzach):

//kod: JavaScript/JQuery
//funkcja uruchomi się w momencie załadowania
$(document).ready(function() 
{
  //ukrywam wszystkie div znalezione w elemencie test_pages
  $("#test_pages").find("div").hide();
  //aktywuje pierwszą zakładkę
  $("#test_tab1").addClass("tabActive");
  $("#test_tab1Content").show(); 
  //zdarzenie onClick dla selektorow (to naglowki zakładek)
  $("#test_tab1,#test_tab2,#test_tab3").click(function()
  {//szukam kliknietej zakladki (diva)
    var oldTab = "#"+$("#test_tabHeaders").children(".tabActive").attr("id");
   //usuwam z zakladki clase reprezentujaca aktywna zakladke
    $(oldTab).removeClass("tabActive");
   //oznaczam klikniety div jako aktywny
    $(this).addClass("tabActive");
    var newTab ="#"+$(this).attr("id")+"Content"; 
   //ukrywam tresc  zakladki
    $(oldTab+"Content").hide();
    //i pokazuje aktualna tresc
    $(newTab).fadeIn();
  });
});
 

Dodaj komentarz:
Autor:*

WWW:

Treść:*

Wprowadź kod zabezpieczający*:


        * - pola wymagane

• Atraktor Lorenza
• O związku motyli z pogodą...
• Nie taki dialog straszny, czyli kilka słów o okienkach dialogowych
• Android - dostosowanie paska tytułowego
• Równoległy może więcej(?) - czyli kilka słów o Parallel.For

• 2012-01-02 09:38:09
  Szanowny Anonimie - może jakieś uzasadnienie? W tym mini-arcie chodziło tylko o zabawę. Nie ukrywam, że nie ja wymyśliłem IFS, a i współczynniki są dostępne powszechnie. Pozdrawiam kuba@leniwce.com
• 2011-12-21 15:01:26
  Jest mi bardzo przkro , gdyz jest to PIRACTWO....
• 2011-11-01 22:30:51
  :)
• 2011-09-27 12:00:59
  Wspomniane w tym artykule zjawisko nowi nazwę "Efekt motyla" i jest ściśle związane z teorią chaosu ;) Według niej, niektórych rzeczy nigdy nie będzie w stanie przewidzieć - niezależnie od szybkości procesorów i technologii :)
• 2011-08-27 15:55:20
  Zgadzam się. Wyraźnie tego nie napisałem, ale przedstawione działanie excela jest w tym sensie jak najbardziej poprawne, i nie może być mowy o błędnym działaniu. Inną kwestią jest świadomość użytkownika, skąd biorą się takie, a nie inne wyniki obliczeń. Artykułem chciałem właśnie zwrócić uwagę na to, że kłopoty z numerycznymi prognozami biorą się z niejako naturalnych zjawisk (punkty 1-3).