Professzionális kliens oldali webfejlesztés jQuery alapokon

Az előadások a következő témára: "Professzionális kliens oldali webfejlesztés jQuery alapokon"— Előadás másolata:

1 Professzionális kliens oldali webfejlesztés jQuery alapokon
Gincsai Gábor Egy markup -> sötét múlt elrejtése (kompatibilitás) BME - AAIT

2 Miről lesz szó… A jQuery létjogosultsága, célja és koncepciója
Selectorok, HTML manipuláció, események kezelése AJAX és a jQuery Pluginek jQuery UI jQuery templates Data Link

3 Kis történelem The Write Less, Do More, JavaScript Library 2006 óta
Nyílt forráskódú JavaScript könyvtár Egyszerű interakció a HTML-lel Rengeteg plugin Microsoft is fejleszt pluginokat Visual Studióban van IntelliSense támogatás John Resig

4 Első használat előtti teendők
Letölthető a jQuery honlapjáról Van hozzá CDN (Microsoft-os is) Webes projectekben van. *.js – Debug verzió *.min.js – Minimalizált változat *.vsdoc – VS Inellisensehez kell Csak es van a project sablonban

5 Hogyan aktualizáljuk a verziót
CDN, NuGet CDN: Referenciát kell csak átírni Ilyenkor nincs vsdoc  NuGet package jQuery (Add Library package) jQuery.vsdoc (Package manager)

6 Hogyan használjuk mindezt hatékonyan?

7 Kiválaszt  Cselekszik
A jQuery koncepciója Mágikus $() függvény Kiválaszt  Cselekszik Láncolhatóság

8 Egyszerű és összetett selectorok
Minden: $("*") Tag: $("table") Id: $("#tableHeader") Css: $(".active") Összetett Tag és css: $("tr.active") Tag és Id: $("table#tableHeader") Id vagy css: $("#tableHeader, .active")

9 Hierarchikus selectorok
Leszármazottak ( ) $("#row1 td") A B C - 1-2 1-0 2-2 3-2 1-1 0-1

10 Hierarchikus selectorok
Leszármazottak ( ) $("#row1 td") Gyerekek (>) $("tr > td") A B C - 1-2 1-0 2-2 3-2 1-1 0-1

11 Hierarchikus selectorok
Leszármazottak ( ) $("#row1 td") Gyerekek (>) $("tr > td") Következő (+): $("#cellBB + td") A B C - 1-2 1-0 2-2 3-2 1-1 0-1

12 Hierarchikus selectorok
Leszármazottak ( ) $("#row1 td") Gyerekek (>) $("tr > td") Következő (+): $("#cellBB + td") Testvérek (~) $("#cellAA ~ td") A B C - 1-2 1-0 2-2 3-2 1-1 0-1

13 $("div[id^='mai']") $("div[id$='ain']") $("div[id*='ai']")
Szűrések Index alapján Első/utolsó: $("tr:first") $("tr:last") Index kisebb/nagyobb mint: $("tr:lt(2)") $("tr:gt(2)") Index egyenlő: $("tr:eq(2)") Láthatóság alapján Látható/rejtett: $("div:visible") $("div:hidden") Attribútum alapján Van olyan attribútuma: $("div[id]") Az attribútum értéke egyenlő: $("div[id='main']") Az attribútum értéke kezdődik / végződik / tartalmazza: $("div[id^='mai']") $("div[id$='ain']") $("div[id*='ai']")

14 Szelektorok és filterek
Selectorok Jelölőnégyzet $("input:checkbox") Rádió gomb $("input:radio") Gomb $(":button") Szöveg beviteli mező $(":text") Filterek Bepipált $("input:checked") Kiválasztott $("input:selected") Engedélyezett $("input:enabled") Letiltott $("input:disabled")

15 Legördülő menü kiválasztott elem
<select name="cities"> <option value="1">Budapest</option> <option value="2" selected="selected">Nyíregyháza</option> <option value="3">Debrecen</option> </select> $("select[name='cities'] option:selected").val()

16 Selectorok és filterek

17 HTML dokumentum bejárása

18 jQuery vagy DOM elem A selectrok jQuery objektumok tömbjét adják vissza. A length visszaadja, hogy mennyi elemet választottunk ki Fontos tudni, hogy DOM vagy jQuery elemet kapunk $("div").length; $("div").get(2); $("div")[2] DOM $("div").eq(2); jQuery

19 each (fn) Az each(fn) végighívja a megadott függvényt a lista minden elemén A függvény tartalmazhatja a sorszámot, de nem kötelező. fn() vagy fn( index ) Egy tábla minden páros sorához hozzáadja az odd css osztályt $("table tr").each( function(i){ if (i % 2) $(this).addClass("paros"); });

20 HTML bejárást segítő függvények
Szülő(k): .parent(expr) .parents(expr) Testvérek: .siblings(expr) Következő testvér(ek): .next(expr) .nextAll(expr) Előző testvér(ek): .prev(expr) .prevAll(expr) Gyerekek: .children(expr) Leszármazottak: .find(expr)

21 Mit csinál az alábbi kód?
$("tr td").each( function(){ if ( $(this).is(":first-child") ) $(this).addClass("firstCol"); }); $("p").find(".header").hide(); $(".header", $("p")).show();

22 Mennyire láncolható? $("<li><a></a></li>")
.find("a") .html("About") .attr("href", "/Home/About") .andSelf() .addClass("menu") .end() .end() .appendTo("#menu");

23 HTML manipuláció

24 HTML elemek értéke val(), html(), text()
Jelölőnégyzet értékének lekérdezése $("input:checkbox:checked").val(); Szövegdoboz értékének beállítása $(":text[name='txt']").val("Hello"); Listaelemek beállítása (kiválasztás, vagy bejelölés) $("#lst").val(["NY", "IL", "NS"]); HTML tartalom beállítása $("p").html("<div>Hello $!</div>"); $("div.a").text($("div.b").html());

25 CSS osztályok manipulálása
addClass(), removeClass(), toggleClass(), hasClass() CSS osztály hozzáadás és leszedése $("p").removeClass("blue").addClass("red"); $("div").toggleClass("main"); Lekérdezés, hogy rendelkezik-e egy CSS osztállyal if ($("div").hasClass("main")) { //… } CSS attribútum lekérdezése / beállítása $("div").css("background-color"); $("div").css("float", "left");

26 HTML elemek beszúrása / módosítása
append(), prepend(), replaceWith(), replaceAll() Új HTML elem beszúrása: append(To) / prepend(To) $("h1").append("<li>Hello $!</li>"); $("<li/>").html("1").prependTo("ul"); HTML elem lecserélése $("h1").replaceWith("<div>Hello</div>"); $("<div>Hello</div>").replaceAll("h1");

27 Csere megmaradó tartalommal
$("h3").each(function() { $(this).replaceWith("<div>" + $(this).html() + "</div>"); });

28 HTML elemek törlése empty(), remove()
Kiválasztott elem tartalmának törlése $("#tableHeader").empty() Kiválasztott elemek törlése $("p.header").remove() $("p").remove(":not(.red)") Kiválasztott elemek pozíciójának módosítása $("p").remove().appendTo("#main")

29 HTML attribútumok kezelése
$("a").attr("href","home.htm"); $("button").removeAttr("disabled"); $("img").attr({"src" : "/images/smile.jpg", "alt" : "Smile" }); $("div").css({ "color" : "blue", "margin-right" : "10px" marginLeft : "10px"});

30 Alapértelmezés szerint minden pixel (px)
Szélesség és pozíció Szélesség lekérdezésének lehetőségei: Elem szélessége: .width() .height() Belső szélesség: .innerWidth() .innerHeight() Szélesség a kerettel: .outerWidth() .outerHeight() Teljes szélesség: .outerWidth(true) .outerHeight(true) Pozíció meghatározása A dokumentumtól: $("div").offset().top; A szülő elemtől: $("div").position().left; Csúszka pozíció: $(window).scrollTop(); Alapértelmezés szerint minden pixel (px)

31 HTML manipuláció

32 Események

33 jQuery események Böngésző események Dokumentum betöldősése
error(), resize(), scroll() Dokumentum betöldősése load(), ready(), unload() Esemény fel és leiratkozások (un)bind(), (un)delegate(), one(), live(), die(), trigger(), proxy Űrlap eseményei blur(), change(), focus(), select(), submit() Billentyűzet események focusin(), focusout(), keydown(), keyup(), keypress() Egér események click(), dbclick(), hover(), mousedown(), mouseup(), mouseenter(), mouseleave(), mousemove(), moseover(), toggle()

34 Feliratkozás egy elem eseményre
preventDefault(), stopPropagation(), bind(), one(), live() A false visszatérési érték ugyanaz, mintha meghívnánk a .preventDefault() és .stopPropagation() .bind() mindig lefut, .one() első lefutás után leiratkozik automatikusan az eseményről. .live() azokra az elemekre is lefut, amit később adunk az oldalhoz. A .die()-al tudjuk eltávolítani. $(document).ready(function () { $('#foo').bind('click', function (event) { alert('Katt (' + event.pageX + ', ' event.pageY + ')' ); });

35 Események delegálása A .delegate() működése hasonló a .live() műköséséhez. Annyiban tér el, hogy a gyökér elemet, amihez a handler kötődik mi adjuk meg. $("table").delegate("td", "hover", function () { $(this).toggleClass("hover"); }); $("table").each(function () { $("td", this).live("hover", function () { $(this).toggleClass("hover"); }); });

36 $("div").trigger("click");
Események kiváltása manuálisan trigger(), triggerHandler() Tetszőleges eseményt a .trigger() tud kiváltani Böngésző eseményekre is működik Saját eseményeket is kiválthatunk A .trigger()-rel kiváltott események is felgyűrűznek. A .triggerHandler()-rel is kiválthatunk eseményeket, ám Ezek nem gyűrűznek tovább és nem fut le a default eseménykezelő Csak az első egyező esemény fog lefutni $("div").trigger("click"); $("#new").click(function () { $("input").triggerHandler("focus"); });

37 jQuery események

38 AJAX és a jQuery

39 $("div").load("test.php #mainDiv");
Egy oldal letöltése .load() Egy oldal tartalmának letöltése egy HTML elembe .innerHTML-t használ, (<html>, <title>, <head> szűrés) Same origin szabály Ha adunk át paramétert, akkor POST egyébként GET. Az oldal egy darabjának letöltése is képes $("div").load("test.aspx"); $("#content").load("getcontent.aspx", {"i":"33", "type":"main" } ); $("div").load("test.php #mainDiv");

40 $.ajax() Bonyolult testre szabott AJAX-os lekérdezésekhez.
global: globális események ne süljenek el (ajaxStart/ajaxStop) dataType: xml, json(p), html, text, script bodyContent = $.ajax({ url: "script.php", global: false, type: "POST", data: ({ id: this.getAttribute('id') }), dataType: "html", async: false, success: function (msg) { alert(msg); } } ).responseText;

41 $.ajax() rövidebb / egyszerűbb formái
$.get(): HTTP GET $.post(): HTTP POST $.getScript(): Szkriptet tölt le és futtat $.getJSON(): JSON adathalmazt tölt le

42 jQuery UI Aktuális verzió: 1.8.11
Widget-ek Accordion, Autocomplete, Button, Datepicker, Dialog, Progressbar, Slider, Tabs Interakciók Draggable, Droppable, Resizable, Selectable, Sortable Effektek, animációk Segédosztályok Position

43 jQuery Templates BETA Egyirányú adatkötés sablonokkal

44 jQuery Templates <!-- Helyőrző a teljes listához -->
<ul id="movieList"></ul> <!-- Egy elem sablonja, helyőrzőkkel az adatoknak --> <script id="movieTemplate" type="text/x-jquery-tmpl"> <li><b>${Name}</b> (${ReleaseYear})</li> </script> <script type="text/javascript"> // A megjelenítendő adatok var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ]; // Renderelés $( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" );

45 jQuery Data Link http://api.jquery.com/category/plugins/data-link/
Objektumok tulajdonságainak egymáshoz kötése Ha az egyik változik, frissül a másik var hallgato = {}; // Adat objektum $("form").link(hallgato); // Kötés egy űrlaphoz $("[name=kernev]").val("Béla"); // Űrlap kitöltése alert(hallgato.kernev); // Adat objektumba bekerül

46 jQuery Template és AJAX

47 Összefoglalás Amiről szó volt… Egyszerű, könnyen tanulható
Gyorsan készíthető gazdag felhasználói felület Kész pluginek használata Kiterjeszthető ASP.NET MVC-vel is használható Ajaxos hívások esetén közvetlenül hívható controller JsonResult Folyamatosan fejlődik

48