kurs jQuery – SlideContent

Dodane przez Łukasz Czerwiński w Darmowe, Webdesign, Wybrane artykuły, XHTML i CSS lut 16th, 2010 | 8 komentarzy

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>:

<div>
<div class="menu">
<ul>
	<li><a href="#firma">Oferta</a></li>
	<li><a href="#referencje">Referencje</a></li>
	<li><a href="#realizacje">Realizacje</a></li>
	<li><a href="#kontakt">Kontakt</a></li>
</ul>
</div>
<div class="content">
<div class="maska">
<div class="podstrony">
<div class="slide">
<h1>Oferta firmy</h1>
<div class="tresc">
				Aenean rutrum ligula neque, nec rutrum erat. Praesent a dignissim orci. Mauris ultrices, nisi id egestas vestibulum, libero nisl semper dui, vel vehicula est neque eu velit. Cras fermentum enim et ipsum pellentesque ultrices. Vivamus posuere justo vitae lacus gravida fringilla. Phasellus nunc enim, consectetur non sodales eget, consequat at purus. Etiam gravida, nulla quis suscipit aliquam, leo ante placerat felis, a mollis sem tellus at magna. Nunc vitae eros mauris, non cursus dui. Pellentesque vitae accumsan felis. Vestibulum id felis vel turpis dapibus rutrum.</div>
</div>
<div class="slide">
<h1>Nasze referencje</h1>
<div class="tresc">
			 	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet risus egestas arcu ullamcorper vitae ullamcorper eros porttitor. Proin eu.
					<a href="#"><img class="button" src="img/button_ref.jpg" alt="" /></a></div>
</div>
<div class="slide">
<h1>Nasze realizacje</h1>
<div class="tresc">
			 Maecenas accumsan hendrerit orci, id ullamcorper tortor fermentum vitae. Proin turpis felis, dapibus quis interdum et, tempus ac est. Donec adipiscing porttitor elit ut gravida. Curabitur convallis posuere nisi, non imperdiet libero dictum a. Nullam in turpis in felis consequat mollis. In condimentum sollicitudin sem eu sagittis. Sed id risus ac elit rhoncus pulvinar. Donec nunc diam, ultrices non molestie ac, condimentum a lacus. Cras vulputate, erat non eleifend accumsan, metus augue posuere nulla, cursus convallis neque massa eget turpis. Fusce congue elit nec diam ultricies sagittis. Vivamus commodo iaculis quam, in mattis dui auctor at. Aliquam ullamcorper dui at elit porttitor quis malesuada tortor tristique. Proin scelerisque dui ante, semper bibendum quam. Curabitur tincidunt velit eget mi vehicula eget gravida velit lacinia. Donec ultricies eleifend nulla, id dignissim enim porttitor nec. Cras fermentum commodo sagittis.
 
Integer a nulla at libero dignissim ultrices. Aliquam ut erat cursus nibh adipiscing adipiscing eget quis quam. Nullam posuere blandit urna quis convallis. Aenean venenatis tortor et tortor cursus ac gravida est gravida.
(...)</div>
</div>
<div class="slide">
<h1>Skontaktuj się z nami</h1>
<div class="tresc">
			 	text 4!</div>
</div>
</div>
</div>
</div>
</div>

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("
<div class="maska_wew">"); 
 
	$('.maska_wew').css({
		'width': $(element).width(),
		'height': $('.'+maska).height()-50,
		'overflow': "hidden"
	})
	//Obsługa kliknięć przycisków:
	$('.'+prev).click(function (){
		$('.maska_wew').scrollTo('-='+$('.maska_wew').height(), 900, {axis:"y"} ) //Przewijanie w górę
	});
	$('.'+next).click(function (){
		$(' .maska_wew').scrollTo('+='+$('.maska_wew').height(), 900, {axis: "y"} ) //Przewijanie w dół
	});   
 
}
})(jQuery); //koniec pluginu</div>

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ć.

Pobierz SlideContent na dysk

8 Odpowiedzi na “kurs jQuery – SlideContent”

Dariusz mówi:

16/02/2010 o 20:27

Naprawdę piękny efekt, bardzo ładne i dynamiczne, na pewno się kiedyś przyda :)

Odpowiedz
Grzesiekjjj mówi:

18/02/2010 o 11:07

Witam…Grzegorzu :) kiedy mozemy sie spodziewac nastepnych Tutków/kurs np. systemy CMS (joomla,wordpress,mambo) – przykalady kodowania blogu itp. i PHP podstawy

Odpowiedz
pimp mówi:

16/03/2010 o 14:17

niech ktos mi wytlumaczy czemu ma sluzyc w css #content_box jezeli czegos takiego nie ma w htmlu??
Pozdrawiam!

Odpowiedz
chiefer mówi:

07/05/2010 o 12:44

Faktycznie przydał by się (mi też ;) bardzo kurs “tuningowania” Joomla. Tworzenia bardziej zaawansowanych templatek, integrowania z elementami Flash i jQuery. Wiem że samemu można pokopać i się nauczyć, ale niestety… doba ma tylko 124h, a spać też czasem trzeba ;)

Odpowiedz
Pawel mówi:

25/07/2010 o 20:46

Witam. Mam takie pytanko: Czy efekt uzyskany na stronie http://envato.com/ można uzyskać kodem opisanym w tym tutorialu? Chodzi mi głównie o płynne przesuwanie strony do wybranego punktu w pionie, co mógłbym wykorzystać tutaj: http://centrumstronwww.pl/csw_reszta/ofirmie/index.htm. A może są to efekty podobne, ale jednak zupełnie różne technicznie? Z góry dzięki za wskazówki

Odpowiedz
Robert mówi:

28/07/2010 o 18:49

Witam
Adaptuje powyższego tutoriala do własnych potrzeb i zarazem staram się czegoś dowiedzieć o JQuery ale pojawił się pewien problem który jest dla mnie dziwny, napisał Pan funkcję dodającą ładnego scrolla ale problem polega na tym, że jak kopiuje do innego diva (zakładki) fragment ‘id=”suwaki”‘ żeby je podpiąć to są one widoczne tylko w jednej zakładce i w sumie nie wiem dlaczego tak się dzieje…

Odpowiedz
Pawę mówi:

28/07/2010 o 21:21

Malutki, ale bardzo nieładny problemik: wdrożyłem kod na moją stronę, wszystko ładnie chodzi i w tym miejscu pragnę podziękować Autorowi; jednak, gdy na dany link owszem wszystko ładnie się przesuwa w obrębie maski, ale przy tym cała strona zniża się do kotwicy – tak jak działa tradycyjna etykieta… Nie ukrywam, że w międzyczasie usunąłem z kodu fragmenty które uznałem za zbędne; czyżbym się zapędził? Jak usunąć problem? Z góry dziękuję Autorowi za wskazówki. Pozdrawiam!

Odpowiedz
Pawę mówi:

28/07/2010 o 21:22

…powyżej pominąłem słowo w zdaniu:

“jednak, gdy KLIKAM na dany link”

Odpowiedz

kurs jQuery – SlideContent

8 Odpowiedzi na “kurs jQuery – SlideContent”

Napisz odpowiedz

Strony

Warto zobaczyć

Najnowsze komentarze

Najnowsze wpisy

Tagi