W poprzednim odcinku poznaliśmy kilka sposobów na przyjemną i szybką manipulację DOM. Powstał dość zgrabny przykład rozsuwanego menu. Dzisiaj ulepszymy go o efektowne animacje, a także popracujemy trochę na formularzach.
Na początek przypomnijmy, jakim kodem dysponujemy:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z nieuporządkowaną listą</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style type="text/css">
ul
{
list-style-type: none;
}
li.highlight
{
background: #000;
color: #fff;
}
ul#lista li p
{
display: none;
}
</style>
<!-- dodanie jQuery do dokumentu -->
<script type="text/javascript" src="jQuery.js"></script>
<!-- Nasz kod Javascript: -->
<script type="text/javascript">
$(document).ready(
function()
{
$("ul#lista li").children("h2").click( function() { $(this).next("p").toggle(); });
});
</script>
</head>
<body>
<ul id="lista">
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
</ul>
</body>
</html>Powyższy przykład umożliwia rozwijanie i zwijanie akapitów należących do danego elementu listy nieuporządkowanej po kliknięciu w nagłówek drugiego stopnia, należącego do tego samego elementu.
Testując skrypt dochodzimy jednak do wniosku, że w ten sposób możemy rozwinąć wszystkie cztery akapity, które potem będą jednocześnie widoczne. Dobrym pomysłem w tej sytuacji jest efekt zakładek. O co chodzi? Otóż, kiedy klikniemy pierwszy raz w nagłówek – wszystko będzie w porządku. Jeśli klikniemy drugi raz w inny nagłówek – widoczne są jednocześnie dwa akapity. Dzięki efektowi zakładek widoczny będzie tylko ten, który przed chwilą odsłoniliśmy. „Stary” akapit zostanie skrzętnie ukryty wraz z kliknięciem sygnalizującym pokazanie innego. Wszystko działa w ten sposób, jakbyśmy mieli do czynienia z zakładkami, gdzie tylko jedna może być aktywna.
Przedstawmy symulację działania skryptu:
- Klikamy w dowolny nagłówek.
- Pokazujemy akapit sąsiadujący z tym nagłówkiem.
- Następnie pobieramy wszystkie nagłówki z wyjątkiem tego, który kliknęliśmy.
- Pobieramy sąsiadujące z tymi nagłówkami, widoczne akapit. W praktyce będzie to zawsze tylko jeden akapit.
- Ukrywamy je, np. używając funkcji hide.
To dość proste zadanie, o czym przekonamy się za chwilę. Pierwsze 2 punkty zrealizowaliśmy w 2. odcinku naszych zmagań z jQuery. Pora zająć się kolejnymi trzema.
Wszystkie z nich musimy wykonać w momencie kliknięcia w dowolny nagłówek, ściślej rzecz biorąc podczas wykonywania zdarzenia click, czyli tam, gdzie teraz pokazujemy sąsiadujące akapity:
<script type="text/javascript">
$(document).ready(
function()
{
$("ul#lista li").children("h2").click( function() { $(this).next("p").toggle(); // o, tutaj! });
});
</script>Warto też od razu zauważyć, że uruchamiając na każdym akapicie funkcję toggle, umożliwiamy jego pokazanie, jak i ukrycie. Zwijać akapity będziemy jednak, jak już ustaliliśmy, gdzie indziej, więc zamieńmy funkcję toggle na show z parametrem normal (normalna szybkość animacji pokazywania się akapitu).
<script type="text/javascript">
$(document).ready(
function()
{
$("ul#lista li").children("h2").click( function() { $(this).next("p").show("normal"); });
});
</script>No dobrze, pora na szybkie i efektowne działanie, jak to z reguły w jQuery ma miejsce. Wiemy już, w jakim miejscu zrealizujemy nasze nowe cele odnośnie działania skryptu. Pora zamienić nasze pomysły na kod.
Pobierzmy więc wszystkie nagłówki należące do elementów listy, korzystając z prostych selektorów:
$("ul#lista li h2")Jeśli znasz CSS nie powinieneś mieć problemów z rozszyfrowaniem, do jakich elementów chcemy się dostać. Zaskoczonym podpowiem jedynie, że chodzi o nagłówki drugiego stopnia, będące elementami nieuporządkowanej listy o id=”lista”.
Przy tej okazji, przypomniała mi się też inna kwestia. W linijce powyżej, gdzie nadawaliśmy zdarzenie click każdemu nagłówkowi h2, użyliśmy do ich pobrania poniższej konstrukcji:
$("ul#lista li").children("h2")Można to zastąpić czymś takim (spróbujemy pobrać wszystkie dzieci h2 niezależnie od tego, jak głęboko zagnieżdzony jest element h2 – funkcja children pobiera tylko bezpośrednich „potomków”).
$("ul#lista li h2")Jak widzisz, jQuery jest bardzo elastyczne, co po raz kolejny udowodniło powyżej. Przejdźmy jednak do naszego skryptu. Musimy wykluczyć pobieranie nagłówka, w który właśnie kliknęliśmy. Jak zapewne dostrzegłeś w drugiej części serii artykułów o jQuery, mogliśmy się do niego dostać stosując zmienną this, o tutaj:
$("ul#lista li").children("h2").click( function() { $(this).next("p").toggle(); });Aby wykluczyć jego obecność, posłużymy się właśnie this. Nie będzie on jednak zastosowany samotnie, a w duecie z funkcją not, której użycie zapewnia nam to, że jQuery nie pobierze podanych jej elementów. Popatrzmy najpierw na oderwany od kontekstu przykład jej działania. Mamy poniższą strukturę:
<p class="active">a</p>
<p id="element-2">b</p>
<p>c</p>
<p class="active">d</p>Powiedzmy, że chcemy wybrać wszystkie akapity oprócz tych, które mają klasę równą active. Użyjemy wtedy:
$("p").not(".active");Wtedy pobrane zostaną tylko poniższe elementy:
<p id="element-2">b</p>
<p >c</p>Podobny manewr możemy zastosować z identyfikatorami:
$("p").not("#active");Czy też dowolnymi tagami:
$("p").not("jakis_tag");Wracając do naszego przykładu, możemy łatwo wyeliminować pobieranie aktywnego nagłówka podstawiając funkcji jako argument zmienną this, wskazującą właśnie nań.
Powstało coś takiego:
$("ul#lista li h2").not(this)W ten sposób, gdybyśmy kliknęli w drugi nagłówek, pobrane byłyby tylko pierwszy, trzeci i czwarty.
Pora teraz dostać się do akapitów, sąsiadujących z tymi nagłówkami. Użyjemy do tego starej, dobrej funkcji next.
$("ul#lista li h2").not(this).next("p")Ba, skrypt można jeszcze bardziej zoptymalizować, tak, by funkcja next pobierała tylko widoczne akapity. Użyjemy do tego selektoru :visible:
$("ul#lista li h2").not(this).next("p:visible")p:visible powoduje wyszukanie tylko tych, które są aktualnie widoczne.
Pora teraz na ich schwanie. Używamy tutaj funkcji hide() z atrybutem normal, określając tym samym szybkość animacji ukrywania:
$("ul#lista li h2").not(this).next("p:visible").hide("normal");I jest! Pora wstawić powyższą linijkę do zdarzenia click, bo tam należy chować inne, niż aktywny, akapity.
<script type="text/javascript">
$(document).ready(
function()
{
$("ul#lista li").children("h2").click( function() { $(this).next("p").show("normal"); $("ul#lista li h2").not(this).next("p:visible").hide("normal"); });
});
</script>Wygląda na to, że działa. Cały dokument wygląda natomiast tak, jak poniżej:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z nieuporządkowaną listą</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style type="text/css">
ul
{
list-style-type: none;
}
li.highlight
{
background: #000;
color: #fff;
}
ul#lista li p
{
display: none;
}
</style>
<!-- dodanie jQuery do dokumentu -->
<script type="text/javascript" src="jQuery.js"></script>
<!-- Nasz kod Javascript: -->
<script type="text/javascript">
$(document).ready(
function()
{
$("ul#lista li").children("h2").click(
function()
{
$(this).next("p").show("normal");
$("ul#lista li h2").not(this).next("p:visible").hide("normal");
}
);
}
);
</script>
</head>
<body>
<ul id="lista">
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
</ul>
</body>
</html>Warto dodać, że zamiast funkcji show i hide możemy użyć kolejno slideDown (rozwijanie) i slideUp (zwijanie). Różni je to, że slide’y nie obsługują przezroczystości w animacjach – zmieniają tylko height elementów, na których działają. Obie funkcje przyjmują te same argumenty jak show, czy hide – slow, normal, fast lub dowolna liczba milisekund. Można również jako drugi argument podać jakąś funkcję, która uruchomi się po zakończeniu zwijania bądź rozwijania.
Co jeszcze ważne, a czego człowiek dowiaduje się często dopiero z dokumentacji – domyślnym parametrem oznaczającym szybkość wykonywania się funkcji slideDown i slideUp – jest normal. Jeśli więc wywołamy funkcję bez argumentu, np.:
$("p").slideDown();Wszyskie akapity rozwiną się tak, jakbyśmy jako argument podali slideDown(„normal”).
Pobawiliśmy się już trochę funkcjami operującymi na zwykłych tagach. Zajmijmy się teraz formularzami, choć warto zaznaczyć, że do podobnych przykładów, jak ten jeszcze wrócimy.
Formularze w jQuery
Dzięki łatwym dostępie do różnorakich gałęzi drzewka tagów poprzez funkcję $(), zabawa z formularzami jest niezwykle prosta. W JS, dobierając się do wszystkich elementów formularza o nazwie formularz, użylibyśmy poniższego kodu:
document.forms['formularz'].elements;W jQuery sprawa opiera się na niewielu znakach:
$("formularz.elements");Zaczynając naszą przygodę z formularzami w jQuery, zajmijmy się na początek licznikiem znaków wpisanych do formularza. Tego typu skrypty od zawsze cieszyły się sporą popularnością, a dzięki jQuery nie trzeba szukać długo – kod to tylko kilka linijek. Przyjmijmy więc, że mamy poniższą strukturę:
<form name="formularz" action="">
<textarea name="content" ></textarea>
</form>
<p id="countChars"></p>Załóżmy, że podczas wpisywania znaków w polu content, ich liczba będzie pokazywana w akapicie o id równym countChars. Trzeba będzie więc wychwycić, kiedy zwolnimy jakiś klawisz klawiatury podczas wpisywania treści. Jak już wiemy z JavaScript, za coś podobnego odpowiada zdarzenie onkeyup. W jQuery twórcy przewidzieli nazwę keyup, czyli w zasadzie podobnie, jak to miało miejsce w wypadku onclick (w jQuery click).
Kiedy będziemy wiedzieć, że nacisnęliśmy jakiś klawisz w polu content, policzymy jego znaki. Uzyskaną wartością uzupełnimy akapit. Pora zaczynać! Oczywiście zezwalamy jQuery na działanie tuż po załadowaniu drzewa DOM:
$(document).ready(
function()
{Następnie, by dodać jakieś zdarzenie elementowi textarea musimy się do niego dostać. W CSS wyglądałoby to tak:
form[name="formularz"] textarea[name="content"] {}W jQuery również możliwe jest użycie powyższych selektorów:
$("form[name=formularz] textarea[name=content]")W ten sposób pobraliśmy odnośnik do elementu formularza o nazwie formularz, który nosi nazwę content. Możemy w ten sposób wykonywać na nim różne operacje. Nie będziemy jednak rozmyślać jakie, bo już to sobie ustaliliśmy – trzeba najpierw przechwycić zdarzenie zwolnienia przycisku klawiatury z tego pola, co będzie oznaczało, że użytkownik wpisał bądź usunął jeden znak:
$(document).ready(
function()
{
$("form[name=formularz] textarea[name=content]").keyup(
function()
{Jak widać, robimy to podobnie, jak w przypadku click.
Mamy już prawie cały skrypt, pora teraz na podliczenie ilości znaków dla elementu i umieszczenie jej w akapicie:
$(document).ready(
function()
{
$("form[name=formularz] textarea[name=content]").keyup(
function()
{
$("#countChars").html($(this).val().length);
});
});Wszystko za nas robi poniższa linijką, którą postaramy się przeanalizować:
$("#countChars").html($(this).val().length);Na początku, by uzupełnić akapit ilością znaków z textarea, musimy się doń dostać, stąd nie dziwi $(„#countChars”). Następnie uruchamiamy na pobranym akapicie funkcję html, która działa podobnie jak text, tyle że podany jej tekst jest interpretowany jako html.
Działanie funkcji text i html możemy porównać w takim przykładzie:
$("p").text("<strong>costam</strong>");$("p").html("<strong>costam</strong>");Pierwszy da nam:
<p><strong>costam</strong></p>Drugi:
<p>costam</p>Jak widać, funkcja text formatuje podaną wartość do czystego tekstu, zaś html do html’a.
Wracając do naszej analizy, w środku funkcji html ustawiamy wartość akapitu jako
$(this).val().lengthFunkcja ta użyta bez argumentów w kontekście elementu formularza zwraca jego wartość atrybutu value.
Odwołujemy się tutaj do znalezionego elementu textarea ($(this)), następnie do jego wartości (val()). Używając length liczymy ilość znaków, jakie zwróciła sąsiednia funkcja val(). Czyli liczbę wpisanych znaków. W JS robiliśmy to wielokrotnie. Zobacz przykład!
Powstały dokument:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z licznikiem znaków formularza</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<!-- dodanie jQuery do dokumentu -->
<script type="text/javascript" src="jQuery.js"></script>
<!-- Nasz kod Javascript: -->
<script type="text/javascript">
$(document).ready(
function()
{
$("form[name=formularz] textarea[name=content]").keyup(
function()
{
$("#countChars").html($(this).val().length);
});
});
</script>
</head>
<body>
<form name="formularz" action="">
<textarea name="content"></textarea>
</form>
<p id="countChars"></p>
</body>
</html>Naszą zabawę z formularzami dokończymy w następnym odcinku, gdzie będzie co nieco o blokadzie znaków, walidacji i tym podobnych efektach.
Wycinek z dokumentacji
W każdym odcinku znajdą się bardzo proste i dużo pokazujące przykłady funkcji z danego odcinka, zaczerpnięte z oficjalnej dokumentacji jQuery. Wielokrotnie, jak znam życie, spojrzysz najpierw tutaj, nim weźmiesz się za tekst całego kursu i jest to dobre podejście. Kod jQuery jest często dość nieczytelny i może wydawać się zagmatwany. Proste, krótkie przykłady to zaś dobry sposób na uzmysłowienie sobie działania funkcji.
not(filtr)
Funkcja użyta w kontekście pobierania przez jQuery elementu bądź elementów wyklucza jego pobranie, jeśli taki pasuje do podanego filtru.
Kod:
<li class="a">a</li>
<li>b</li>
<li>c</li>$("li").not(".a");Zwróci:
<li>b</li>
<li>c</li>slideDown(szybkość, funkcja)
Funkcja użyta w kontekście danego elementu rozwija go z szybkością podaną w pierwszym argumencie. Może to być slow, normal, fast bądź dowolna liczba milisekund. Funkcję tę można również uruchomić z drugim argumentem w postaci funkcji, która wykona się po wykonaniu slideDown, czyli rozwinięciu elementu. Funkcja slideDown jest analogiczna do hide, show czy też toggle. W swojej animacji operuje jednak tylko na wysokości elementu.
slideUp(szybkość, funkcja)
Funkcja użyta w kontekście danego elementu zwija go z szybkością podaną w pierwszym argumencie. Może to być slow, normal, fast bądź dowolna liczba milisekund. Funkcję tę można również uruchomić z drugim argumentem w postaci funkcji, która uruchomi się po wykonaniu slideDown, czyli rozwinięciu elementu. Funkcja slideDown jest analogiczna do hide, show czy też toggle. W swojej animacji operuje jednak tylko na wysokości elementu.
html(tekst)
Funkcja użyta w kontekście danego elementu (tagu), uzupełnia jego wartość, interpretując podany tekst jako HTML.
Kod:
$("p").html("<em>tekst</em>");Zwróci:
<p>tekst</p>val()
Funkcja użyta w kontekście danego elementu formularza, zwraca wartość jego atrybutu value.
Kod:
<input type="text" value="Cos tam" />$("input[type=text]").val();Zwróci:
Cos tam
Komentarze
Odnośnie przykładu z rozwijaniem paragrafów – świetny pomysł na zrobienie ładnego menu – nagłówki jako sekcje, po kliknięciu rozwija się podmenu. Jest tylko mały problem – ewidentnie widać, jak pomiędzy rozwinięciem klikniętego a rozwinięciem poprzedniego, podskakiwanie ostatniego elementu. Masz jakiś pomysł jak to obejść?
Na przyklad uruchomienie funkcji hide bez zadnego paramteru :-)
Nie bardzo… jeśli mam rozwinięty pierwszy element i kliknę ostatni to użycie hide spowoduje rozwinięcie tego ostatniego elementu ‘od góry’ a nie od dołu z równoczesnym zwijaniem pierwszego :)
A probowales podstawic zamiast hide i show slideUp i slideDown z odpowiednimi predkosciami?
Naprawdę świetny kurs. W końcu JS nie będzie mi się śnił po nocach.
Dzięki za dobrą robotę i czekam na kolejne części.
pozdrawiam
tzim
Z niecierpliwością czekam na kolejne odcinki :)
Hm, coś czuję, że gdybym pół roku wcześniej dorwał te bibliotekę, to dziś nie miałbym depresji, herc-klekoty, „kurwicum-delirrium-permanentum” i innych przewlekłych chorób na tle nerwicowym spowodowanym przez Internet Explodera :-)
Autorowi przede wszystkim dziękuję za przekonanie mnie do tego frameworka. Pozdrawiam i życzę owocnych prac nad 4-tą częścią kursu.
My, lud pracujący, domagamy sie dalszej części :) Dobra robota. Czekam na CDN
Dzieki za pozytywne opinie. Kolejne czesci mozna powiedziec, ze sa w drodze, niestety ostatni czas to wakacje, ale i tez duzo pracy, wiec wszystko sie przeciaga.
Poza tym juz wkrotce ujrzycie efekty tej pracy na blogu, warto czekac :-).
Pozdrawiam
Ja z dwiema sprawami. :)
Pierwsza – cudzysłowy w
$('element[@attr="…"]')można zostawić, ja dla przejrzystości zawsze je zostawiam.Druga – oj, nie paragrafy a akapity (choć sam robiłem ten błąd setki razy zanim mnie ktoś nie przekonał, że te pierwsze są w kodeksie a drugie w tekście. :>)
Nie wiem dlaczego u mnie nie dziala nastepujacy kod:
$(„ul#lista li”).children(„h2″).click( function() { $(this).next(„p:visible”).show(„normal”); $(„ul#lista li h2″).not(this).next(„p:visible”).hide(„normal”); });
(przekopiowany z kursu)
Po krotkiej analizie usunalem :visible z pierwszego .next(„p”) i zaczelo dzialac. Nie wiem czyj to blad, tak tylko wspominam.
Pozdrawiam, ide czytac 3 czesc. :)
Niech to szlag, to juz jest trzecia czesc, a mialem nadzieje na wieksza dawke zabawy. :)
co do częsci z akapitam:
jaki kod JS powinienem dodać, aby po załadowaniu strony pierwszy akapit sie wyświetlał?
Po prostu zrobic to CSSem? :)
W jaki sposób sprawić aby show() i hide() poprawnie działały na tabelach, i na divach w których jest ustawione display: table, pod ie działa ale pod firefoxem problemy są
Pozdrawiam
Damian. Gratuluję dobrego kursu i lekkiego pióra.
JQuery to jest to czego szukałem
Pozdrawiam
Shoovi
Czekam na kolejnego Arta, super opisane ;-)
Cytat: „ewidentnie widać, jak pomiędzy rozwinięciem klikniętego a rozwinięciem poprzedniego, podskakiwanie ostatniego elementu. Masz jakiś pomysł jak to obejść?”
Musisz usunąć marginesy dla h2 albo p.
Gratuluje kursu, naprawdę świetny!
Kurs jest rewelacyjny, to prawda :)
Właśnie skończyłem kombinować z efektem, który chcę użyć na swojej stronie :)
Co prawda zajęło mi to kilkadziesiąt minut, ale po 3 kursach udało mi się to zrobić w dwóch linijkach !!
Mam nadzieję, że będę miał do czego wracać :)
Pozdrawiam wszystkich zapalonych Czytelników i autora :)
Tak mi się nasunęło na myśl żeby coś napisać a następnie zaznaczyć i wyciąć … jak zresztą dobrze przypuszczałem skrypt się wykłada.
Ps. Bardzo fajny kurs.
Nie uznawalbym tego za wade, a pozyteczny „ficzer” do zaimplementowania. Zapewne przyszle przyklady porusza te kwestie. Dzieki za opinie :-)
Świetnie napisane ! Dzięki
UWAGA!!!
Od 17 pola z kodem jest błąd:
$(„ul#lista li”).children(„h2″).click( function() {
$(this).next(„p:VISIBLE„).show(„normal”);…
Nie można wybrać czegoś co jest ukryte selektorem visible.
Usunięcie „:visible” jak już ktoś wcześniej zauważył, naprawia błąd.
Pozdrawiam
Male przeoczenie, dzieki za czujnosc po raz kolejny ;-)
Niom po tej części czuje że muszę zgłębić temat dogłębnie ;]
Znakomita robota ferrante. Pozdrawiam.
Wszystko ładnie i zrozumiale ;) Właśnie przesiadam się z prototype ;)
Naprawdę spoko kurs, haha i jaki podgląd dodawania komentarzy :D Stary wielkie dzięki za ten kurs! jQuery wymiata :)
jezeli ktos szukal by takiego samego rozwiazania pod jQuery to polecam rowiazanie pod jQuery. tam jest opisany bug w wersji 1.2.3. w wersji 1.2.6 jest juz to poprawione, ale glownie chodzi o algorytm animacji.
ferrante trzymaj tak dalej. swietny blog :)
A’propos rozwijanych akapitów i niezbyt ładnego efektu przeskakiwania:
Sprawę dobrze załatwia wyzerowanie marginesów w akapitach i ewentualne użycie CSSowego line-height w zamian.
Ale chciałbym zapytać czy da się jakoś tak napisać ten kod, aby najpierw jeden akapit się zwijał, a dopiero po zakończeniu tego – rozpoczynało się rozwijanie następnego?
W podanym przykładzie widać, że zwijanie jednego akapitu i rozwijanie drugiego następuje jednocześnie.
Próbowałem funkcję show() zagnieździć do wewnątrz hide() jako jej callback, ale nie działa :/
Pozdrawiam!
Mam jQuery w wersji 1.3.2 i u mnie nie działa przykład dot. formularza gdy wpisane są „małpy” w tym miejscu:
$(„form[@name=formularz] textarea[@name=content]„).keyup( …
Bez znaków @ jest wszytko ok.
Może innym, tak jak ja raczkującym w tematyce js przyda się ta informacja ;)
adas007 – zbawco :) siedzialem dzisiaj pół dnia nad tym czemu nie działa.. kopiowałem kod żywcem z kursu, ze strony z przykładem, nawet myślałem że to wina tego że pierwotnie zassałem jQuery w wersji lite.. yh. mała rzecz, a cieszy ;)
a Twórcy gratuluję bardzo fajnego kursu wprowadzającego i przekonywującego do jQuery :) bardzo fajne wejście w temat :) – nie taki JS straszny jak go malują ;)
pozdrawiam :)
Tu jest informacja o tym że MAŁPA @ już nie działa w najnowszych wersjach.
Teraz piszemy po prostu bez tego znaku.
Pierwsze zdanie w akapicie ‘Overview’
http://docs.jquery.com/Selectors/attributeHas#attribute
No, napieram czwartą część :)
Dlaczego w kodzie zliczającym liczbę znaków wprowadzonych w pole
formularza wybór padł na funkcję keyup? Czy ma to jakieś szczególne
znaczenie? Pytam bo podmieniłem przez ciekawość na keydown i pozbyłem się dzięki temu lekkiego opóźnienia naliczenia kolejnego znaku…
http://www.bloggingdeveloper.com/post/KeyPress-KeyDown-KeyUp-The-Difference-Between-Javascript-Key-Events.aspx
sam zobacz
Dzięki za link do artykułu ale nie zrozumiałem go do końca (w sensie merytorycznym, nie językowym).
Jednak po zaimplementowaniu skryptu z tej lekcji do mojego pliku dynamicznego formularza(28 inputów dynamicznie pokazywanych i ukrywanych), zauważyłem złe działanie zliczania znaków:
- pierwsze zliczenie następowało dopiero po dwóch literach,
- losowo skrypt nie zliczał znaku gdy szybko się pisało.
- zliczanie w tył – gdy kasowałem znaki z textarea jeden po drugim też źle działało
Nie wiem czemu w przykładowym pliku lekcyjnym (po podmianie keyup na keydown) tego zjawiska nie dało się zauważyć. Czy złożoność pliku html (jego rozmiar i ilość kodu JS/jQ) wpływa na poprawność wykonywania JS? (używam FF 3.0.6)
ps: przydałoby się trochę więcej o walidacji formularzy za pomocą jQuery: imię i nazwisko za pomocą regexów, czy input ma wartość czy jej nie ma, czy adres email ma małpe i kropkę, czy telefon to telefon, czy checbox zaznaczony a radiobutton wybrany… itd :-)
Stary, ale nie mieszaj lekcji ze swoimi prywatnymi skryptami – przeciez nie pisze tutaj gotowcow do wykorzystania gdzie indziej. Sprobuj zrozumiec, co robisz zle i dostosowac sobie skrypt do Twoich potrzeb.
Roznica jest taka, ze jak przytrzymasz jakis key, to zdarzenie keydown jest caly czas odpalane. Czyli mozesz trzymac powiedzmy literke „p” i caly czas bedzie Ci zliczalo znaki, co jest troche nieoptymalne i pamieciozerne.
Dzięki za łopatologiczne wytłumaczenie keydown.
Nie robię mechanicznego kopiuj-wklej, patrzę tylko na sposoby.
Szkoda, ze ten skrypt z rozsuwano zwijanym menu nie działa gdy mamy podkategorie. Nie da się jej wtedy otworzyć gdyż folder nadrzędny się zwija. Wiem, że mozna to obejść nadając klasy CSS ale ja musze stworzyć drzewko jak w OS generowane na podstawie plików z dysku i nie wiem jak to ogryźć.
Ja tylko w kwestii formalnej:
cytat: Powyższy przykład umożliwia rozwijanie i zwijanie paragrafów należących…
Paragrafy to mogą być w kodeksie karnym. W języku polskim mówimy akapit.
$(„ul#lista li”).children(„h2″)
Co oznacza nic innego, jak:
$(„ul#lista li h2″)
A jednak oznacza co innego. Zamiast $(„ul#lista li h2″) powinno być $(„ul#lista li > h2″)… Zapis z children oznacza tylko bezpośrednich potomków a zapis który podałeś jako równoważny z children oznacza wszystkich potomków (tzn. potomków potomków też).
Pozdrawiam :)
Right, poprawione.
Następnie, by dodać jakieś zdarzenie elementowi textarea musimy się do niego dostać. W CSS wyglądałoby to tak:
chyba chciales napisac:
Następnie, by dodać jakieś zdarzenie elementowi textarea musimy się do niego dostać. W JavaScript wyglądałoby to tak:
hej, jestem całkiem zielony jeżeli chodzi o ogólnie pojęte programowanie webowe, stawiam pierwsze kroki, ten kurs bardzo mi w tym pomaga ale czegoś nie kumam:
$(„form[name=formularz] textarea[name=content]„).keyup(
function()
{
$(„#countChars”).html($(this).val().length);
});
Dlaczego tutaj this-em jest textarea a nie licznik? Licznik też pobieramy dolarem a to wywołanie jest później, „bliżej” thisa?
Załóżmy, że jednak chciałbym się dostać tam gdzie this do tego wybranego licznika a nie text area – jak to zrobić?
Niestety w oficjalnej dokumentacji żadnego opisudo this nie znalazłem. W ogóle jakaś słaba ta dokumentacja. Są opisy funkcji, selektorów a absolutnych podstaw jak „co to jest $” czy „jak działa this” nie można nigdzie znaleźć. Źle szukam czy co?
@froff: bo this odnosi się do elementu na którym wywołałeś zdarzenie a nie do tego, do którego odnosisz się „dolarem” – w tym przypadku zdarzenie onKeyUp wywołane jest na textarea a więc do niej odnosi się this…
ferrante, dzięki, nie ustawaj pliz ;)
@Walking In The Darkness: dzięki za wyjaśnienie!
Działanie funkcji text i html możemy porównać w takim przykładzie:
$("p").text("<strong>costam</strong>");$("p").html("<strong>costam</strong>");Pierwszy da nam:
<p><strong>costam</strong></p>Drugi:
<p>costam</p>wydaje mi się, żę coś z tym jest nie tak..chyba powinno być odwrotnie..
albo raczej po prostu w sekcji „da nam” nie powinno być znaczników
mi sie to wysypalo jak do znacznika sie wrzuci:
mi sie to wysypalo jak do znacznika [quote][/quote] sie wrzuci: [quote][/quote]
Jak zrobic w rozsuwanym menu zeby pojawila sie „lapka” po najechaniu na element listy ?
w CSS, tam gdzie masz styl tego elementu, musisz dodać
cursor: pointer;jQuery jest super tak jak i kurs który właśnie czytam aby więcej takich w polskim internecie.
Mam wskazówkę dotyczącą użyteczności, przydał by się jakiś button dzięki któremu można by było przejść od razu do kolejnego kursu serii.
Coś w rodzaju „kolejna część”
teraz żeby przejść do kolejnego kursu trzeba klikać ze 4 razy
Pozdrawiam
Mam pytanie,
dlaczego do wypisania liczby znaków przez zdarzenie keyup dałeś html a nie text ?
W końcu dodałeś tylko tekst, bez żadnego znacznika np. pogrubiającego treść.
Więc jaki sens miało dawanie tutaj html() ?
Proszę o pomoc, nie chce mi to działać na mojej stronie, kopiuje wszystko, więc nie ma możliwości żebym coś źle przepisał. Jak odpalam stronę to firebug pisze mi że w:
46 $(document).ready(
47 function()
48 {
49 $(„ul#lista li”).children(„h2″).click(
pisze mi „$(document).ready is not a function ” i podkreśla linię 47 ktoś może pomóc?
[...] – to łatwe! #2 jQuery – to łatwe! #3 jQuery – to łatwe! #4 jQuery – to łatwe! #5: Zakładki jQuery – to łatwe #6: [...]
będą kolejne części?
Szanowne grono.
A ja mam takie pytanie. Napisany wcześniej akapit chciałbym zastąpić na tabelka… Tworzę tabelę, ale wtedy niestety całość przestaje działać..
Nie wiem dlaczego…
$("form[name=formularz] textarea[name=content]").keyup(
function()
{
$("#countChars").html($(this).val().length);
}
);
Trochę mnie dziwi, że $(this) odnosi się do $(„form[name=formularz] textarea[name=content]„), a nie do $(„#countChars”).
Ciekawe dlaczego?
Proponuje, abyś przed zadaniem pytania sprawdzał czy ktoś go już nie zadał ;) – patrz komentarze 43, 44.