kurs jQuery – SlideContent
Witam serdecznie w kolejnym tutorialu poświęconemu bibliotece jQuery, którą część z Was bardzo się ją zainteresowało – co mnie i zespół eduweb.pl bardzo cieszy.…
Witam serdecznie w kolejnym tutorialu poświęconemu bibliotece jQuery, którą część z Was bardzo się ją zainteresowało – co mnie i zespół eduweb.pl bardzo cieszy. Biblioteka jQuery staje się coraz bardziej popularna w sieci, ponieważ daje ona naprawdę spore możliwości, co postaram się pokazać w poniższym tutorialu.
W tym tutorialu dowiecie się jak zrobić taką oto efektowną stronę – aby zobaczyć kliknij tutaj. Jak zapewne zauważyliście strona nie jest zbytnio skomplikowana. Podstrony występują jako przesuwane div`y, co daje bardzo fajny efekt, dzięki któremu dodatkowo internauta odwiedzający naszą stronę ma duży komfort poruszania się po niej. Aby uzyskać taki efekt użyjemy pluginu scrollTo, który przesuwa maskę na żądany element – prawdopodobnie na razie nie wiecie za bardzo o co chodzi, ale spokojnie, wytłumaczę to jaśniej w dalszej części. Pluginu scrollTo użyjemy też w naszym prostym pluginie, który będzie dodawał dwa przyciski do przesuwania treści góra-dół (można nazwać to „mini-scrollbar”). Dobrze, zabierzmy się zatem za konkrety.
Etap 1: Zapoznanie się z szablonem HTML/CSS
Na tym etapie chciałbym abyście samodzielnie przeanalizowali poniższe linijki kodu HTML oraz CSS. Na pewno świetnie sobie z tym poradzicie, ponieważ struktura szablonu jest bardzo prosta i w miarę czytelna.
Kod HTML pomiędzy tagami <head>:
- jQuery.js – w tym pliku znajduje się biblioteka jQuery.
- nasz_plugin.js – skrypt naszego pluginu.
- scrollTo.js – plugin scrollTo, możecie go pobrać z stąd – http://plugins.jquery.com/project/ScrollTo .
- nasze-skrypty.js – tu znajdują się nasze skrypty jQuery.
Kod HTML pomiędzy tagami <body>:
Nasze referencje
Kod CSS:
html {
background:url(img/bg_html.jpg) top no-repeat #000;
}
/* RESET */
html, body, p, ul, li {
margin:0px; padding:0px; list-style:none;
}
/* CONTENT obejmujący wszystko */
#content_box {
width:756px;
margin:0 auto;
margin-top:230px;
padding-left:70px;
}
/* MENU */
.menu {
width:475px;
margin:0 auto;
}
.menu .strzalka {
background:url(img/strzalka.png) top left no-repeat;
width:110px;
height:104px;
height:63px;
}
.menu ul li {
background:url(img/button_n.png) top left no-repeat;
display:block;
width:117px;
height:40px;
margin-right:0px;
float:left;
}
.menu ul li a .on {
color:#999999;
}
.menu ul li a {
display:block;
width:100%;
height:100%;
margin-top:13px;
font-family:Book Antiqua, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:0.9em;
color:#dadada;
text-align:center;
text-decoration:none;
}
/* CONTENT */
.content {
width:756px;
height:327px;
margin-top:-2px;
background:url(img/content_bg.png) top left no-repeat;
float:left;
}
/* MASKA */
.content .maska {
width:475px;
height:220px;
margin-left:130px;
overflow:hidden;
position:relative;
}
/* PODSTRONY (div) */
.content .podstrony {
width:1000%;
overflow:hidden;
}
.content .podstrony .slide {
width:475px;
float:left;
}
/* TREŚCI */
.content .podstrony h1 {
color:#353535;
text-align:center;
font-size:1.0em;
font-family:Book Antiqua, Verdana, Geneva, Arial, Helvetica, sans-serif;
letter-spacing:0.2em;
margin:0 auto;
padding:20px 10px 10px;
}
.content .podstrony .tresc {
position:relative;
font-size:0.9em;
font-family:Book Antiqua, Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align:justify;
color:#484848;
line-height:15px;
padding:3px 15px 10px;
}
.content .podstrony .tresc a img {
text-decoration:none;
border:none;
}
.content .podstrony .tresc .button {
margin:0 auto;
padding:5px;
}
/* PRZYCISKI */
.tresc .next {
position: absolute;
top: 45px;
right: 3px;
width: 32px;
height: 22px;
background: url(img/dol.jpg) no-repeat;
}
.tresc .prev {
position: absolute;
bottom:45px;
right: 3px;
width: 32px;
height: 22px;
background: url(img/gora.jpg) no-repeat;
}
.tresc .suwak {
position: absolute;
top: 25px;
right: 3px;
width: 32px;
height: 170px;
background:#959595;
}Etap 2: Poznajemy plugin scrollTo.
Jak wcześniej wspominałem plugin scrollTo przesuwa element (pełniący role maski) na żądany element. W naszym przypadku maska działa podobnie jak maska w Photoshopie czy w innych programach graficznych, czyli pokazuje tylko te elementy, które chcemy aby były widoczne, a wszystkie inne ukrywa. Plugin scrollTo wykorzystuje tzw. „Kotwice” w HTML by odszukać dany element.
Wiele osób tworzących strony wbrew pozorom nie wie, co to są „kotwice” oraz jak działają, więc postaram się pokrótce wytłumaczyć czym jest „kotwica”.
„Kotwica” składa się z dwóch części – łącza i punktu. Punkt kotwicy jest to miejsce w treści strony, gdzie chcemy sie przenieść, czyli w naszym przypadku takim punktami będą atrybuty id (np. id=”#jakispunkt”). A łączami będą po prostu linki odwołujące się do danego punktu.
Kod JavaScript (nasze-skrypty.js):
$(document).ready(function (){
$('.menu a').click(function () {
$('.maska').scrollTo($(this).attr('href'), 800); // Przewijanie do danej podstrony po kliknięciu w element "a"
});
$('#suwaki').suwaki('prev', 'next', 'maska'); //nasz plugin suwaki - dodaje strzałki góra - dół do elementu o id="suwaki"
});Omówimy teraz pierwszy fragment powyższego skryptu, który odpowiada za przesuwanie maski na konkretny element:
- $(’.menu a’).click(function () {…} – po kliknięciu w element a który znajduje się w elemencie o klasie menu będzie wykonywana jakaś funkcja.
- $(‘.maska’) – za pomocą jQuery wyszukujemy element o klasie maska.
- . scrollTo($(this).attr(’href’), 800); – przesuwamy maskę na żądany element z szybkością 800 milisekund. Funkcja zawarta w środku za pomocą attr pobiera atrybut href klikanego elementu, czyli jaśniej – plugin scrollTo szuka elementu, który posiada kotwicę o takiej samej nazwie co obecnie klikany obiekt, czyli link o atrybucie href.
Natomiast druga część skryptu odpowiada za przewijanie treści w pionie, możemy zobaczyć przykład w zakładce „Realizacje”. Jak zauważyliście są tam dwie strzałki góra-dół, te strzałki odpowiadają właśnie za przewijanie treści, a właściwie przesuwanie maski w pionie, oczywiście za pomocą scrollTo. Aby uatrakcyjnić ten tutorial postanowiłem pokazać Wam jak tworzyć własny plugin jQuery, który będzie do żądanego elementu dodawał przyciski do przewijania treści w pionie zamiast klasycznego scrollbara. Proces powstawania takiego pluginu opiszę w następnym etapie.
Etap 3: Tworzenie pluginu jQuery.
Zanim zaczniemy omawiać skrypt naszego pluginu chciałbym abyście sami spróbowali go przeanalizować i jakoś rozgryźć. Na pewno pomogą Wam w tym moje krótkie komentarze w poniższym kodzie.
Kod JavaScript (nasz_plugin.js):
(function($){
$.fn.suwaki = function (prev, next, maska ){
//Dekleracja zmiennych globalnych:
var element = $(this);
var prev = prev;
var next = next;
var maska = maska;
var wysokosc_tresci = $('.'+prev).prev(element).height(); //Zmienna pobierająca wysokość elementu, w którym znajduje się div o class="prev"
var wysokosc_maski = $('.'+maska).height(); //Zmienna pobierająca wysokość maski głównej
$(element).append("
").css('padding-right', $('.'+prev).width()+7);
$(element).wrapInner("Omówmy powyższy kod szczegółowo:
- (function($) { //dalsze funkcje }) (jQuery); – podstawowy szablon pluginów. Zalecam używać takiego zapisu.Deklaracja naszej funkcji:
- $.fn.suwaki = function (prev, next, maska ){ … } – deklarujemy naszą funkcje (fn) o nazwie suwaki(), która dodatkowo przyjmuje zmienne tj. prev (strzałka w górę), next (strzałka w dół), maska (element pełniący funkcję maski).Dekleracja zmiennych globalnych:
- var element = $(this); – deklarujemy zmienną element, do której przypisujemy element, który będzie poddany działaniu naszego pluginu.
- Następne trzy linijki – deklaracja zmiennych prev, next oraz maska.
- var wysokosc_tresci = $(’.’+prev).prev(element).height(); – deklarujemy zmienną wysokość_tresci, do której przypisujemy wysokość naszego elementu w którym znajduje się element o klasie wartości zmiennej . Dlaczego dodajemy znak kropki przed odwołaniem się do zmiennej? – wyjaśnię później.
- var wysokosc_maski = $(’.’+maska).height(); – przypisujemy do zmiennej wysokość maski (element o klasie wartości zmiennej).
Zbogacanie elementu przyciskami: - $(element).append(„<div class='”+prev+”’></div><div class='”+next+”’></div>”).css(’padding-right’, $(’.’+prev).width()+7); – za pomocą funkcji append dodajemy do środka naszego elementu dwa div`y o klasach wartości naszych zmiennych prev i next. Natomiast za pomocą funkcji css ustawiamy margines wewnętrzny tych dwóch elementów. Margines ma wartość szerokości przycisku prev (tzn. w naszym wypadku przycisku w górę) i dodajemy jeszcze 7 px.
Tworzenie dodatkowej maski: - $(element).wrapInner(„<div class=’maska_wew’ />”); – oblewamy div`em obiekt, który znajduje się w środku elementu. Div będzie pełnił rolę maski wewnętrznej, którą będziemy przesuwać w dół i w górę.
- $(’.maska_wew’).css({ ’width’: $(element).width(), 'height’: $(’.’+maska).height()-50, 'overflow’: „hidden” }) – za pomocą funkcji css nadajemy masce wewnętrznej szerokość taką samą jak ma element, wysokość maski głównej minus 50px oraz przepełnienie ustawiamy na „hidden”
Zdarzenia po kliknięciu w strzałki:
- $(’.maska_wew’).scrollTo(’-=’+$(’.maska_wew’).height(), 900, {axis:”y”} ) – przesunięcie maski wewnętrznej w w górę (-=) za pomocą pluginu scrollTo o wysokość maski wewnętrznej z szybkością 900 milisekund. Opcją axis ustawiamy „płaszczyznę” po której ma się poruszać maska, w naszej sytuacji będzie się ona przesuwać w pionie, czyli „y”.
- $(’ .maska_wew’).scrollTo(’+=’+$(’.maska_wew’).height(), 900, {axis: „y”} ) – przesunięcie maski w dół (+=) za pomocą scrollTo o wysokość maski wewnętrznej z szybkością 900 milisekund. Zamiast wysokości maski możemy podać wartość w pikselach, czyli np. .scrollTo(‘+=60px’, 900, {axis:’’y’’} ) w takim przypadku maska zostanie przesunięta o 60 pikseli w dół.
I w taki sposób dobrnęliśmy do końca skryptu naszego plugina, a wykorzystujemy go w ten sposób:
Kod JavaScript:
$('#suwaki').suwaki('prev', 'next', 'maska');
- $(’#suwaki’).suwaki(’prev’, 'next’, 'maska’); – do elementu mającego id=”suwaki” wdrażamy naszą funkcję jQuery (nasz plugin), którą wzbogacamy w elementy, w naszym wypadku będą to elementy o klasach prev, next, maska, które wcześniej zostały zdefiniowane w arkuszu CSS. W jQuery obiekty mające klasy piszemy poprzedzając kropką, ale nasz plugin sam dodaje znak kropki dlatego przed zmiennymi dodawaliśmy znak kropki.
Mam nadzieje, że za bardzo Wam nie namieszałem tym tutorialem, ale przeciwnie, zainspirowałem do eksperymentowania z jQuery. Jeśli będziecie mieli jakiekolwiek pytania odnośnie tego tutoriala czy też poprzednich – piszcie, a postaram się jak najszybciej odpowiedzieć.