Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

IT-DEV-CON – 2011. 04. 06. Professzionális kliens oldali webfejlesztés jQuery alapokon Gincsai Gábor BME - AAIT.

Hasonló előadás


Az előadások a következő témára: "IT-DEV-CON – 2011. 04. 06. Professzionális kliens oldali webfejlesztés jQuery alapokon Gincsai Gábor BME - AAIT."— Előadás másolata:

1 IT-DEV-CON – Professzionális kliens oldali webfejlesztés jQuery alapokon Gincsai Gábor BME - AAIT

2 IT-DEV-CON 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 Miről lesz szó…

3 IT-DEV-CON 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 Kis történelem The Write Less, Do More, JavaScript Library John Resig

4 IT-DEV-CON 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 Első használat előtti teendők

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

6 IT-DEV-CON Hogyan használjuk mindezt hatékonyan?

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

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

9 IT-DEV-CON Leszármazottak ( ) $("#row1 td") Hierarchikus selectorok ABC A B C

10 IT-DEV-CON Leszármazottak ( ) $("#row1 td") Gyerekek (>) $("tr > td") Hierarchikus selectorok ABC A B C

11 IT-DEV-CON Leszármazottak ( ) $("#row1 td") Gyerekek (>) $("tr > td") Következő (+): $("#cellBB + td") Hierarchikus selectorok ABC A B C

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

13 IT-DEV-CON 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']") Szűrések

14 IT-DEV-CON 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 IT-DEV-CON Legördülő menü kiválasztott elem Budapest Nyíregyháza Debrecen $("select[name='cities'] option:selected").val()

16 IT-DEV-CON Selectorok és filterek

17 IT-DEV-CON HTML dokumentum bejárása

18 IT-DEV-CON 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 jQuery vagy DOM elem $("div").length; $("div").get(2); $("div")[2] $("div").get(2); $("div")[2] $("div").eq(2);

19 IT-DEV-CON 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 each (fn) $("table tr").each( function(i){ if (i % 2) $(this).addClass("paros"); }); $("table tr").each( function(i){ if (i % 2) $(this).addClass("paros"); });

20 IT-DEV-CON 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) HTML bejárást segítő függvények

21 IT-DEV-CON 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 IT-DEV-CON Mennyire láncolható? $(" ").find("a").html("About").attr("href", "/Home/About").andSelf().addClass("menu").end().end().appendTo("#menu");

23 IT-DEV-CON HTML manipuláció

24 IT-DEV-CON 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(" Hello $! "); $("div.a").text($("div.b").html()); HTML elemek értéke val(), html(), text()

25 IT-DEV-CON 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 " ); CSS osztályok manipulálása addClass(), removeClass(), toggleClass(), hasClass()

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

27 IT-DEV-CON Csere megmaradó tartalommal $("h3").each(function() { $(this).replaceWith(" " + $(this).html() + " "); });

28 IT-DEV-CON 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") HTML elemek törlése empty(), remove()

29 IT-DEV-CON 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 IT-DEV-CON 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) Szélesség és pozíció

31 IT-DEV-CON HTML manipuláció

32 IT-DEV-CON Események

33 IT-DEV-CON Böngésző események 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() jQuery események

34 IT-DEV-CON 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. Feliratkozás egy elem eseményre preventDefault(), stopPropagation(), bind(), one(), live() $(document).ready(function () { $('#foo').bind('click', function (event) { alert('Katt ('+ event.pageX + ', ' + event.pageY + ')' ); }); $(document).ready(function () { $('#foo').bind('click', function (event) { alert('Katt ('+ event.pageX + ', ' + event.pageY + ')' ); });

35 IT-DEV-CON 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. Események delegálása $("table").delegate("td", "hover", function () { $(this).toggleClass("hover"); }); $("table").delegate("td", "hover", function () { $(this).toggleClass("hover"); }); $("table").each(function () { $("td", this).live("hover", function () { $(this).toggleClass("hover"); }); }); $("table").each(function () { $("td", this).live("hover", function () { $(this).toggleClass("hover"); }); });

36 IT-DEV-CON 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 Események kiváltása manuálisan trigger(), triggerHandler() $("div").trigger("click"); $("#new").click(function () { $("input").triggerHandler("focus"); });

37 IT-DEV-CON jQuery események

38 IT-DEV-CON AJAX és a jQuery

39 IT-DEV-CON Egy oldal tartalmának letöltése egy HTML elembe.innerHTML-t használ, (,, 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 Egy oldal letöltése.load() $("div").load("test.aspx"); $("#content").load("getcontent.aspx", {"i":"33", "type":"main" } ); $("div").load("test.aspx"); $("#content").load("getcontent.aspx", {"i":"33", "type":"main" } ); $("div").load("test.php #mainDiv");

40 IT-DEV-CON 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 $.ajax() bodyContent = $.ajax({ url: "script.php", global: false, type: "POST", data: ({ id: this.getAttribute('id') }), dataType: "html", async: false, success: function (msg) { alert(msg); } } ).responseText; 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 IT-DEV-CON $.get(): HTTP GET $.post(): HTTP POST $.getScript(): Szkriptet tölt le és futtat $.getJSON(): JSON adathalmazt tölt le $.ajax() rövidebb / egyszerűbb formái

42 IT-DEV-CON 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 jQuery UI Aktuális verzió:

43 IT-DEV-CON Egyirányú adatkötés sablonokkal jQuery Templates BETA

44 IT-DEV-CON jQuery Templates ${Name} (${ReleaseYear}) // 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 IT-DEV-CON Objektumok tulajdonságainak egymáshoz kötése Ha az egyik változik, frissül a másik jQuery Data Link 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 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 IT-DEV-CON jQuery Template és AJAX

47 IT-DEV-CON 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 Összefoglalás Amiről szó volt…

48 IT-DEV-CON


Letölteni ppt "IT-DEV-CON – 2011. 04. 06. Professzionális kliens oldali webfejlesztés jQuery alapokon Gincsai Gábor BME - AAIT."

Hasonló előadás


Google Hirdetések