Artykuł

Yetii – czyli moje podejście do tematu “zakładek” Grzegorz Wójcik

Yetii został wymieniony w artykule 75 (Really) Useful JavaScript Techniques w prestiżowym Smashing Magazine - cóż za zaszczyt! :)

Zakładki (ang. tabs) są coraz częściej wykorzystywanym „interaktywnym” elementem stron internetowych. Sprawdzają się zwłaszcza w sytuacji, gdy na stronie jest naprawdę tłoczno (przykładowo jest to strona główna serwisu) i dysponujemy ograniczonym obszarem dla zaprezentowania większej ilości informacji.

W Internecie znajdziemy mnóstwo darmowych „zakładkowych” skryptów, jednak większość z nich ma kilka podstawowych wad:

  • albo są mało elastyczne (co wynika z błędnej implementacji)
  • albo są zbyt rozbudowane i „napuchnięte” niepotrzebną funkcjonalnością
  • albo są zależne od popularnych JavaScriptowych bibliotek
  • albo stają się niedostępne w sytuacji wyłączonej obsługi skryptów w przeglądarce

Wychodząc naprzeciw tym problemom postanowiłem napisać we własnym zakresie coś małego i funkcjonalnego zarazem – Panie i Panowie – przedstawiam wam Yetii (ang. Yet (E)Another Tab Interface Implementation).

Yetii – funkcjonalność

  • treść zakładek jest dostępna nawet w sytuacji braku obsługi JavaScript
  • możliwość określenia domyślnie aktywnej zakładki
  • możliwość włączenia mechanizmu automatycznej rotacji zakładek w jednym z dwóch trybów
  • możliwość użycia wielu różnych grup zakładek na jednej stronie
  • możliwość zagnieżdzenia jednej grupy zakładek wewnątrz innej
  • możliwość dostosowania domyślnych nazw klas CSS wykorzystywanych do generowania zakładek
  • możliwość podpięcia własnej funkcji wykonywanej w momencie kliknięcia w zakładkę
  • możliwość podpięcia własnej funkcji wykonywanej w momencie opuszczenia konkretnej zakładki
  • możliwość stworzenia linku na stronie B do konkretnej zakładki na stronie A poprzez dodanie odpowiedniego parametru w adresie URL
  • możliwość włączenia mechanizmu „pamiętania” ostatnio klikniętej zakładki między kolejnymi przeładowaniami strony

Demo

Skrypt w działaniu można zobaczyć na tej stronie.

Użycie

  1. Pobierz plik z kodem źródłowym Yetii i dołącz go do swojej strony:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5.     <script type="text/javascript" src="yetii.js"></script>
  6. </head>
  1. Przygotuj kod HTML zakładek:
  1. <body>
  2.     <!-- zakładki -->
  3.     <div id="tab-container-1">
  4.         <ul id="tab-container-1-nav">
  5.             <li><a href="#tab1">tab 1</a></li>
  6.             <li><a href="#tab2">tab 2</a></li>
  7.         </ul>
  8.         <div class="tab" id="tab1">
  9.             <h2>tab 1</h2>
  10.             <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  11.         </div>
  12.         <div class="tab" id="tab2">
  13.             <h2>tab 2</h2>
  14.             <p>It was popularised in the 1960s with the release of Letraset sheets.</p>
  15.         </div>
  16.     </div>
  17.     <!-- zakładki -->
  18. </body>

Jak widać w powyższym przykładzie pojemnikiem definiującym grupę zakładek jest div o id="tab-container-1". Wewnątrz pojemnika umieszczona jest nieuporządkowana lista linków, za pomocą których możliwe stanie się przełączanie między poszczególnymi zakładkami. Lista powinna mieć przypisane odpowiednie id, które powstaje z połączenia id pojemnika i końcówki -nav.

Yetii linkowi aktywnej zakładki dynamicznie przypisuje klasę active:

  1. <ul id="tab-container-1-nav">
  2.     <li class="activeli"><a class="active" href="#tab1">tab 1</a></li>
  3.     <li><a href="#tab2">tab 2</a></li>
  4. </ul>

Specjalna klasa CSS (domyślnie activeli) przypisywana jest także elementowi listy, w którym znajduje się aktywny link. Jeśli zmienimy nazwę aktywnej klasy np. na aktywny to do elementu listy zostanie przypisana klasa aktywnyli.

Dzięki kreatywnym stylom CSS można bardzo prosto przekształcić tę nieuporządkowaną listę w grupę zgrabnych przycisków do przełączania zakładek – zobacz arkusz CSS ze strony demonstracyjnej.

Zawartość poszczególnych zakładek powinna zostać umieszczona jest w blokach div z klasą tab.

  1. Zainicjalizuj obiekt Yetii:
  1. <body>
  2.     <div id="tab-container-1">
  3.         <ul id="tab-container-1-nav">
  4.             <li><a href="#tab1">tab 1</a></li>
  5.             <li><a href="#tab2">tab 2</a></li>
  6.         </ul>
  7.         <div class="tab" id="tab1">
  8.             <h2>tab 1</h2>
  9.             <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  10.         </div>
  11.         <div class="tab" id="tab2">
  12.             <h2>tab 2</h2>
  13.             <p>It was popularised in the 1960s with the release of Letraset sheets.</p>
  14.         </div>
  15.     </div>
  16.     <script type="text/javascript">
  17.     var tabber1 = new Yetii({
  18.         id: 'tab-container-1'
  19.     });
  20.     </script>
  21. </body>

Aby określić domyślnie aktywną zakładkę (np. drugą):

  1. var tabber1 = new Yetii({
  2.     id: 'tab-container-1',
  3.     active: 2
  4. });

Aby uaktywnić mechanizm automatycznej rotacji zakładek (interwał rotacji wyrażony jest w sekundach):

  1. var tabber1 = new Yetii({
  2.     id: 'tab-container-1',
  3.     active: 2,
  4.     interval: 5
  5. });

Domyślnie mechanizm rotacji wyłącza się w momencie, gdy użytkownik kliknie jakąś zakładkę. Jednak jeśli obok parametru interval określimy dodatkowo parametr wait:

  1. var tabber1 = new Yetii({
  2.     id: 'tab-container-1',
  3.     active: 2,
  4.     interval: 5,
  5.     wait: 10
  6. });

w momencie kliknięcia w zakładkę rotacja „zastygnie” na określoną liczbę sekund (10 w powyższym przypadku) i po tym czasie będzie kontynuowana.

Aby dostosować nazwy klas CSS, które wykorzystywane są przez skrypt do generowania zakładek:

  1. var tabber1 = new Yetii({
  2.     id: 'tab-container-1',
  3.     active: 2,
  4.     interval: 5,
  5.     tabclass: 'mojaklasazakladki',
  6.     activeclass: 'mojaklasaaktywnegolinku'
  7. });

Możliwe jest także „ręczne” wywołanie metody odpowiedzialnej za pokazanie konkretnej zakładki w danej grupie zakładek:

  1. <a href="#" onclick="tabber1.show(2); return false;">Pokaż zakładkę numer 2</a>

Istnieje także możliwość podpięcia własnej funkcji, która wykonywana będzie w momencie kliknięcia w zakładkę:

  1. function mojafunkcja(zakladka) {
  2.     if (zakladka==2) alert('Kliknąłeś zakładkę nr 2');
  3. }
  4.  
  5. var tabber1 = new Yetii({
  6.     id: 'tab-container-1',
  7.     callback: mojafunkcja
  8. });

Funkcję wykonywaną w momencie opuszczenia danej zakładki podpinamy w następujący sposób:

  1. function mojafunkcja(zakladka) {
  2.     if (zakladka==1) alert('Opuściłeś zakładkę nr 1');
  3. }
  4.  
  5. var tabber1 = new Yetii({
  6.     id: 'tab-container-1',
  7.     leavecallback: mojafunkcja
  8. });

Zagnieżdżając jakąś grupę zakładek wewnątrz innej „nadrzędnej” zakładki należy pamiętać, aby ustawić inne klasy dla zakładek z obu tych grup (parametr tabclass) np.:

  1. var grupa_nadrzedna = new Yetii({
  2.     id: 'grupa_nadrzedna'
  3. });
  4.  
  5. var podgrupa = new Yetii({
  6.     id: 'podgrupa',
  7.     tabclass: 'jakasinnaklasa'
  8. });

Aby stworzyć link na stronie B do konkretniej zakładki na stronie A należy zbudować go w następujący sposób:

  1. <a href="stronaA.html?tab-container-1=2">2 zakładka wewnątrz tab-container-1 na stronie A</a>

gdzie tab-container-1 jest pojemnikiem grupy zakładek, wewnątrz której chcemy wybrać zakładkę (drugą w przykładzie powyżej). Zamiast wartości numerycznej można także podać DOM id zakładki, która ma być aktywna np.:

  1. <a href="stronaA.html?tab-container-1=tab2">2 zakładka wewnątrz tab-container-1 na stronie A</a>

Aby włączyć mechanizm „pamiętania” ostatnio klikniętej zakładki (np. pomiędzy poszczególnymi przeładowaniami strony) należy zainicjalizować obiekt Yetii z parametrem persist:

  1. var tabber1 = new Yetii({
  2.     id: 'tab-container-1',
  3.     persist: true
  4. });

Informacje o ostatnio klikniętej zakładce przechowywane są w ciasteczkach sesyjnych, które wygasają w momencie zamknięcia okna przeglądarki. W sytuacji, gdy jednocześnie włączony jest mechanizm pamiętania klikniętej zakładki, określono aktywną zakładkę za pomocą parametru w adresie URL i skrypt zaincjalizowo z parametrem active stosowana jest następująca hierarchia pierwszeństwa:

zapamiętana zakładka « parametr w adresie URL « parametr active

Pobierz Yetii

Wszelkie sugestie na temat skryptu i ewentualne propozycje poprawek jak zawsze mile widziane.

Czytaj więcej:
Artykuły » JavaScript
Tagi:
,

O AUTORZE

Grzegorz Wójcik

Grzegorz Wójcik jest założycielem internetowego magazynu kminek.pl. Pasjonat i twórca lekkich, dostępnych i użytecznych stron internetowych budowanych w oparciu o standardy sieciowe i najlepsze praktyki. Prywatnie wielki miłośnik ambitnego kina sci-fi oraz grunge-rocka z lat 90.

Zobacz wszystkie artykuły tego autora (15)

  1. North 1

    Naprawdę fajny pomysł z tymi zakładkami, prosta instalacja, konfiguracja :) ogólnie polecam :)))


  2. Rainwiz 2

    Great.

    Thanks!


  3. jdbartlett 3

    Great library! Before I found this, I suggested a similar concept on my blog but never followed through and developed a polished library like this.


  4. Trusty 4

    Is there any way to dynamically change the active tab without a page refresh?


  5. Seb 6

    Hello, thx for this cool code.

    I have my yetii tabs on page A and I’d like to make a link on page B that links to tab #2 or #3 or #X.

    Could you please tell me how I could do this ?


    • Grzegorz Wójcik 7

      You can do this using cookies – assuming that page A and page B are in the same domain. I can post some sample code if You don`t know how to do it.

      But I would do it server-side – append a parameter to link on page B:

      1. <a href="pageA.php?tab=3" rel="nofollow">page A - tab 3</a>

      Then on page A use server-side scripting (PHP) to get tab variable from URL and output Yetii JavaScript dynamically (with different active parameter for instance).


  6. Seb 8

    Thx for the answer. I think I will do it with cookies and I would be glad to see the code samples that you propose :-).


  7. Peter 9

    I like your code.I have follow your step but doesn’t work for me….newbie


  9. Sven 11

    Hi Grzegorz,
    thanks for that great script.

    I have a page with two tabs and would like to load a google map in the second tab while the first tab is visible by default. The problem is that the map won’t load in a hidden div, but I can call a javascript function (map.checkResize()) to fix this. This works when I use the Firebug JS-Console but I don’t know how I can call the function in combination with your script.

    This means I have to call a own javascript function after the content of the second tab is shown. An onclick or onmousedown event doesn’t work.

    Can you give me a hint?

    Thanks in advance,
    Sven


  10. Grzegorz Wójcik 12

    Hi Sven,

    what you need is the ability to define a custom function that will run after certain tab is visible. I have just added this kind of functionality to Yetii. Please download the latest version of the script. Now all you have to do is to define yout custom function:

    1. function customfunction(tabnumber) {
    2. if (tabnumber==2) map.checkResize(); //will run after tab 2 is showed
    3. }

    and initialize Yetii object like this:

    1. var tabber1 = new Yetii({
    2. id: 'tab-container-1',
    3. callback: customfunction
    4. });

    Let me know if it works.


    • Cory 13

      Hi Grzegorz,

      Unfortunately, I tried setting up a custom function to no avail. Here is what my custom function looks like.

      1. function customfunction(tabnumber) {
      2. if (tabnumber==2) map.checkResize();
      3. }
      4.  
      5. var tabber1 = new Yetii({
      6. id: 'tab-container-1',
      7. callback: customfunction
      8. });

      Unfortunately, it doesn’t appear to be applying correctly. My Google Map on the second tab is still not resizing – it loads half-way.

      Any help you could provide would be great.

      Thanks,

      Cory


      • Grzegorz Wójcik 14

        hi Cory,

        it seems that this is not Yetii related issue – make sure that Yetii invokes your custom function (you can put alert() there to be sure) – if it does then this might be Google Map script related issue (maybe it collides with Yetii somehow).


  11. Sven 15

    Thanks very much for your fast help.
    It works fine!

    Thank you,
    Sven


  12. xddxz 16

    Thanks a lot! Very Good


  13. Sander 17

    Wow, this is a nice way to tab! I have a question tho: is it possible to trigger a tab on a different page, e.g. “aboutme.php#history” or something ? I really hope you can help me with this!
    Thanks in advance,

    Sander


  14. Hen 18

    This is really good especially the way it can be re-used so easliy.
    Are you able to give me an indication of how to page through the tabs using a next and previous format

    Thanks


  15. Grzegorz Wójcik 19

    Hi Hen,

    I have updated the script and added methods to allow next/previous pagination. Just download the latest version of the script, initialize Yetii and attach new methods to your next/previous buttons:

    1. <script>
    2. var tabber1 = new Yetii({
    3. id: 'tab-container-1'
    4. });
    5. </script>
    1. <a href="javascript:tabber1.previous()" rel="nofollow">previous</a>
    2. <a href="javascript:tabber1.next()" rel="nofollow">previous</a>

  16. Hen 20

    Brilliant thanks very much. I can’t believe how lightweight this is.

    All the best Hen


  17. Hen 21

    Hi

    The Next Previous tabbing works really well but only seems to toggle if I have 2 divs to display i.e tab1 and tab2. If I add a third or fourth tab it errors and I can’t figure out what this is. Any ideas

    Thanks again Hen


  18. Grzegorz Wójcik 22

    Hi Hen,

    check out the demo page – I have put next/previous buttons example there.


  19. Petr Hirsal 23

    Hi,

    I really like your yetii code, it helps in few projects. However, no effects are included so I tried to implement spry effects and here it is, very cool!

    Just add in yetii.js into this.show function:

    1. var secondFade = new Spry.Effect.Fade('divtofade', {toggle:true});
    2. secondFade.start();

    also include the spry js, also lightweight and you could combine effects.

    This is not advert of spry effects, you can delete this comment as well, but it’s a note to improve your great Yetii!


  20. andre 24

    can you explain in better manner how include SprayEffects on yetii?
    thanx.


  21. Michael 25

    Simply beautiful .. Thanks Grzegorz Wójcik for the library.


  22. Petr Hirsal 26

    Hi again I have problem with onmouse function on each tab, is there any suggestion how to add onmouseout, onmouseover event to queue?

    Please note this: each tab on yetii has own url path onclick and onmouseout event it has to open its content but if you scroll your mouse or move trough other tabs, it makes ugly seqence.

    On other lightweight scripts solutions there is a queue handle, is there any way how to fix this and release me of my headaches?

    Please, let me know your options.


  23. XaeroZKota 27

    Witam. Dzięki za piękny skrypt. Dobra robota!
    Jednak mam problem z instalacją, ponieważ w IE przeglądarka przy starcie blokuje wykonywanie skryptu.
    Jest na to jakaś prosta rada?
    Wszystko działa ok, ale ten komunikat przeglądarki jest “nieładny”.
    Pozdrawiam


  24. Grzegorz Wójcik 28

    Hej,

    Yetii jest wykorzystywany m.in. na glownej stronie kminka – nie zauwazylem, aby wchodzac na nia zarowno pod IE6 jak i IE7 wyskakiwal jakis komunikat. Mozliwe, ze odpalasz strone ze skryptem lokalnie – wtedy pod IE7 rzeczywiscie chyba cos wyskakuje.

    Pokombinuj z ustawieniami zabezpieczen IE.

    Pozdrawiam


  25. XaeroZKota 29

    Problem rozwiązany.
    Nie można definiować styli dla id

    poprzez #tab-container {}

    tylko dla class:

    DIV.klaska {}

    IE prawdopodobnie blokuje dynamiczną zmianę tych styli


  26. Goran 30

    Hi,

    i have a small problem with tabs, i included some PHP codes, like calling a descripton in 1st tab, contactform in 2nd tab and a news section in 3rd tab.
    The problem i have is in 3rd tab, because the news section has a link inside for more news that i would like to display in 3rd tab, but when the “more info” link is being klicked the page gets refreshed with the more news content and the content jumps to 1st tab so i have to klick on 3rd tab again to see the news content. Is there a way to define which tab should be reloaded again?


  27. Mike 31

    Hello,

    I’m testing this out and can’t seem to get the actual tabs to appear.

    http://jittany.com/tabs2.html

    I’m sure it’s pretty obvious, but I would appreciate any help as to what I’m missing.

    Thank you.


  28. Grzegorz Wójcik 32

    Goran, soon I`ll update Yetii code to store active tab between page refresh.

    Mike – I`ve checked your link – seems to be working fine ;)


  29. Goran 33

    hello Grzegorz,

    thank you about the info, i am looking forward to it.
    keep the good work :-)


  30. Grzegorz Wójcik 34

    Just to let all of you know – I have updated Yetii script with new features:

    # you can link to certain tab on page A from page B via URL parameter
    # you can turn on tab persistence feature, so the most recently clicked tab is stored inside a cookie and remembered between page refresh

    Check Yetii page for detailed description.


  31. Sreekanth 35

    Hello Grzegorz,

    I am implementing YETII with the requirement of displaying contents on tabs that need to be auto switched. Your script enables the feature, however, I would like to resume the autoswitch as soon as the user has navigated away from the tabs container. Say, I have tabs like photo, videos, popular, most viewed and submit content.

    I want the user to stay in a tab ‘for as long as he wants’ since each tab will inturn contain a carousel of photo and video thumbnails, and as soon as or in a specified time interval since the user has moved away from YETII container, I need the autoswitch to resume.

    The wait parameter would help if I knew how long one would stay in a tab, which isn’t the case.

    Regards,
    Sreekanth


  32. Grzegorz Wójcik 36

    Hi Sreekanth,

    I see your point but it would be hard to implement. First of all you will need to detect “navigate away” event – what would it be? Mouse pointer leaves Yetii container or what?

    You can always set large wait parameter and it would be almost the same.


  33. Sreekanth 37

    Hello Grzegorz,

    I do understand that it would be difficult. However, as you have suggested, a larger ‘wait’ parameter would simply mean that, the autoswitch will not start at all, say, users are navigating through a thumbnail carousel, and on moving away to new content, it should start switching soon. Since the primary objective is to display all tab contents for maximum content visibility. I would suggest an onmouseout event trigger, but I am not so versed in javascripts to write a function to initiate autoswitch. Would it be possible for any function to restart the switch?

    Regards,
    Sreekanth


  34. Jeremy Hicks 38

    Is it possible to not include the library in the head of the html document and still have this work?


  35. Grzegorz Wójcik 39

    Is it possible to not include the library in the head of the html document and still have this work?

    yes, actually you can include it anywhere but before Yetii object call


  36. noone 40

    1. Pokarz zakładkę numer 2

    Chyba pokaz (pokaż od pokazać) :-)


  37. Claudia Regina 42

    (Oh gosh, what language is this? I understand nothing!!! xD)

    Anyway, I just loved this js… it’s so simple and well made. I’m a designer so this kind of code is kinda “too much” to me, but you made it simple and pretty. Really congrats!!!! =)


  38. Johan Tagor 43

    Hi,

    I’m about to test some of free tab menu available on the net and I think yours is light, simple and neat. But I think forgot to provide the css files [white & custom].

    Regards.


  39. Alexandar 44

    This might be a dumb question, but is there some way to put an image as a background for tab titles?
    Thanks in advance


  40. Michal 45

    Hi,

    Is it possible to define a callback that would be called when user leaves a tab (e.g. tab gets inactive by clicking on another one)?

    Thanks
    Michal


  41. Marcin 46

    jak dodać mechanizm ładowania zakłądek chodzi mi o obrazek lub napis ??


  42. bresson 47

    silly question but is it possible to evoke the tab toggle on element instead of ?


  43. bresson 48

    Great! It implements on ! Hopefully this is my final silly question but is it possible to set a min-height? The object resizes height to meet content height. Thanks!


  44. Ali 49

    Hi Grzegorz,

    This is a wonderful script and does most of the things I require. I am having a problem with the interface in IE 7.0.5730.11 on the PC. When I click on the tabs the page jumps to the destination (the destination element jumps to the top of the page hiding the tabs!). Rotation, previous/next and linking to a specific tab from another page all work as expected though. I can only assume there is something quirky about the onclick event and css.

    Any ideas how to resolve this would be appreciated, as I can’t implement without.

    Wish list includes also includes animation and ajax. Please note that changing opacity programmatically in IE haas unresolved rendering issues.


  45. Rysiek 50

    Witam
    Mam 4 zakładki i chciałbym do każdej zakładki zrobić inny link aktywny (przycisk graficzny) jak to zrobić, bo tutaj sie tylko da tylko jeden taki sam link aktywny :)


  46. Grzegorz Wójcik 51

    Hej Rysiek,

    mozesz to zrobic na przyklad tak:

    1. <ul>
    2.  <li id="o-nas"><a href="#" rel="nofollow">o nas</a></li>
    3.  <li id="produkty"><a href="#" rel="nofollow">produkty</a></li>
    4. </ul>
    1. #o-nas a.active {
    2.  jakiś styl...
    3. }
    4.  
    5. #produkty a.active {
    6.  jakiś inny styl...
    7. }

  47. Rysiek 52

    Jescze mam jeden problem klasę aktywną chciałbym zrobić dla li nie dla a jak to zrobić?


  48. Rysiek 54

    Przepraszam że tak zawracam głowę ale to dalej nie działa pobrałem najnowszą wersję i nie chce działać może źle robie, możesz podać przykład?


    • Grzegorz Wójcik 55

      Pobierz jeszcze raz skrypt, cos skopalem i przez chwile na serwerze byl plik z bledem. Teraz powinno byc okej. Mozesz sprawdzic, ze klasa jest dodawana dynamicznie do elementu za pomoca polecenia View Generated Source w Web Developerze w FF.


  49. Rysiek 56

    Juz działa mój bład. :)


  50. Damian 57

    Czesc jak moge zrobic jeden przycisk ktory bedzie zmienial raz na jedna raz na druga zakladke? Cos jak Next i Previous w jednym…
    ps. Swietny skrypt gratuluje!


  51. JIAM 58

    I am implementing Yetii and it works wonderfully with the exception of Internet Explorer where every time I load the page I get an errore message “Out of memory at line 163”.

    Otherwise I don’t get any error messages in Google Chrome or Firefox.

    Any ideas on what may be the cause?


  52. Vrushali 59

    Hi
    I tried yetii code as same as described in the intro page, but instead of tabs I get radio buttons
    . tab1
    . tab2

    and when I click on each I get the contents of each tab. Why so?


  53. Adam 60

    Can’t wait to see the tab change animation. Keep up the good work!!!


  54. maddy 61

    Hi

    thanks for a wonderful script, but i would like to know if it is possible to load different page instead of content from a element for instance a . my website is a dual languiage website so i would like to load two different langauges in two nested tabs so user can click on say english and read contents in englis and otherwise he can shoose on say hindi and read content in nested tabs


  55. Mike 62

    Hi

    Fantastic script. It is making my life much easier. I have one suggestion you might consider. Can you make it optionally suppress the previous button if we are looking at the first tab? I think it makes more sense to encourage users to progress though a form in the a logical order. Having a previous button on the first tab invites them to complete the form backwards and is a little confusing.

    Thanks again for your hard work,
    Mike


  56. miso 63

    Hi,

    Do you still plan to extend the functionality to support loading separate URL into a tab only after the tab is clicked:
    e.g.

    1. <a href="/myaction.php" rel="nofollow">o nas</a>
    2. <a href="/anotheraction.php" rel="nofollow">produkty</a>

  57. Grzegorz Wójcik 64

    Thank you all for comments/suggestions! Unfortunatelly due to the lack of time I have to suspend support and feature development for some time. But improved Yetii will be back for sure somwhere in the future.


  58. Sam 65

    very useful- thanks!

    One question: I would like to have one “tab” actually link to an entirely different page, not to a tab. When I enter an html file as a link in one of the list items of the tab names, it doesn’t do anything. I could of course use a mixture of links with “onClick”s and “normal” links to create my “tabs” but then it no longer dynamically applies the “active” class, so you cannot tell which tab you have open.

    So, any way to link out to a separate file within the list of tabs?


  59. Chris B 66

    Great script but is there any way to display ALL tabs at once. Why you ask? We’d like to have the ability to print the page content all in one shot.


  60. Yebo 67

    A very cool script, easy to implement and so light. But is there a possibility that you can publish the css as well


  61. Yebo 68

    Never mind my previous comment, I managed to download the css


  62. bilmiyorumlan 69

    Very cool code. I’ve been searching nearly for 2 weeks and finally found what i was looking for. But i have a problem with nested tabs.

    http://bilmiyorumlan.blogspot.com/

    As you can see Tab1a and Tab1b are the nested ones of Tab1, but their contents are mixed up. I want to make Tab1a only shows “Tab1a” line and same thing for Tab1b.


  63. bilmiyorumlan 71

    Nope Grzegorz Wójcik, it is still the same :( I can’t figure anything else to solve the problem.

    http://bilmiyorumlan.blogspot.com/


  64. bilmiyorumlan 72

    Ok, i got it. Was a little annoying extra “div” problem.
    Thank you Grzegorz for you help and this amazingly simple code for dummies like me.


  65. jean louis 73

    Best ajax tab system so far i use it thru all my site and compatible with all known browser
    Great work


  66. mores 74

    Hi,
    I wanted to say thanks for this neat script, I’m currently using it to create a website for a friend of mine.

    One question though :)
    Is it possible to display ALL tabs at the same time?
    The cool thing is, while loading, you see all the divs for a short time, until they get hidden (I guess that’s due to the position I’m calling the JS from).
    Now I want to make have all divs initially visible, then show only the div corresponding to the tab the user clicked. This would make a pretty “filtering” effect.
    Of course, I could add a “all” tab and put the content of all divs in there, but I’m calling content from a database, so that would be one added query.
    Thanks.


  67. mores 75

    another question: is it possible to hide the divs while they’re loading?
    I have divs with a bunch of images in them and at first you see them all, then *BAM* they’re gone and you just see the ones from the first tab.


  68. mores 76

    Let me answer that myself … use .tab {display:none;} they’ll be visible once yetii is finished loading.

    Now … how do I get the preloader in there …


  69. Xerdos 77

    Malinka skrypt, gratulacje.

    Mam małe pytanko:
    próbowałem już kilka tricków ale niestety nie udało mi się osiągnąć mojego celu.
    tworze sobie zakładki
    | tab1 | tab2 | tab3 |

    tab1 i tab2 się przełączają tak jak powinny, ale po wciśnięciu tab3 chciałbym aby odpalił mi się link, czyli tab3 to zwykły button.


  70. willem sanders 78

    Great script!

    Is there a way to enable/disable tabs client-side?

    grtz, Willem


  71. melih 80

    Sometimes .js pages (both yetii.js and -min.js) can not be reachable. Is there a problem?


  72. Jan Klerks 81

    I only see this when installing the above code

    —oooOooo—

    * tab 1
    * tab 2

    tab 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    tab 2

    It was popularised in the 1960s with the release of Letraset sheets.

    —oooOooo—

    It feels like a CSS file is missing.


  73. Johnny Carpenter 82

    I want to say that I love how light and elegant the Yetii framework is. Not a lot of baggage. I only have one question: Is there a simple way to do this, or are there plans for an enhancement to enable and/or disable some tabs so that they cannot be accessed and also to change the appearance of the the tab header itself to indicate the enabled/disabled state? Thanks.


  74. Crunch 83

    This script is amazing!!!

    Thank you m8! Much Much Much Appreciated!

    After trying 4 other bloated, overly complicated pos scripts that had conflicts with just about everything this thing rocks.

    The js file is 3.9k!!!

    Thanks a ton m8.


  75. Fabio 84

    Amazing script, if you can make it a WordPress plugin you’ll make a killing. Will test it and see how it works


  76. James John Malcolm 85

    Thanks for the Yetii, can’t wait to use it!


  77. Chris 86

    Fajny skrypt, ale plik CSS powinien zostać dołączony, bo w demo są zupełnie inne classy niż w opisie!


  78. Machiel 87

    I am a real dumbass with this stuff. But when I use the code provided, I only get the 2 tabs with all the text underneath it. So no switching or someting.
    Do I have to put it online or on a server to function or something? Any help would be great


  79. Machiel 88

    Allright, now its official; i AM a dumbass.
    Made a writing mistake, my bad.

    But i do get stuck with one part. In the tutorial it says Yetti automatically puts an “active” on the active item. But it doesnt. Do i need to add something special?


  80. Alfred Ayache 89

    Hi Gregorz:

    Thx for the terrific, lightweight script!

    This is only tangentially related. How do you produce the lovely code listings on the Polish version of the page?

    Also, would it be possible to see an example with images for tabs? (All right, this one’s not so very tangential.)

    Thx again,
    – AAA


  81. Alfred Ayache 90

    Oops! Forgot to mention… On that images example? Could we also have rollovers? Of course, the active tab would not be affected by rollovers.

    Thx again,
    – AAA


  82. quinten 91

    it look good, but it is missing css file, can you send it to me? my email

    [email protected]

    Thanks


    • Grzegorz K 92

      @quinten
      Omg… man… If you can not create your own CSS style based on css given here by author maybe you should find new hobby like hmmm… origami(?) instead of webmastering?

      Grześku:
      Świetny skrypt – tego właśnie szukałem :) prosta konfiguracja, przejrzysty kod, GRATULACJE :D


  83. natalie 94

    I have a problem with the nested tabs. I can only get one set of nested tabs to work, I need 3 sets of nested tabs.

    How do I do this? Is there something in the javascript I need to change for each set of nested tabs?


  84. natalie 95

    Nevermind, I figured it out. You have to change the ul id of the nested class, works great now. Thanks for the lightweight solution, it’s very nice!


  85. Vladimir Dzhuvinov 96

    Lightweight and easy to plug in – thank you! I chose it instead of jQuery as I needed a simple solution that didn’t force me to include extra CSS and widget logic.

    Here is what I got – with custom nav and cycling:
    http://software.dzhuvinov.com/index.html

    Now I’ll try to plug in some fade-in/out effect during transitions.

    Greetings from Bulgaria!

    Vlad


  86. Jan 97

    Hi, I have the same problem with Google maps, but when I use this:

    1. var tabber1 = new Yetii({
    2.     id: 'tab-container-1',
    3.     active: 1,
    4.     callback: customfunction
    5. });

    and this:

    1. function customfunction(tabnumber) {
    2.     if (tabnumber == 2) map_big.checkResize();
    3. }

    My tab doesn’t work. All my divs are showing when I add callback, why ?!


  87. Jan 98

    I’m sorry for this. It’s work ! This is my mistake. I put custom function in yetii.js, but when I remove from there and put in my html page it works perfect. Thank you ! :)


  88. TallyHo 99

    Hello,

    It is possible to pause the scroll when the cursor is in the tab (hover) ? And how can we do this ? Thanks :)


  89. KK 101

    Witam

    Nie zauważyłem nigdzie informacji jak dodać np dwa zestawy takich zakałdek na jednej stronie.

    Czy jest to możliwe? Rozumiem że nazwy tab-container-nav jest na “sztywno” i nie mogę jej zmienić. Jak zatem rozróżnić oba bloki zakładek tak aby działały niezależnie od siebie?

    Pozdrawiam i z góry dzięki za odpowiedź.


    • Grzegorz Wójcik 102

      po prostu dajesz kazdemu zestawowi zakladek inne ID np.

      zakladki-1
      zakladki-2

      teraz, wewnatrz np. zakladki-1 powinienes nadac elementowi UL z nawigacja zgodnie z konwencja takie ID: zakladki-1-nav.


  90. Ali Hussain 103

    Works like a charm.
    The only problem occurs on IE8 :s


  91. Julia 104

    Thank you so much!
    I searched the hole day in order to find such a useful and simple solution.

    Many thanks from Germany :-)


  92. AGNES 105

    I like it very much, and I have use it in my own project!


  93. Anita 106

    Thanks a lotttt for your help.
    The code worked perfectly fine for me.
    :D


  94. Benoit 107

    Thanks for this script, it works well.

    One thing could be improved: instead of changing the display attribute on tabs, you should add or remove an active class. It would be easier to customize (if you need a fade, it could be done with css transition easily).

    Replace line 46 with this code

    1. this.removeClass(this.tabs[i], this.defaults.activeclass);
    2. if ((i+1)==number) {
    3.     this.addClass(this.tabs[i], this.defaults.activeclass);
    4. }

    Then you need to set the style for an active tab in your css.


  95. Albert 108

    Hello,

    First of all thanks for that awesome work… I have a question:

    Can I add a tab when click on a link?


Dodaj komentarz * pola obowiązkowe

 
 

Dozwolone tagi HTML: <strong> <em> <a href="" title=""> <code> <pre lang=""> <blockquote cite="">

Komentarze są moderowane. Mile widziane wpisy wnoszące nowe, ciekawe informacje do omawianego tematu
lub sygnalizujące ewentualne błędy merytoryczne. Wszelkie przejawy spamu lub nieetycznego zachowania bedą
karane blokadą adresu IP/domeny.