jQuery – to łatwe! #5: Zakładki

Zakładki w jQuery

Wiele portali zawiera sekcje, które pokazywane są za pomocą zakładek. Tego typu rozwiązania widziałeś pewnie nie raz. Sprawdza się to w miejscach, gdzie istnieje potrzeba zamieszczenia wielu treści, choć nie tylko.

Jest kilka sposobów na zrobienie dobrych zakładek, w tym wyróżnić można dwie grupy rozwiązań: oparte na ładowaniu treści do boxów poprzez AJAX lub ładowaniu wszystkich boxów podczas generowania strony i odpowiednim modyfikowaniu ich display’em w zależności, co chcemy oglądać. Omówmy każdą z opcji, poczynając od statycznego serwowania treści.

Uwaga! W poprzednich przykładach używaliśmy jQuery 1.1! Co prawda najnowsza wersja frameworka nie różni się od niej znacznie, jednak gdzieniegdzie przepisano kod, usunięto parę niepotrzebnych fragmentów, czy też dodano nowe funkcje, co samo w sobie stanowi powód do ściągnięcia nowej wersji.

Użyjemy oczywiście biblioteki jQuery w wersji 1.2.3.

We wszystkich przykładach będziemy modyfikować poniższy szablon. Warto zwrócić uwagę na strukturę dokumentu – zakładki realizujemy dzięki liście nieuporządkowanej, w poszczególnych elementach umieszczając linki. Dzięki temu, w razie wyłączonego JavaScriptu, użytkownik przejdzie do strony z zawartością (umownie) zakładki. Tak zwane accessibility i nieinwazyjny kod JS.

<!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" lang="en">
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<!-- dodanie jQuery do dokumentu -->

	<script type="text/javascript" src="jQuery.js"></script>

	<!-- Nasz kod Javascript: -->

	<style type="text/css">
		* { margin: 0; padding: 0; }
		body { font: normal 12px Tahoma; color: #000; }
		#container { width: 456px; margin: auto; }
		ul
		{
			width: 100%;
			border-bottom: 5px solid #376b8a;
			margin-top: 10px;
			overflow: hidden;
		}
		ul li
		{
			background: url('gfx/butt2.jpg') no-repeat;
			width: 76px;
			height: 22px;
			float: left;
			display: block;
			padding-top: 5px;
			text-align: center;
		}
		ul li a { text-decoration: none; color: #000; }
		ul li.active { background: url('gfx/butt1.jpg') no-repeat; 	color: #fff; }
		ul li.active a { color: #fff; }
		#bar1, #bar2, #bar3 { color: #fff; padding: 10px; background: #396B8C;  display: none;}
		#bar1 { display: block; }
	</style>
</head>
<body>
	<div id="container">
		<ul id="bookmarks"><li class="active"><a href="#">Bar #1</a></li><li><a href="#">Bar #2</a></li><li><a href="#">Bar #3</a></li></ul>
		<div id="content">
			<div id="bar1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
			<div id="bar2"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
			<div id="bar3"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
		</div>
	</div>
</body>
</html>

Sposób pierwszy

Generalnie rzecz biorąc, całość jest oparta na zwykłej analogii. Otóż – jeśli klikniemy w pierwszą zakładkę, skrypt sprawdzi, która to z kolei zakładka (czyli który link <a>) w znaczniku <ul>. Kiedy będziemy dysponowali tą liczbą, spróbujemy dostać się do <div>, który będzie tym samym z kolei elementem wewnątrz #content. W skrócie – klikamy trzecią zakładkę, pokazuje się trzeci div. Do dzieła!

Zaczynamy jak zwykle od wychwycenia, kiedy drzewo DOM będzie załadowane, tym samym będąc przygotowane na zastrzyk naszego kodu JS:

$().ready(function()
{

Następnie, czas na dodanie zdarzenia onclick dla każdego linku wewnątrz znacznika li:

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{

Aby uznać zakładkę za aktywną, musi ona posiadać klasę active, co wynika z kodu CSS na potrzeby przykładu. Wcześniej jednak, trzeba usunąć tę klasę z wszystkich innych elementów <li>, aby uniknąć dwóch aktywnych zakładek jednocześnie.

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks li.active").removeClass("active");
		$(this).parent().addClass("active");

Przy pomocy odpowiedniego selektora dostaliśmy się do wszystkich elementów listy z klasą active, następnie, dzięki removeClass usunęliśmy ją. Potem, odnosząc się do rodzica klikniętego elementu <a>, dodaliśmy doń klasę active. Innymi słowy, klikając w link, pobieramy element <li>, do którego należy odnośnik, aplikując stosowną klasę.

Następnie pora na pobranie do zmiennej element_index liczby, oznaczającej, którym z kolei wewnątrz #bookmarks jest kliknięty link.

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

		var element_index = $("#bookmarks a").index(this);

Sprawę załatwiła funkcja index(). Otóż pobieramy tutaj wszystkie linki mieszczące się w #bookmarks. Następnie, dzięki funkcji index sprawdzamy, którym z kolei wśród pobranych linków w drzewie DOM jest ten, który kliknęliśmy (this). Tak więc funkcja ta działa w stosunku do pobranych elementów i sprawdza, którym wśród nich jest element podany jako jej argument. Warto zaznaczyć, że kolejność liczona jest naturalnie od zera. Pierwszy element będzie więc nim oznaczony.

Zbliżamy się do końca skryptu. Czas teraz na pobranie widocznych divów wśród #content, ukrycie ich i pokazanie właściwego, o indeksie takim, jaki przechowujemy w zmiennej element_index. Odnieść się do elementu o stosownym indeksie pozwala funkcja eq(numer indeksu). 

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

		var element_index = $("#bookmarks a").index(this);

		$("#content div:visible").hide();
		$("#content div").eq(element_index).show();

		return false;
	});
});

Na końcu przydaje się return false;, by zapobiec przechodzeniu do strony podanej w klikniętym linku. Całość prezentuje się znakomicie:

<!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" lang="en">
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<!-- dodanie jQuery do dokumentu -->

	<script type="text/javascript" src="js/jQuery.js"></script>

	<!-- Nasz kod Javascript: -->
	<script type="text/javascript">

		$().ready(function()
		{
			$("ul#bookmarks li a").click(function()
			{
				$("ul#bookmarks .active").removeClass("active");
				$(this).parent().addClass("active");

				var element_index = $("#bookmarks a").index(this);

				$("#content div:visible").hide();
				$("#content div").eq(element_index).show();

				return false;
			});
		});
	</script>

	<style type="text/css">
		* { margin: 0; padding: 0; }
		body { font: normal 12px Tahoma; color: #000; }
		#container { width: 228px; margin: auto; }
		ul
		{
			width: 100%;
			border-bottom: 5px solid #376b8a;
			margin-top: 10px;
			overflow: hidden;
		}
		ul li
		{
			background: url('gfx/butt2.jpg') no-repeat;
			width: 76px;
			height: 22px;
			float: left;
			display: block;
			padding-top: 5px;
			text-align: center;
		}
		ul li a { text-decoration: none; color: #000; }
		ul li.active { background: url('gfx/butt1.jpg') no-repeat; 	color: #fff; }
		ul li.active a { color: #fff; }
		#bar1, #bar2, #bar3 { color: #fff; padding: 10px; background: #396B8C;  display: none;}
		#bar1 { display: block; }
	</style>
</head>
<body>
	<div id="container">
		<ul id="bookmarks"><li class="active"><a href="#">Bar #1</a></li><li><a href="#">Bar #2</a></li><li><a href="#">Bar #3</a></li></ul>
		<div id="content">
			<div id="bar1"><p>aLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
			<div id="bar2"><p>bLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
			<div id="bar3"><p>cLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
		</div>
	</div>
</body>
</html>

Sposób drugi

Kolejnym sposobem na zakładki jest metoda bazująca na klasach elementów <a> i identyfikatorach boxów z treścią. Tutaj z kolei klasa zakładki odpowiada identyfikatorowi diva. Klikając zakładkę class=”box1 pokazujemy box o id=”box1″. Zaktualizujmy więc nasz szablon na potrzeby przykładu:

<div id="container">
	<ul id="bookmarks"><li class="active"><a href="#" class="bar1">Bar #1</a></li><li><a href="#" class="bar2">Bar #2</a></li><li><a href="#" class="bar3">Bar #3</a></li></ul>
	<div id="content">
		<div id="bar1"><p>aLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
		<div id="bar2"><p>bLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
		<div id="bar3"><p>cLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
	</div>
</div>

Pora na jQuery, poczynając od tego, co mamy:

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

Pobierzmy teraz klasę klikniętego linku:

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

		var classname = $(this).attr("class");

Nie pozostaje nam nic innego, jak podać otrzymaną klasę do selektora, który znajdzie nam odpowiedniego diva, o odpowiednim #id.

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

		var classname = $(this).attr("class");

		$("#content div:visible").hide();
		$("#content div#"+classname).show();

		return false;
	});
});

Oczywiście chodzi o tę linijkę:

$("#content div#"+classname).show("");

Wszystko gra.

Jeśli komuś pasuje rozwiązanie, wykorzystujące moment najechania myszką na zakładkę – nic łatwiejszego, podstawiamy zamiast click, zdarzenie mouseover:

$().ready(function()
{
	$("ul#bookmarks li a").mouseover(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

		var classname = $(this).attr("class");

		$("#content div:visible").hide();
		$("#content div#"+classname).show();

	});
});

Sposób trzeci – AJAX

AJAX w skrócie
AJAX to pewien obiekt, a upraszczając bardziej – funkcja, wbudowana w JavaScript przeglądarki, która pozwala w naszych skryptach pobrać zawartość z danego adresu (a więc strone HTML, dokument tekstowy, plik XML) nie odświeżając przy tym strony, na której korzystamy ze skryptów. AJAX działa także w drugą stronę, umożliwiając wysyłanie danych do jakieś strony (używając metody POST).

Ten sposób opiera się natomiast na wykorzystaniu AJAXa. Ma on swoje wady i zalety – po kliknięciu zakładki, JavaScript pobiera dla niej za każdym razem stosowną treść, co daje jedno wywołanie strony na kliknięcie. Moim zdaniem, jeśli dane nie dezaktualizują się często, lepiej ładować wszystkie boxy przy zwykłym generowaniu się strony po stronie serwera. Zalety to przede wszystkim jeden box w dokumencie HTML, a nie jak poprzednio – trzy.

Przyjrzyjmy się więc dokumentowi HTML dla sposobu z AJAXem:

<div id="container">
	<ul id="bookmarks"><li class="active"><a href="#" class="bar1">Bar #1</a></li><li><a href="#" class="bar2">Bar #2</a></li><li><a href="#" class="bar3">Bar #3</a></li></ul>
	<div id="content">
		<div id="bar1"><p>aLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
		</div>
</div>>

Jak już wiemy, AJAX potrafi załadować tekst lub HTML z jednej strony do drugiej. Aby więc coś znalazło się w naszych boxach, stwórzmy dokumenty HTML, z których pobierzemy stosowną treść: bar1.html, bar2.html i bar3.html. Równie dobrze, jeśli generowalibyśmy ją dynamicznie, można by pobierać dane z adresu strony w PHP, Ruby etc. Na przykład: index.php?action=ajax&what=bar1 czy też /ajax/get/bar1. To, z jakiej strony będziemy czerpać kontent, to wyłącznie nasza sprawa, zależna od naszych potrzeb.

I tak, np. bar1.html wygląda następująco:

<p>aLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p>

Pora teraz na skrypty. jQuery dysponuje świetną (szczególnie od wersji 1.2) funkcją, dzięki której możemy załadować dany dokument HTML, wybrać przy okazji te elementy, które nas interesują, dzięki użyciu selektorów, by na końcu dodać otrzymaną treść do jakiegokolwiek elementu DOM. Mowa o funkcji load(). Użyjemy jej!

Nim do tego dojdzie, wyjaśnijmy, jak będzie działał skrypt – na początku, co już zresztą zrobiliśmy, wychwycimy kliknięcie w zakładkę, uczynimy ją aktywną i tak dalej. Potem pobierzemy, dzięki funkcji load, stronę HTML o takiej nazwie, jaką nosi atrybut class zakładki. Następnie, uzupełnimy nasz jedyny box uzyskaną treścią. Jeśli więc klikniemy zakładkę o class=”bar2″, JS załaduje plik bar2.html. To prawie tak, jakbyśmy w pasek adresu przeglądarki wpisali domena.pl/bar2.html, skopiowali treść, włączyli edytor HTML i wkleili wszystko do diva.

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

		var classname = $(this).attr("class");

		$("#bar1").load(classname+".html p");

		return false;
	});
});

W zasadzie sprawa zaczęła się i skończyła na jednej linijce: 

$("#bar1").load(classname+".html p");

Reszta kodu pozostaje taka sama. Do elementu #bar1 ładowana jest treść pliku HTML o nazwie klasy linku, który kliknęliśmy (zmienna classname). Równie dobrze moglibyśmy tutaj załadować całą stronę Wirtualnej Polski:

$("#bar1").load("http://wp.pl");

Całość prezentuje się tak:

<!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" lang="en">
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<!-- dodanie jQuery do dokumentu -->

	<script type="text/javascript" src="js/jQuery.js"></script>

	<!-- Nasz kod Javascript: -->
	<script type="text/javascript">

		$().ready(function()
		{
			$("ul#bookmarks li a").click(function()
			{
				$("ul#bookmarks .active").removeClass("active");
				$(this).parent().addClass("active");

				var classname = $(this).attr("class");

				$("#bar1").load(classname+".html p");

				return false;
			});
		});
	</script>

	<style type="text/css">
		* { margin: 0; padding: 0; }
		body { font: normal 12px Tahoma; color: #000; }
		#container { width: 228px; margin: auto; }
		ul
		{
			width: 100%;
			border-bottom: 5px solid #376b8a;
			margin-top: 10px;
			overflow: hidden;
		}
		ul li
		{
			background: url('gfx/butt2.jpg') no-repeat;
			width: 76px;
			height: 22px;
			float: left;
			display: block;
			padding-top: 5px;
			text-align: center;
		}
		ul li a { text-decoration: none; color: #000; }
		ul li.active { background: url('gfx/butt1.jpg') no-repeat; 	color: #fff; }
		ul li.active a { color: #fff; }
		#bar1, #bar2, #bar3 { color: #fff; padding: 10px; background: #396B8C;  display: none;}
		#bar1 { display: block; }
	</style>
</head>
<body>
	<div id="container">
		<ul id="bookmarks"><li class="active"><a href="#" class="bar1">Bar #1</a></li><li><a href="#" class="bar2">Bar #2</a></li><li><a href="#" class="bar3">Bar #3</a></li></ul>
		<div id="content">
			<div id="bar1"><p>aLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
		</div>
	</div>
</body>
</html>

Oczywiście proces ładowania zakładek można wzbogacić stosownym komunikatem, czy efektami animacyjnymi – o tym już w kolejnych artykułach.

Komentarze

1

Warto również wpsomnieć, że istnieją gotowe bilbioteki (np ui.tabs), umożliwiające w równie prosty sposób uruchomić własne zakładki :)

pryngiel
2

Tutaj jest artykuł z podobnymi przykładami z jquary.

tommek
3

Witam!

Ja dorzucę swoje 3 grosze do wpisu.

Tak zwane accessibility i nieinwazyjny kod JS.

Jak już mówimy o nieinwazyjnym JS, to po pierwsze dorzuć do atrybutu href linków odesłanie do odpowiednich boksów (href=”#bar1″, etc) – wtedy istnienie tych linków będzie miało sens (bo póki co takowego nie widać), a poza tym zabieg ten uprości kod JS, o czym dalej. Dodatkowo zwiększy się usability – bez JSa kliknięcie w link odeśle do taba. Dodatkowo – widzę w kodzie objawy divitis :>
Po drugie – ja w ogóle wykorzystałbym tutaj listę definicji – gdzie dt to nazwa „taba”, zaś dd to jego zawartość – wtedy można w pełni mówić o nieinwazyjnym JS ;)

2. Wydajność.
"ul#bookmarks li a"
Hmmm… to chyba nawet u Ciebie czytałem, żeby być precyzyjnym, ale minimalistycznym. Teraz jQuery szuka przecież wszystkich elementów UL, wewnątrz nich elementu od ID „bookmarks”, później wszystkich LI, a na końcu linków.
A przecież to samo osiągniemy pisząc:
"#bookmarks a"
O ile prościej? Dodatkowo jak zmienimy kod (np.: na listę uporządkowaną, czy paragrafy) nie trzeba JSa ruszać.

Wcześniej jednak, trzeba usunąć tę klasę z wszystkich innych elementów

A nie można zapamiętać referencji do aktualnego pola w jakiejś globalnej zmiennej?

$("#content div:visible").hide();
$("#content div#"+classname).show();
Mając zapisane ID elementu w atrybucie href linków, można napisać po prostu:
$($prev.href()).hide();
$($(this).href()).show();

A nawet jeśli nie mamy, to można znów skrócić zapis:
$("#"+classname).show();
Przecież w całym dokumencie będzie jeden element z taki ID – prawca?

Na chwilę obecną tyle ode mnie.

Pozdrawiam

MiB
4

Witam MiB, dzieki za rzeczowy komentarz, pozwol ze skomentuje niektore jego czesci, by uscislic pewne sprawy:

Jak już mówimy o nieinwazyjnym JS, to po pierwsze dorzuć do atrybutu href linków odesłanie do odpowiednich boksów (href=”#bar1″, etc)

Zaznaczylem, ze wykorzystujemy tutaj linki i nic poza tym. Ufam, ze Czytelnik wie o co chodzi i wstawi sobie, co mu sie podoba. Nie jest to kurs poprawnego kodowania i accessibility, wiec tylko nakresilem problem i zasygnalizowalem ze tu i tu da sie to i to zrobic. Sam wstawilem same #, bo tak naprawde tresc linkow jest tutaj malo istotna, liczy sie JS. No wlasnie.

2. Wydajność.

Staram sie w kursie uzywac przejrzystych selektorow wzorowanych z CSSa, aby rowniez dla koderow CSS kurs byl w miare zrozumialy. Zauwaz, ze na pelnych selektorach opieral sie kod z pierwszych odcinkow kursu, wiec nie zmieniam tego, zreszta, jest to malo objetosciowy przyklad, by przesadnie dbac o wydajnosc. Co do #bookmarks amasz calkowita racje, aczkolwiek dla wlasnie przejrzystosci rozwiazan jest, jak jest. Nie kazdy jest jeszcze zaawansowanym koderem jQuery…

Twoje pomysly są oczywiscie bardzo rozsadne i madrze zoptymalizowane – gdyby cykl brzmial jQuery w jednej linijce zapewne tak bym zakladki rozwiazal. Kurs ma jednak pokazac potencjal jQuery, jego funkcje, uzycie pewnych selektorow ->:visible, wiec czesto ide pod gorke, raz, by pokazac potencjal frameworka, dwa, by przyklady nie byly zbytnio skomplikowane i wygladaly logicznie, i lopatologicznie.

Nie mniej, uswiadomiles mi, ze dobra sprawa byloby ukazanie problemu wg Twojego sposobu, co uczynie w kolejnym artykule. Taka optymalizacja…

Pozdrawiam

5

Cieszę się, że kurs powrócił. Dzięki poprzednim częścią zainteresowałem się jQuery :) Mam nadzieję, że doczekam się części poświęconej Ajax. BTW redesign udany, ale $("#side-left")mogłoby być troszkę szersze :)

6

Słusznie prawisz, po opublikowaniu dłuższego artykulu dalo sie zauwazyc „scisniecie” tresci. Teraz troche to poszerzylem (troche – 70px) – powinno byc lepiej.

7

Jak bym jeszcze ukradł pare px z sidebara. Za dużo ma ;)

8

Witam!

Przyznaję się bez bicia, że o ile kurs JS śledziłem, to jQuery dotychczas omijałem (omawiał podstawy, a te znałem ;) ). Zatem nie mogłem nijak odnieść się do poprzednich części i wypracowanego swoistego „standardu pisania przykładów” – wybacz.

Generalnie były to moje luźne uwagi do przykładu. Rozumiem intencje, ale akurat ja osobiście preferuję naukę nie tyle używania czegokolwiek, ale robienia tego od razu z głową – większa szansa, że wtedy czytelnicy wykształcą w sobie dobre nawyki (to dotyczy wszelkich kursów – JS, CSS czy gotowania ;) ).

Co do redesignu – uważam, że w ogóle cały sidebar spokojnie może być ułożony poziomo, co dramatycznie zwiększy powierzchnią na wpisy :-)
Może również pokusisz się o możliwość zwijania bloków kodu (i pokazywania po kliknięciu) – powinna zwiększyć się przejrzystość tekstów.

Pozdrawiam

MiB
9

Wiwat Damian ! Wiwat ! Wiwat !

szalony_ivan
10

Fajny artykuł, jednak mam pewien problem. Skorzystałem ze „Sposobu 2″. Do każdej z zakładek ładuję dane nie statyczne, ale pobierane z bazy, i na początku jak jeszcze nie zmieni się zakładki jest ok, dane są pokazywane, ale jak przejdę do następnej zakładki, to już w niej nic nie ma, a jak wracam do poprzedniej,w której przed chwilą były dane, też i one znikają. Czy ktoś mógłby mi powiedzieć, jak sobie z tym poradzić ?

daniels
11

Szacunek dla autora strony.. dużo się dzięki niej nauczyłem. Pozdrawiam ;]

12

Fajny tutorial.

BTW jesli ktos szuka mechanizmu zakladek, ktory nie wymaga korzystania z zadnej JS-owej biblioteki to polecam moj skrypt Yetii :)

Pozdrawiam

13

gdzieniegdzie piszemy razm

Cezar
14

Racja, punkt dla Ciebie. Pozdrawiam

15

Zajeb….. kursik w końcu moge ze stron wypchnąć upośledzone mintAjax, dzięki tobie udało mi się załapać o co w tym chodzi ;) Dzięki

16

Ogólnie pozdrowienia i wyrazy szacunku za stronkę. Treści są przyjemnę.

I jako standardowy użytkownik internetu, przychodzę w interesie, a dokładnie mówiąc szukam pomocy odnośnie „Tabs”

Szukałem, próbowałem, ale w żaden sposób nie udało mi się dynamicznie zmienić tekstu występującego na zakładce. Czy to możliwe, że się nie da?

Baaardzo mi na tym zależy, aby zmienić tekst na konkretnej (aktualnie wybranej) zakładce jako efekt działania innej funkcji.

Jeśli ktoś potrafi, umie, proszę o wskazówki, może gotowiec?

Koshin
17

Świetny kursik. Właśnie zacząłem naukę jquery i bardzo dużo się stąd dowiedziałem.

Mam jeszcze takie pytanie. Jak z poziomu jquery dostać się do elementów strony wczytanych funkcją load?

Jeśli ktoś mógłby udzielić jakiejś wskazówki, lub wrzucić przykładowy kod, byłbym bardzo wdzięczny.

Idek
18

Mały błąd w jednej z ramek:

var element_index = $("#bookmarks a").index(this);
$("#content div:visible").hide();
$("#content div").eq(index).show();
chyba powinno być:
var element_index = $("#bookmarks a").index(this);
$("#content div:visible").hide();
$("#content div").eq(element_index).show();

Poza tym, wielkie dzięki za tę stronę oraz kurs. Nie rób sobie wolnego w wakacje ;-)
Pozdrawiam

19

Poprawione, dzieki! :-)

20

Witam, bardzo fajny tutorial. Gratuluję.
Jednak, że jest jedna rzecz, której nie rozumiem. Nie wiem dlaczego tekst, który dostaję poprzez Ajax nie jest nijak zmodyfikonany przez css. Proszę jakby mógłby mi to ktoś wyjaśnić. Co mam zrobić, aby zadziałało.
Pozdrawiam

tola
21

Bez kodu mozna zgadywac… :) Poza tym apelowalem, by raczej pisac o takich rzeczach na forach, w skrajnych przypadkach na mojego maila ;)

Pozdrawiam

22

Super więcej takich treści :)

Rafał
23

Efekt po najechaniu mozna uzyskać za pomocą CSS choć też nie jest to proste.

sss
24

„by zapobiec przechodzeniu do strony podanej w klikniętym linku” – czyli dokaładniej?

asa
25

Jaka aplikacja pozwala wyciąć spacje i przejścia do nowych lini w pliku tak, aby otrzymać coś podobnego do skompresowanej biblioteki jQuery?

dix
26

Juz wiem o co chodzi z tym return false. Ale można to zrobić też przez doadnie # na początku linku.

asa
27

a ja bym prosił jak do tej metody ajax dodać obrazek ładowania się kolejnej zakładki ?? obrazek lub text ??

DenVer
28

Oczywiście proces ładowania zakładek można wzbogacić stosownym komunikatem, czy efektami animacyjnymi – o tym już w kolejnych artykułach.

I właśnie o to mi chodziło. Jak zwykle wracam do tego kursu, gdyż właśnie przy ostatnim projekcie tego mi było trzeba :)
Ale właśnie tego mi brakuje, jakiegoś małego preloadera, małej animacji podczas ładowania się treści. Ale czekam z niecierpliwością, wiem, że warto :)

29

Jak należy zmodyfikować kod aby pod każdą zakładką był link do innej strony? Nie chcę umieszczać całej treści w jednym pliku, tak jak jest w powyższych przykładach.

kamil
30

Też czekam z niecierpliwością na opisy jak dodać animację do przewijania zakładek, szczególnie tych „Ajax”-owych ale i tak bardzo fajne posty.

uzi123
31

zamiast dać return false; by zabezpieczyć przed przejściem na inną stronę można również dać
event.preventDefault();

32

Zapomniałem dodać że do funkcji click trzeba dodać zmienną event

$(„#bookmarks li a”).click(function(event){});

33

A ja tak „słówko” do MiBa: stary, jesteś genialny, ale chwal się na własnym kursie! :D ferrante grzecznie Ci wytłumaczył, że proces nauki i kurs poglądowy, a specjalistyczny żargon, to dwie różne rzeczy – tak, wiem, Ty preferujesz z głową, ale tylko swoją, bo nikt tego nie zrozumie. Poczytaj komentarze: „wreszcie załapałem, bo na innych kursach nihuhu”, dlaczego? bo mają takie podejście jak Ty. Wykształcić dobrych nawyków nie zdążą, po prostu do niego nie wrócą.
Pozwól, że wyjaśnię o co chodzi: to jest kwestia komunikacji, o której nie masz pojęcia. Nie pytali Cię na „castingu” o umiejętność pracy zespołowej? Co więcej, komunikacja, a więc przejrzystość kodu powinna być stosowana również w produkcyjnym kodzie, nie tylko w nauczaniu, bo przejrzystość = koszty, ot co. Czasy zawodów w pisaniu bardziej zagmatwanego kodu dla 3 kart menu, żeby uszczknąć 5 milionowych sekundy dawno już mineły, kolego.
Dla wyjaśnienia – nie chodzi mi tak bardzo o to, co napisałeś, ale jak to zrobiłeś – masz inną optykę i uważasz, że jest jedynie słuszna, a takich już mieliśmy w historii tysiące – wszyscy zasępieni na bezludnej wyspie.

Pozdro

przemio
34

Witam.
Przetestowalem te rozwiazania, natomiast nie wiem jak mozna wczytać stronę www która zbudowana jest na php.
Czy funkcja load obsługuje php?

rafalch
35

PHP działa tak, że wysyła z serwera do przeglądarki klienta kod html (php jest w całości intepretowany po stronie serwera), zatem z funkcją load(js jest interpretowany i wykonywany po stronie przeglądarki) nie powinno być problemu (tyle o ile znam php, gdyż z js i jQuery dopiero zaczynam).

Pan Jan
36

hej, mam pytanie
dlaczego jak zastępuję tekst w zakładce 1 np. jakiś tekst to w zakładce 2 tekst się nie pojawia, natomiast jak powrócę do zakładki 1 gdzie jest tekst w div to nic się nie pojawia ?? pojawia się tylko tekst który jest poza div ? o co chodzi ??

magda
37

uzupełnij o class jak niżej

38
39

Może mi ktoś opisać jak wrzucić tab w tab? A dokładniej:

1 cały tab jak na powyższym przykładzie,a w jego środku kolejny tab. Jak to wygląda od strony JQ?

Kuleje w tym więc z góry dziękuje za pomoc

mac
40

czy można umieścić w warstwie inne warstwy ?? to znaczy żeby pojawiająca się zakładka/warstwa posiadała w sobie inne divy ? próbuje tak zrobić jednak zatrzymuje mi się wyświetlanie na pierwszym wewnątrz warstwy zakładki – wiecie może jak to obejść ??

maxi kaz
41

Witam
Napotkałem pewien problem którego nie umiem rozwiązać.
Wersja ajaxowa nie chce działać pod Chrome. Pod IE i FF działa idealnie.
Jest chyba jakiś problem z funkcja load() bo nie wczytuje plików.
Ktoś ma pomysł?

jug
42

Witam
Napotkałem pewien problem którego nie umiem rozwiązać.
Wersja ajaxowa nie chce działać pod Chrome. Pod IE i FF działa idealnie.
Jest chyba jakiś problem z funkcja load() bo nie wczytuje plików.
Ktoś ma pomysł?

Problem rozwiązany. Wystarczyło zainstalować xamppa.

jug
43

Czy można zrobić, aby dane zakładki zmieniały się automatycznie po jakimś z góry określonym interwale czasowym?

t
44

Mam taki dziwny problem, wszystko ładnie działa i staram się zrozumieć JQuery i powoli mi to nawet wychodzi, chociaż miałem bardzo mało styczności z JS co jest niewątpliwą zasługą twórcy kursu. Mam problem z wyświetlaniem zakładek, a dokładniej treść jest ładnie na niebieskim tle lecz górne zakładki Bar #1 … i tak dalej się przełączają ale są na białym tle strony. Kopiowałem źródło bezpośrednio ze strony także gdzie prawidłowo działa zamieszczony przykład ze strony Ferrente. Mam wersję JQuery 1.5.2. Sprawdzałem także na wersji 1.2.3 która była zaznaczona na początku strony oraz wersji 1.3.2 ale bez efektu. Proszę o podpowiedź dlaczego nie wyświetla się poprawnie. Sprawdzałem na przeglądarce Firefox 4 oraz IE 8.

Stavros
45

Ponieważ aktywne zakładki są w kolorze białym. Są 2 wyjścia: albo dasz kolor aktywnej zakładki na #fff w deklaracji styl:
ul li a { text-decoration: none; color: #fff; }
albo na szybko ustawimy tło dla elementy a:
ul li a {
text-decoration: none;
color: #000;
background: #396B8C;
padding: 5px 5px 10px 5px; }
To powinno wystarczyć. A swoją drogą nie wiem czy jest sens odkopywać tak stare wpisy, bo ciężko prowadzącemu blog coś takiego przeglądać biorąc pod uwagę ilość wpisów na tym blogu.

Mam nadzieję, że pomogłem. Dalsze pytania i wątpliwości najlepiej na Google lub forach webmasterskich.

Pozdrawiam

MSCoding
46

Witam.

Ciągle mam problem z 3 sposobem. Nawet przekopiowałem calutki ten kod ze strony i mi nie działa. Nie wiem co jest nie tak… Jakieś zmienne sami mamy tam wpisać czy co?

pozdrawiam

Dodaj komentarz

Dozwolone tagi: <blockquote>, <code>, <strong>