-
Rozwijany panel z odrobiną słodyczy
dodano 07.07.2008 / komentarzy: 13 / autor: palmiak
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.#headbędzie tym divem, którego będziemy ukrywać, a#sliderbę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;
}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#headna 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).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
showwartość z ciasteczka. Jeżelishowbędzie pusty lub będzie miał wartość 0 to#headzostanie ukryty.Następna poprawka dotyczy tego co się dzieje gdy klikamy w linka “strefa klienta”. Sprawdzamy najpierw czy
showró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.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.
Komentarze / dodaj komentarz
autor: Burger
dodano: 07.07.2008
tego szukałem ;D thx
autor: Siostra Nocy
dodano: 09.07.2008
Świetne, naprawdę ciekawy efekt.
autor: Rudik
dodano: 16.07.2008
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?
autor: agressiva
dodano: 16.07.2008
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
autor: Rudik
dodano: 18.07.2008
Dzięki za poradę
autor: MEmbrolabilia
dodano: 14.08.2008
Czaderskie
autor: ado
dodano: 14.08.2008
fajne, fajne…
a gdybym np. mial potrzebe, aby okienko wysuwalo sie nie w dol ale w lewo lub w prawo?
autor: palmiak
dodano: 14.08.2008
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.
autor: ado
dodano: 14.08.2008
thx, poszukam
autor: borewik
dodano: 12.11.2008
trochę mi nie działało gdy {..}(’show’);{..} z linijki trzeciej było w ‘ ‘. Zmienione na ” “. Chodziło
autor: palmiak
dodano: 12.11.2008
Ajaj… chyba WP cudzysłowy pojedyncze pozamieniał. Pod tym względem na źródło najbezpieczniej patrzyć w demo > pokaż źródło.
autor: Mati
dodano: 19.11.2008
Generalnie podsumowując, to świetna rzecz ten efekt, powinniście przyznać.. ^^’
autor: agressiva
dodano: 19.11.2008
przyznajemy
Napisz komentarz