nagradzam tutoriale

  • Zakładki do sidebara

    dodano 05.08.2008 / komentarzy: 15 / autor: palmiak

    Zakładki do sidebara

    Jako szczęśliwi posiadacze blogów, po pewnym czasie natrafiamy na problem rozrostu sidebara do ogromnych rozmiarów. Jednym ze sposobów jest skorzystać z dobrodziejstw javascript i porobić
    zakładki.

    pobierz pobierz

    xhtml i css

    Nasze zakładki zamkniemy w <div> o jakimś id (w naszym przypadku będzie to zakladki). W środku zaś umieścimy <h2><a href="#">tytuł</a></h2>, które będą nam służyć do przełączania między treściami oraz <div> w które będą te treści zawarte. W skrócie będzie to wyglądać tak

    <div id="sidebar">
    <div id="zakladki">
            <h2><a href="#about">O mnie</a></h2>
            <h2><a href="#archiwum">Archiwum</a></h2>
            <h2><a href="#links">Przyjaciele</a></h2>
           
            <div id="about">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius viverra mi. Maecenas mattis metus sit amet nibh. Aliquam aliquet, diam at semper tristique
            </div>
           
            <div id="archiwum">
                <ul>
                    <li><a href="#">Lipiec 2008</a></li>
                    <li><a href="#">Czerwiec 2008</a></li>
                    <li><a href="#">Maj 2008</a></li>
                    <li><a href="#">Kwiecień 2008</a></li>
                </ul>
            </div>
           
            <div id="links">
                <ul>
                    <li><a href="#">vivee.info</a></li>
                    <li><a href="#">tutoriale.vivee.info</a></li>
                    <li><a href="#">3d.vivee.info</a></li>
                </ul>
            </div>
        </div>
    </div>

    #sidebar umieściłem bardziej, żeby ułatwić sobie stylowania oraz do późniejszej demonstracji.

    Id divów oraz kotwice są tylko na wypadek, gdyby użytkownik wyłączył js.

    Czas to jeszcze ostylować:

    * {
            margin:0;
            padding:0;
    }

    body {
            background:#2B2B2B;
    }

    #sidebar {
            width:250px;
            padding:20px 0;
            margin:0 auto;
            font:.75em Verdana, Arial, Helvetica, sans-serif;
            line-height:1.5em;
            color:white;
    }

    #sidebar div div {
            list-style:none;
            background:#4E4E4E;
            padding:8px;
    }

    h2 {
            display:inline;
            font-size:1em;
            margin:0 4px 0 0;
    }

    h2 a {
            background:#4E4E4E;
            padding:5px;
            text-decoration:none;
            color:white;
    }

    h2 a:hover, a.active {
            background:#C20000;
    }

    #sidebar ul {
            list-style:none;
    }

    #sidebar ul a {
            color:#FFFFFF;
            text-decoration:none;
    }

    #sidebar ul a:hover {
            color:#E7E7E7;
    }

    Oczywiście styl możecie dowolnie modyfikować - nie ma on żadnego wpływu na działanie skryptu.

    jQuery

    Działanie skryptu, który to wszystko obsługuje jest bardzo proste. Najpierw nadajemy pierwszemu <h2> klasę active oraz ukrywamy wszystkie poza pierwszym <div>.

    Kiedy ktoś kliknie w jakieś <a>, które znajduje się w <h2> następuje seria czynności:

    • liczymy, który to jest w naszym divie <h2> i przypisujemy to zmiennej licznik
    • usuwamy klasę active z <h2>
    • <h2> w którym znajduje się wybrany przez nas link dodaje klasę active
    • ukrywa wszystkie widoczne <div> w naszym divie
    • pokazuje odpowiedniego diva - do tego potrzebna nam była zmienna licznik, bo div będzie ten sam w kolejności co <h2>

    Wyglądać to będzie tak:

    function tabs(id) {
             $("#"+id+" h2:first a").addClass("active");                           
                    $("#"+id+" div").not(":first").hide();
                   
                    $("#"+id+" h2 a").click(function() {
                            var licznik = $("#"+id+" h2 *").index(this);                                             
                                                                                     
                            $("#"+id+" h2 a").removeClass("active");
                            $(this).addClass("active");
                            $("#"+id+" div:visible").hide();
                           
                            $("#"+id+" div").eq(licznik).show();
                            return false;
                    });
     }

    Jest to wersja, która pozwala na zastosowanie kilku serii zakładek na jednej stronie, trzeba je tylko ubrać w diva o innym id.

    Pozostaje nam kwestia wywołania skryptu:

    $(document).ready(function(){
            tabs("zakladki");                      
      });

    W sumie wygląda to tak.

    Więcej zakładek

    Jak już wspominałem, żeby umieścić kilka serii zakładek wystarczy każdą z nich “ubrać” w diva o innym id.

    Jeszcze nasze zakładki znajdują się w divie #tab1 i #tab2 to wywołujemy to poprzez:

    $(document).ready(function(){
            tabs("tab1");
            tabs("tab2");          
      });

    Tutaj możecie zobaczyć jak to działa.

    Wersja finalna

    Ostatecznie powinno wyglądać to:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sidebar tabs</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="tab.js"></script>
    </head>

    <body>

    <div id="sidebar">

            <div id="zakladki">
            <h2><a href="#about">O mnie</a></h2>
            <h2><a href="#archiwum">Archiwum</a></h2>
            <h2><a href="#links">Przyjaciele</a></h2>
           
            <div id="about">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius viverra mi. Maecenas mattis metus sit amet nibh. Aliquam aliquet, diam at semper tristique
            </div>
           
            <div id="archiwum">
                <ul>
                    <li><a href="#">Lipiec 2008</a></li>
                    <li><a href="#">Czerwiec 2008</a></li>
                    <li><a href="#">Maj 2008</a></li>
                    <li><a href="#">Kwiecień 2008</a></li>
                </ul>
            </div>
           
            <div id="links">
                <ul>
                    <li><a href="#">vivee.info</a></li>
                    <li><a href="#">tutoriale.vivee.info</a></li>
                    <li><a href="#">3d.vivee.info</a></li>
                </ul>
            </div>
        </div>
       
       
    </div>

    </body>
    </html>

    jquery.js pobieramy oczywiście z serwisu jQuery.com.

    tabs.js powinno wyglądać tak:

    $(document).ready(function(){
            tabs("zakladki");       
      });

    function tabs(id) {
             $("#"+id+" h2:first a").addClass("active");                           
                    $("#"+id+" div").not(":first").hide();
                   
                    $("#"+id+" h2 a").click(function() {
                            var licznik = $("#"+id+" h2 *").index(this);                                             
                                                                                     
                            $("#"+id+" h2 a").removeClass("active");
                            $(this).addClass("active");
                            $("#"+id+" div:visible").hide();
                           
                            $("#"+id+" div").eq(licznik).show();
                            return false;
                    });
     }
     

    Podsumowanie

    Dzięki temu tutorialowi zakładki nie powinny stanowić dla Was problemu. Pozostaje teraz podpiąć to pod jakiegoś CMS’a.

    Warto przeszperać też starsze tutoriale na vivee i spróbować podpiąć jakieś dodatkowe efekty przenikania (może fade?) czy spróbować dodać jeszcze obsługę cookies.

    Komentarze / dodaj komentarz


    • autor: Arkadiusz
      dodano: 05.08.2008

      wielkie dzięki Palmiak bo zawsze mnie to zastanawiało jak to zrobić :)


    • autor: KamilGeneral
      dodano: 06.08.2008

      Szkoda, że do tego potrzebny jest javascript.
      Nie da się czasem samym css’em?


    • autor: agressiva
      dodano: 06.08.2008

      KamilGeneral - teoretycznie się da, ale jeżeli nie jesteśmy webmasterami, którzy leją na niektóre przeglądarki i chcemy żeby działalo to wszędzie to JS jest bardzo wskazane.


    • autor: palmiak
      dodano: 06.08.2008

      A co złego w odrobinie js? Skrypt jest tak skonstruowany, że nawet osoby z wyłączonym js nie ucierpią (wszystko zostanie rozwinięte).


    • autor: m1chu
      dodano: 07.08.2008

      Tut przydatny, bo konkretny ;] Nie mniej jednak jeśli już się używa frameworków w stylu jQuery to można by to chociażby zaanimować jakoś. W przeciwnym razie po co je wykorzystywać skoro można oprzeć się stricte na JSie? :>


    • autor: palmiak
      dodano: 07.08.2008

      m1chu, póki co mamy pierwszą część tutoriala rzeki. Wiadomo, że mozna to zanimować, obsługę ciastek dodać, zademonstrować podpięcie pod różne CMSy etc etc (czekam na pozostałem propozycje).


    • autor: Arkadiusz
      dodano: 07.08.2008

      Palmiak a mógłbyś pokazać jak podczepić do Wordpress’a


    • autor: agressiva
      dodano: 11.08.2008

      Arek - będzie taki tutek - już Maciek przy nim pracuje :)


    • autor: Arkadiusz
      dodano: 13.08.2008

      Agressive dziękuje za odpowiedź bo sam próbowałem ale popełniam jakiś byk :/


    • autor: agressiva
      dodano: 13.08.2008

      Niech zgadnę - problem z template tagami?
      Czy bardziej z działaniem samych zakładek? :)

      PS. Jak pamiętam, miałam otrzymac od Ciebie maila… :)


    • autor: Arkadiusz
      dodano: 13.08.2008

      Agressive pierwsze to że coś nie tak z stylami i działanm :/ a druga sprawa wolałbym porozmawiać :) na gg lub innym komunikatorze


    • autor: agressiva
      dodano: 14.08.2008

      Arek - wieczorem jestem tak padnięta, że nie mam pary na gg :)


    • autor: Arkadiusz
      dodano: 14.08.2008

      Agressive szkoda bo chętnie bym pogadał bo tak na Vivee to tylko zapycham system :) nie potrzebnymi komentarzami :)


    • autor: agressiva
      dodano: 14.08.2008

      To napisz do mnie na maila :) Jutro mnie nie będzie - najwyżej wieczorem, ale odpowiem na pewno :)

      Zresztą niedługo na vivee będzie nowy ficzer :P


    • autor: m1chu
      dodano: 02.10.2008

      Witam,

      Niektórzy mogą mieć problem z współdziałaniem kilku frameworków (np. jQuery + MooTools). Dzieję się tak np. w przypadku instalacji jakiejś wtyczki korzystającej z drugiej podanej przeze mnie biblioteki i użycia zakładek z tego kursu. Jedno z dwóch może wtedy nie działać prawidłowo (w przypadku zakładek nie zostaną one ukryte, ani nie będzie można pomiędzy nimi przechodzić). Problem nie dotyczy tylko i wyłącznie WordPress, ale także innych skryptów w których używa się kilku bibliotek JavaScript.

      Jeśli ktoś będzie miał takowy problem, zapraszam tutaj: http://m1chu.eu/wordpress/kolizje-wspoldzialania-bibliotek-javascript-na-podstawie-wtyczek-wordpress

      Pozdrawiam,
      m1chu

    Napisz komentarz