Artykuły:

  • data publikacji: 07.07.2008

    Rozwijany panel z odrobiną słodyczy

    kategoria: Skrypty client-side autor: palmiak

    Rozwijany panel z odrobiną słodyczy

    Wyobraźmy sobie, ze chcemy zrobić stronę dla jakiegoś hostingu. I chcemy na stronie umieścić gdzieś logowanie dla osób już zarejestrowanych. W tym tutorialu pokażę Wam jedną z możliwości jak zrobić fajną "skrytkę" na coś takiego.

    xhtml

    Naszą zabawę zaczniemy od przygotowania sobie odpowiednich divów. Wersja najbardziej prymitywna będzie wyglądać tak:

    <div id="head">
            <div class="container">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rutrum, dui in tristique ullamcorper, nisl tellus sagittis turpis, ac pellentesque mi nisl at arcu. Cras rutrum. Nulla venenatis posuere orci.
           
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rutrum, dui in tristique ullamcorper, nisl tellus sagittis turpis, ac pellentesque mi nisl at arcu. Cras rutrum. Nulla venenatis posuere orci.
           
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rutrum, dui in tristique ullamcorper, nisl tellus sagittis turpis, ac pellentesque mi nisl at arcu. Cras rutrum. Nulla venenatis posuere orci.
        </div>
    </div>

    <div id="slider">
            <div id="line"></div>
       
        <div class="container">
            <div id="button">
                    <a href="#">Strefa klienta</a>
            </div>
        </div>
    </div>

    Widzimy dwa główne divy: #head i #slider. #head będzie tym divem, którego będziemy ukrywać, a #slider będzie tą częścią która będzie zawsze widoczna oraz w której znajduje się link do pokazywania/ukrywania #heada.

    Upiększmy to, czyli css

    W naszym przypadku style wygląda następująco:

    * {
            margin:0;
            padding:0;
    }

    .container {
            width:960px;
            margin:0 auto;
    }

    #head {
            background:#000 url(obrazki/gora.jpg) repeat-x bottom;
            color:white;
            }
           
    #slider {
            height:47px;
            background: url(obrazki/bottom.png) repeat-x;
    }

    #button {
            padding:10px 30px 0 0;
            }
           
    #button a {
            text-decoration:none;
            display:block;
            background:#3E3A37;
            padding:10px;
            color:white;
            float:right;
            }
           
    #button a:hover {
            background:#FF0066;
            }

    Zobacz demo.

    Odrobina magii, czyli jQuery

    Niby wszystko wygląda w porządku, tylko miała to być "skrytka", a póki co nie jest. Za pomocą jQuery sprawimy, że div#head na początku będzie ukryty, a pokaże się dopiero po kliknięciu w link "strefa klienta".

     $(document).ready(function(){                                                                                 
            $("#head").hide();
             
             $("#button a").click(function() {
                    $("#head").slideToggle("slow");
                    return false;
            });
      });

    Skrypt najpierw ukrywa #head, a następnie po kliknięciu w linka go pokazuje/ukrywa (w zależności od obecnego stanu).

    Zobacz demo.

    Drobny, ciasteczkowy szlif

    Wszystko fajnie działa, ale ma jedną denerującą właściwość - po przeładowaniu strony zawsze ukrywany jest #head. Fajnie by było, gdyby skrypt pamiętał jaki był jego ostatni stan.

    W tym momencie z pomocą przychodzą nam ciasteczka i wtyczka jQuery cookies. Żeby zaczęła nam działać wystarczy ją pobrać i w <head> dodać <script type="text/javascript" src="jquery.cookie.js"></script>.

    Następnie musimy poprawić nasz skrypt:

     $(document).ready(function(){
                                                           
            var show = $.cookie('show');
           
            if (show == null || show == 0 ) {                                              
                    $("#head").hide();
            }
             
             $("#button a").click(function() {
                    $("#head").slideToggle("slow");
                                    if (show == 1) {
                                            show = 0;
                                    } else {
                                            show = 1;      
                                    }
                                   
                                    $.cookie('show', show, { expires: 7 });
                                    return false;
                                   
            });
      });

     

    Najpierw przypisujemy do zmiennej show wartość z ciasteczka. Jeżeli show będzie pusty lub będzie miał wartość 0 to #head zostanie ukryty.

    Następna poprawka dotyczy tego co się dzieje gdy klikamy w linka "strefa klienta". Sprawdzamy najpierw czy show równa się 1, jeśli tak to przypisujemu wartość 0, a gdy równa się 0 to przypisujemy mu 1. 0 oczywiście oznacza, że panel jest ukryty, 1, ze otwarty.

    Zobacz ostateczny efekt.

    Podsumowanie

    Dzięki temu tutorialowi mieliśmy okazję po raz kolejny w praktyce użyć Slide (o których już pisałem) oraz zobaczyliśmy jak działają ciasteczka w jQuery. O ile był to przykład dość banalny, o tyle można go bardzo rozbudować. W końcu tutoriale nie są po to, żeby dawać w pełni gotowe rozwiązania, tylko żeby pokazywać pewne techniki, a już Wasza w tym głowa jak ich użyjecie.

    Udostępnij ten artykuł:
    • Print
    • Digg
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks
    • Gwar
    • RSS
    • Technorati
    • Twitter
    • Wykop

  • Podobne wpisy - Vivee blog o webmasteringu, grafice i fotografii

    Zobacz podobne wpisy:

      None Found

  • 22 Responses to “Rozwijany panel z odrobiną słodyczy”

    1. Burger pisze:
      7 07 2008 o 23:01

      tego szukałem ;D thx

      Odpowiedz
    2. Siostra Nocy pisze:
      9 07 2008 o 15:21

      Świetne, naprawdę ciekawy efekt.

      Odpowiedz
    3. Rudik pisze:
      16 07 2008 o 12:40

      Tutorial świetny, tak samo efekt. Trapi mnie jednak, czy można zrobić, aby dodać więcej tych linków (chodzi mi o np. Strefa klienta), tylko tak, aby każdy z nich prowadził do innego tekstu?

      Odpowiedz
    4. agressiva pisze:
      16 07 2008 o 14:03

      Rudik – jasne, że można tak zrobic. Wg mnie musiałbys stworzyc kilka tych “buttonów” o innych “nazwach” (czyt. klasach lub id), to samo uczynic z boxami które by wyjezdzały z inną zawartością (tutaj tez nadac im inne nazwy). I w jQuery przypisac do danej nazwy buttona, daną nazwę boxa…
      Jeżeli się mylę to niech Palmiak mnie skoryguje :)

      Odpowiedz
    5. Rudik pisze:
      18 07 2008 o 00:00

      Dzięki za poradę :)

      Odpowiedz
    6. MEmbrolabilia pisze:
      14 08 2008 o 08:24

      Czaderskie :)

      Odpowiedz
    7. ado pisze:
      14 08 2008 o 12:49

      fajne, fajne…
      a gdybym np. mial potrzebe, aby okienko wysuwalo sie nie w dol ale w lewo lub w prawo?

      Odpowiedz
    8. palmiak pisze:
      14 08 2008 o 13:46

      Też da się zrobić. Tak z głowy to albo mozna się pobawić funkcją animate, albo skorzystać z jquery UI i tam jest gotowiec do Slide’a we wszystkie strony.

      Odpowiedz
    9. ado pisze:
      14 08 2008 o 13:48

      thx, poszukam

      Odpowiedz
    10. borewik pisze:
      12 11 2008 o 22:06

      trochę mi nie działało gdy {..}(’show’);{..} z linijki trzeciej było w ‘ ‘. Zmienione na ” “. Chodziło :)

      Odpowiedz
    11. palmiak pisze:
      12 11 2008 o 23:46

      Ajaj… chyba WP cudzysłowy pojedyncze pozamieniał. Pod tym względem na źródło najbezpieczniej patrzyć w demo > pokaż źródło.

      Odpowiedz
    12. Mati pisze:
      19 11 2008 o 02:06

      Generalnie podsumowując, to świetna rzecz ten efekt, powinniście przyznać.. ^^’

      Odpowiedz
    13. agressiva pisze:
      19 11 2008 o 16:56

      przyznajemy :)

      Odpowiedz
    14. owsian pisze:
      4 12 2008 o 20:50

      przydatny skrypt, na pewno się przyda :)

      Odpowiedz
    15. krzyżak94 pisze:
      17 01 2009 o 00:05

      Można zamiast treści dodać skrypt php, który będzie wyświetlał panel do komentowania?
      kod:

      Odpowiedz
    16. anoniM pisze:
      17 01 2009 o 12:33

      A ja mam z tym pewien problem…. Na dysku twardym działa a jak wystawie na serwer to już nie…. Co mam zrobić?

      Odpowiedz
    17. agressiva pisze:
      17 01 2009 o 22:51

      krzyżak94 – tak możesz to co będzie w panelu zależy tylko od ciebie. I powinno działać to oki, Jak coś to pisz.

      Odpowiedz
    18. mattii pisze:
      27 01 2009 o 00:36

      czy można zrobić, aby dodać więcej tych linków (chodzi mi o np. Strefa klienta), tylko tak, aby każdy z nich prowadził do innego tekstu –

      zrobilem sobie tak;]

      tylko jesli otwieram po kolei to te wczesniej otwarte zostaja – jak zrobic zeby nowo otwierany zamykał juz otwarty ??

      Odpowiedz
    19. JaRo pisze:
      5 03 2009 o 14:38

      2 pytania:

      1. Co trzeba dopisać w ‘slide2.js’, żeby po kliknięciu na mój button o nazwie ‘Rozwiń’ pokazywała się nazwa ‘Zwiń’.

      2. Co należy zrobić, żeby po kliknięciu na Nasz button strona leciała w dół razem z divem.

      Całą funkcję dałem na sam dół strony i po kliknięciu na button div się otwiera, ale strona stoi w miejscu i tworzy mi się pasek przewijania – sam muszę ją przewinąć niżej.

      Pozdrawiam :)

      Odpowiedz
    20. agressiva pisze:
      5 03 2009 o 21:50

      na pierwsze pytanie mogę spokojnie odpowiedzieć,
      jest to zastosowane w tym tutorialu http://vivee.info/2007/09/17/pokazywanie-i-ukrywanie-kodu/ (zastępowanie słów)

      Odpowiedz
    21. Piotrek pisze:
      20 08 2010 o 21:22

      Pomóżcie ! Jak zrobić, aby wysuwało się z lewej strony?

      Odpowiedz

    Leave a Reply

Komentarze

Kategorie

Top 10

  • CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
  • Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
  • Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
  • Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
  • Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
  • Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
  • Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
  • Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
  • Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
  • Skrypty client-side
  • Skrypty server-side
  • Tutoriale
  • Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
  • Wieczór z Open Source
  • Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
  • Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
  • XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej

Polecane strony

  • No bookmarks avaliable.
copyright vivee.info      |       all rights reserved      |       design by water design