Jquery ui, ajax

2,967 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,967
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
57
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery ui, ajax

  1. 1. Jquery UI<br />
  2. 2. jQuery UI<br />Uma API de efeitos e widgets baseada no jquery<br />http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js<br />Inicialização<br />$(...).widgetname(options)<br />Chamando métodos<br />$(...).widgetname(“methodName”, [arg1, arg2])<br />Configurando on-the-fly<br /><ul><li>$(...).widgetname(“option”, key, value)</li></li></ul><li>jQuery UI : effects<br />
  3. 3. jQuery UI: effects<br />$('p').bind('click',function(){<br /> $(this).effect('drop',{<br /> mode: 'show',<br /> direction: 'up'<br /> });<br />});<br />$('p').bind('click',function(){<br /> $(this).show('drop',{<br /> direction: 'up'<br /> });<br />});<br />$('p').bind('click',function(){<br /> $(this).hide('drop');<br />});<br />
  4. 4. jQuery UI: effects<br />$('#button').bind('click',function(){<br /> $('p').toggle('explode');<br />});<br />$('#button').bind('click',function(){<br /> $('p').toggle('explode', {<br />pieces: 16<br /> });<br />});<br />
  5. 5. jQuery UI: Interactions<br />
  6. 6. jQuery UI: Interactions<br />$('.obj').draggable();<br />$('.obj').bind('dragstart', function(){ ... });<br />$('.obj').bind('drag', function(){ ... });<br />$('.obj').bind('dragstop', function(){ ... });<br />
  7. 7. jQuery UI: Interactions<br />$('.obj').draggable({<br /> start: function(event, ui){<br /> $(this).effect('highlight');<br /> },<br />stop: function(event, ui){<br /> $(this).effect('highlight');<br /> },<br />drag: function(event, ui){ ... }<br />});<br />
  8. 8. jQuery UI: Interactions<br />$('.obj').draggable({<br />grid: [30,30],<br />opacity: 0.5,<br />containment: '#workspace',<br /> cursor: 'move',<br />disabled: true<br />}); <br />$('.obj').draggable('option', 'grid', [5, 5]);<br />$('.obj').draggable('enable');<br />
  9. 9. jQuery UI: Interactions<br />Similares para <br />Draggable<br />Droppable<br />Resizable<br />Selectable<br />Sortable<br />
  10. 10. jQuery UI: Widgets<br />
  11. 11. jQuery UI: Widgets<br />var data = ['BSD','GPL','MIT','Apache'];<br />$('input.local').autocomplete({<br /> source: data<br />});<br />$("#slider").slider();<br />
  12. 12. jQuery UI: slider<br />$('#slider').slider({<br />value: 50<br />}).bind('slidestart',function(event, ui()){<br />}).bind('slide',function(event, ui()){<br />}).bind('slidestop',function(event, ui()){<br />}).bind('slidechange',function(event, ui()){<br />});<br />
  13. 13. jQuery UI: dialog<br />$('#info').dialog();<br />$('#warning').dialog({<br />title: 'Warning'<br />autoOpen: false;<br />});<br />$('#warning').dialog('open');<br />
  14. 14. jQuery UI: widgets<br />També há widgets de<br />Accordion<br />Button<br />Datepicker<br />Progressbar<br />Tabs<br />Além do<br />Autocomplete<br />Dialog<br />Slider<br />
  15. 15. Ajax<br />Ricardo Cavalcanti<br />kvalcanti@gmail.com<br />
  16. 16. Algumas Ferramentas<br />“Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page!”<br />http://getfirebug.com<br />
  17. 17. O que é Ajax<br />Originalmente<br />“AsynchronousJavascriptAnd XML”<br />Mais geralmente<br />“Qualquer técnica que permita o cliente recuperar dados de um servidor sem precisar recarregar a página inteira”<br />
  18. 18. Por que ajax?<br />Todos os browsers incluiram suporte ao objeto XMLHttpRequest<br />O IE já tinha desde 1998<br />Jesse James Garrett arranjou um nome mais legal que XMLHttpRequest<br />
  19. 19. Pre-Ajax...<br />Diversas gambiarras<br />Appletsjava com scripts<br />Dados passados via cookies<br />Dados passados através de um iframe escondido<br />Ainda em uso O.O<br />
  20. 20. Onde se usa Ajax?<br />
  21. 21.
  22. 22.
  23. 23. Ajax: como funciona<br />http://code.google.com/intl/pt-BR/edu/ajax/tutorials/ajax-tutorial.html<br />
  24. 24. Ajax: fundamentos<br />CSS<br />Javascript<br />(X)HTML<br />DOM<br />document.getElementById...<br />el.childNodes, el.parentNode...<br />document.createElement<br />
  25. 25. CSS classswitching<br />Para fazer grandes mudanças numa página dinamicamente<br />A maioria do trabalho pode ser feito definindo classes CSS alternativas<br />E aplicando a classe trocando o className do elemento<br />
  26. 26. XMLHttpRequest<br />O objeto que permite realizar requests HTTP via javascript<br />IE utilizava um ObjectAcviveX<br />Não tem (quase) nada a ver com XML<br />Assíncrono<br />Callbacks necessários<br />
  27. 27. Ajax puro<br />var obj;<br />functionProcessXML(url) {<br />if (window.XMLHttpRequest) {// nativeobject<br />obj = newXMLHttpRequest();<br />obj.onreadystatechange = processChange;<br />obj.open("GET", url, true); // wewill do a GET withthe url; "true" for asynch<br />obj.send(null); // null for GET withnativeobject<br />} elseif (window.ActiveXObject) {// IE/Windows ActiveXobject<br />obj = newActiveXObject("Microsoft.XMLHTTP");<br />if (obj) {<br />obj.onreadystatechange = processChange;<br />obj.open("GET", url, true);<br />obj.send(); // don'tsendnull for ActiveX<br />}<br />} else {<br />alert("Your browser does notsupport AJAX");<br />}<br />}<br />
  28. 28. Callback function<br />function processChange() {<br /> if (obj.readyState == 4) {<br /> if (obj.status == 200) {<br /> // processar o objeto<br /> } else {<br /> alert(“Houston, we have a problem!");<br /> }<br /> }<br />}<br />
  29. 29. XMLHttpRequest: atributos<br />readyState<br />0: not initialized. <br />1: connection established. <br />2: request received. <br />3: processing. <br />4: finished and response is ready.<br />Status<br />200: "OK“<br />404: Page not found.<br />onreadystatechange<br />responseText<br />responseXml<br />
  30. 30. XMLHttpRequest: métodos<br />Open (mode, url, boolean)<br />Mode: GET ou POST<br />url: a url para submeter<br />boolean: true = async, false=sync<br />send(“string”)<br />null para um get<br />
  31. 31. Exemplo<br />http://www.w3schools.com/dom/dom_http.asp<br />http://www.w3schools.com/dom/tryit.asp?filename=try_dom_xmlhttprequest_xml<br />
  32. 32. JSON<br />JavascriptObjectNotation<br />Subconjunto doJavascript<br />2 estruturas<br />Um objeto<br />Um array<br />
  33. 33. JSON: estruturas<br />
  34. 34. JSON: valor<br />
  35. 35. http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?<br />
  36. 36. Um pouco de jquery<br />Um iterator<br />$.each ( collection, callback(index, item) )<br />$.each([52, 97], function(index, value) { <br /> alert(index + ': ' + value); <br />});<br />>>> 0: 52<br />>>> 1: 97<br />
  37. 37. jQuery: ajax<br />jQuery.ajax( settings )<br />$.ajax({<br />url: "test.html",<br />cache: false,<br />success: function(html){<br /> $("#results").append(html);<br /> }<br />});<br />
  38. 38. jQuery: settings<br />async: para fazer o request assíncrono (default=true)<br />url: a url para buscar os dados<br />data: dados a serem submetidos<br />dataType: inteligentguess (xml, json, script ou html)<br />type: “GET” ou “POST”<br />Callbacks<br />error(XMLHttpRequest, textStatus, errorThrown)<br />success(data, textStatus, XMLHttpRequest)<br />complete(XMLHttpRequest, textStatus)<br />
  39. 39. jQuery: Ajax: shorthands<br />jQuery.get( url, [ data ], [ callback(data, textStatus, XMLHttpRequest) ], [ dataType ] )<br />Atalho para<br />$.ajax({<br /> url: url,<br /> data: data,<br /> success: success,<br /> dataType: dataType<br />});<br />
  40. 40. jQuery: métodos ajax<br />jQuery.post( url, [ data ], [ success(data, textStatus, XMLHttpRequest) ], [ dataType ] )<br />Atalho para<br />$.ajax({<br />type: 'POST',<br /> url: url,<br /> data: data,<br />success: success<br />dataType: dataType<br />});<br />
  41. 41. jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] )<br />Atalho para<br />$.ajax({<br /> url: url,<br />dataType: 'json',<br /> data: data,<br />success: callback<br />});<br />
  42. 42. Ajax com jQuery<br />$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",<br />function(data){<br /> $.each(data.items, function(i,item){<br /> $("<img/>").attr("src", item.media.m).appendTo("#images");<br />if ( i == 3 ) returnfalse;<br /> });<br /> });<br />

×