Întrebări CSS şi jQuery
25 MayRăspund la întrebări bune despre CSS şi/sau javascript/jQuery.
Poţi întreba lăsând un comentariu. Răspunsul va veni în câteva zile, când se vor strânge câteva întrebări.
Răspund la întrebări bune despre CSS şi/sau javascript/jQuery.
Poţi întreba lăsând un comentariu. Răspunsul va veni în câteva zile, când se vor strânge câteva întrebări.
În afară de toate efectele drăguţe de care este capabil, jQuery mai ştie şi alte lucruri mult mai importante şi utile. Printre acestea sunt funcţiile de manipulare a DOM-ului.
Prin manipularea DOM (Document Object Model) se poate modifica structura paginii parţial sau chiar în totalitate. Astfel, putem adăuga, şterge sau copia elemente în funcţie de necesităţi. Utilizare practică: AJAX, galerii de genul lightbox, drag&drop, etc. Pentru a demonstra cum funcţionează câteva din funcţiile de manipulare a DOM, am făcut un mic exemplu în care elementele sunt adăugate dinamic, după încărcarea paginii. Codul HTML iniţial este următorul:
<ul class="clearfix" id="manipulation"></ul> <ul id="status"></ul>
Adăugăm în prima listă cinci elemente (a doua listă este un fel de consolă care – la click – ne arată câte elemente conţine prima listă):
1 2 3 | for(i=0;i<5;i++){ $(document.createElement('li')).appendTo($('#manipulation')); } |
Apoi, pentru fiecare LI adăugăm un span la mouseover şi îl ştergem la mouseout. Desigur, puteam să-l arătăm/ascundem, dar am vrut doar să arăt cam cum funcţionează manipularea. De asemenea, la click, se va injecta un alt LI imediat după elementul curent. Toate event-urile sunt live (voi explica un pic mai jos care e treaba cu ele) :
1 2 3 4 5 6 7 | $('#manipulation').find('li:not(span)').live('click',function(e){ $(document.createElement('li')).append('<a href="#">x</a>').hide().insertAfter($(this)).show(500) }).live('mouseover', function(){ $(this).append('<span>CLICK!</span>'); }).live('mouseout', function(){ $(this).find('span').remove(); }); |
Reîncepem seria de tutoriale despre jQuery dar, din cauza timpului liber inexistent se vor rări ca frecvenţă, dar voi încerca să compensez prin cantitatea de informaţie oferită.
Ca exemplu practic îţi voi arăta cum poţi face un meniu de genul suckerfish vertical cu submeniuri. Tutorialul conţine atât ce am „predat” până acum cât şi câte ceva din ceea ce va urma.
Codul HTML nu conţine altceva decât o listă neordonată (UL) ce nu cred că are rost să o explic:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ul id="meniu"> <li><a href="#">Prima pagină</a></li> <li><a href="#">Despre noi</a> <ul> <li><a href="#">Ce facem</a></li> <li><a href="#">Ce nu facem</a></li> <li><a href="#">Cum facem</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">Feedback</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">Contact</a></li> </ul> </li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #meniu { border-top:1px solid #ccc; margin:50px; width:10em; font-family:Arial, Verdana, Sans-serif; } #meniu li { position: relative; width:10em; border: 1px solid #ccc; border-top:none; list-style:none; background-color:#fff; } |
În cele ce urmează afişăm doar primul nivel al listei, restul find ascuse.
1 2 3 4 5 6 7 8 | #meniu li ul { position: absolute; left:9.5em; top:.2em; border-top:1px solid #ccc; z-index: 2; display:none; } |
După ce am văzut cum funcţionează selectorii şi event-urile în jQuery, putem trece la pasul următor: efectele. Mulţi folosesc o librărie JS (jQuery, Prototype sau orice altceva) aproape exclusiv pentru efecte.
jQuery include câteva efecte simple dar majoritatea sunt doar variaţii ale unei singure funcţii: animate(). Toate efectele au un parametru pentru o funcţie callback. Efectele built-in sunt:
show() / hide() - folosite fără niciun parametru doar schimbă display:none în display:block sau display:inline (în funcţie de tipul elementului) şi invers. Cu un parametru numeric (ex: $('div').show(500) ) va genera un efect de redimensionare şi transparenţă de durată 500 ms;slideUp() / slideDown() – ascunde/arată un element printr-un efect de „alunecare”. Acceptă ca parametrii: durată, callback şi easing (nu ştiu cum aş putea traduce asta, dar voi explica mai jos ce face);toggle() / slideToggle() – dacă un element este vizibil îl ascunde şi viceversa. La fel ca la exemplul anterior, poţi specifica durata şi o funcţie callback;fadeIn() / fadeOut() – schimbă opacitatea unui element şi îi setează display:block / display:none. Parametrii: durată şi callback;fadeTo(durata, opacitate, callback) – schimbă opacitatea unui element fără a-i afecta vizibilitatea. Spre deosebire de fadeOut(), fadeTo(300, 0) doar setează opacitatea la 0, fără a ascunde elementul. Este asemănător cu display:none VS. visibility:hidden.$('div').slideUp(500, function(){ alert('Ascuns')})
desigur, se poate folosi şi combinaţia:
var callback = function() { alert('Ascuns'); }; $('div').slideUp(500, callback)
Astea sunt cele mai drăguţe deoarece singura limită ţine de imaginaţia fiecăruia. Ce se poate anima? Păi… Cam orice proprietate CSS în afară de z-index (IE face figuri). Atenţie însă, dacă vrei să schimbi poziţia unui element, nu uita să-l poziţionezi absolut mai întâi! Dimensiunile sunt specificate în pixeli dar, dacă le pui în ghilimele, poţi specifica unitatea de măsură preferată.
$('p:eq(0)').css({position:'absolute'}).animate({ bottom:0, fontSize:'2em', opacity: 0.5, left: '50%', width:'50%' }, 1500, 'swing', function(){ alert('Animat!'); });
Poţi încerca diverse efecte folosind consola în pagina demo:

Dacă nu îţi place/nu ai timp/chef să experimentezi (sau orice alt motiv) poţi încerca jQuery UI. Este o librărie asemănătoare scriptaculous ce adaugă câteva funcţionalităţi mai deosebite pentru jQuery: drag&drop, mai multe efecte, slidere, datepicker, etc. Aici ai demo cu efectele jQuery UI.
Momentan o pauză de o săptămână-două, după care voi reveni cu un exemplu practic cu ce am învăţat până acum şi un tutorial despre cum putem modifica DOM-ul cu jQuery. Nu uita să alegi ce tutorial vrei să fie exemplul final!
M-ar ajuta foarte mult dacă primesc feedback de la începători. Vreau să ştiu dacă explic bine şi pe înţelesul tuturor, deoarece, având o oarecare experienţă îmi este destul de greu să-mi dau seama cât de accesibil este începătorilor.
Nu, nu este vorba despre un tutorial. După ce terminăm un crash-course în jQuery, facem o mică aplicaţie. Problema este că nu ştiu cam ce ar fi interesant pentru cursanţii mei (moah, cum sună
), aşadar m-am gândit să fac un poll. Am pus câteva variante, dar dacă alegerea ta nu se regăseşte în listă, adaugă într-un comentariu.
[poll id="5"]
Cam toate aplicaţiile conţin efecte, ajax, modificare DOM, etc, deci toate sunt destul de avansate pentru a uni toate cunoştinţele asimilate într-un singur exemplu.