jQuery y Rails - Take a walk on the wild side

Transcript

1. jQuery y Rails “Take a walk on the wild side” Christos Zisopoulos jobandtalent.com
2. ¿Quien soy?
3. ¿Quien soy? Soy un desarrollador de Rails (como la mayoría de vosotros, me imagino)
4. ¿Quien soy? Pero a veces toca hacer Javascript (el síndrome del “lone developer”)
5. ¿Quien soy? Una confesión: Me gusta Javascript (pero odio a los navegadores)
6. ¿Que es? Es una librería Javascript para manipulación sofisticada del DOM independiente del navegador.
7. La filosofía
8. Encontrar algo... (casi todo es un objeto jQuery)
9. Encontrar algo... $('div.info p:first') (casi todo es un objeto jQuery)
10. ...y hacer algo con ello $('div.info p:first') .text('Todo bien!') .css('color', 'green') .fadeIn()
11. Encontrar algo <div> <p><span>...</span></p> <p><div><strong>Hola</strong></div></p> <p>...</p> <p>...</p> </div>
12. $('div'); <div> <p><span>...</span></p> <p><div><strong>Hola</strong></div></p> <p>...</p> <p>...</p> </div>
13. $('div:first'); <div> <p><span>...</span></p> <p><div><strong>Hola</strong></div></p> <p>...</p> <p>...</p> </div>
14. $('p:last'); <div> <p><span>...</span></p> <p><div><strong>Hola</strong></div></p> <p>...</p> <p>...</p> </div>
15. $('p:gt(2)'); <div> <p><span>...</span></p> <p><div><strong>Hola</strong></div></p> <p>...</p> <p>...</p> </div>
16. $('strong:contains(Hola)'); <div> <p><span>...</span></p> <p><div><strong>Hola</strong></div></p> <p>...</p> <p>...</p> </div>
17. CSS selectors #id, tag, .class, * ancestor descendant parent > child prev + next prev ~ siblings E[@attr] E[@attr=val] E[@attr^=val] E[@attr$=val] E[@attr*=val] E[@attr=val][@attr=val]
18. CSS selectors #id, tag, .class, * ancestor descendant parent > child prev + next prev ~ siblings E[@attr] E[@attr=val] E[@attr^=val] E[@attr$=val] E[@attr*=val] E[@attr=val][@attr=val]
19. CSS selectors :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :contains(text) :empty :has(selector) :parent :nth-child(index) :first-child :last-child :only-child
20. CSS selectors :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :contains(text) :empty :has(selector) :parent :nth-child(index) :first-child :last-child :only-child
21. CSS selectors :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden :enabled :disabled :checked :selected :hidden :visible :header :animated
22. CSS selectors :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden :enabled :disabled :checked :selected :hidden :visible :header :animated
23. ...y hacer algo. <div> <p><span>...</span></p> <p><div><strong>Hola</strong></div></p> <p>...</p> <p>...</p> </div>
24. $('div:first').slideDown(); <div> <p><span>...</span></p> <p><div><strong>Hola</strong></div></p> <p>...</p> <p>...</p> </div>
25. $('p:last').css('color', 'red'); <div> <p><span>...</span></p> <p><div><strong>Hola</strong></div></p> <p>...</p> <p>...</p> </div>
26. $('strong:contains(Hola)'). wrap('<em></em>'); <div> <p><span>...</span></p> <p><div><em><strong>Hola</strong><em></div></p> <p>...</p> <p>...</p> </div>
27. <div> <p><span>...</span></p> <p><div><strong>Hola</strong></div></p> <p>...</p> <p>...</p> </div> $('p:even'). css('background-color', 'grey');
28. ¿Que se puede hacer? Atravesar Manipular Eventos Efectos AJAX
29. Atravesar .hasClass(class) .filter(expr) .is(expr) .map(callback) .not(expr) .slice(start, end) .add(e) .children(e) .siblings(e) .contents() .find(e) .next(e), .nextAll(e) .prev(e), .prevAll(e) .each(callback) .size(), .length .get(), .get(index) .index(subject) .andSelf() .end()
30. Atravesar .hasClass(class) .filter(expr) .is(expr) .map(callback) .not(expr) .slice(start, end) .add(e) .children(e) .siblings(e) .contents() .find(e) .next(e), .nextAll(e) .prev(e), .prevAll(e) .each(callback) .size(), .length .get(), .get(index) .index(subject) .andSelf() .end()
31. Manipular .append(c) .appendTo(elem) .prepend(c) .prependTo(elem) .wrap(html) .wrap(elem) .wrapAll(html) .wrapAll(elem) .wrapInner(html) .wrapInner(elem) .after(c), .before(c) .insertAfter(c) .insertBefore(c) .replaceWith(c) .replaceAll(selector) .empty() .remove(expr) .clone(), clone(true)
32. Manipular .append(c) .appendTo(elem) .prepend(c) .prependTo(elem) .wrap(html) .wrap(elem) .wrapAll(html) .wrapAll(elem) .wrapInner(html) .wrapInner(elem) .after(c), .before(c) .insertAfter(c) .insertBefore(c) .replaceWith(c) .replaceAll(selector) .empty() .remove(expr) .clone(), clone(true)
33. Manipular .css(name) .css(name, value) .css(properties) .html() .html(value) .text() .text(value) .val() .val(value) .attr(name) .attr(name, value) .attr(name, function) .attr(properties) .removeAttr(name) .addClass(class) .removeClass(class) .toggleClass(class) .offset()
34. Manipular .css(name) .css(name, value) .css(properties) .html() .html(value) .text() .text(value) .val() .val(value) .attr(name) .attr(name, value) .attr(name, function) .attr(properties) .removeAttr(name) .addClass(class) .removeClass(class) .toggleClass(class) .offset()
35. Eventos
36. $('a.remote').bind('click', function(e) {...}); $('p').one('dblclick', function(e) {...}); $('p > a.remote').bind('mouseover', function(e) {...});
37. $('div') .bind('mySpecialEvent', function(e) {...}); $('div') .trigger('mySpecialEvent');
38. $("p").click(function () { $(this).slideUp(); }); $("p").hover(function () { $(this).addClass("hilite"); }, function () { $(this).removeClass("hilite"); });
39. Eventos .bind(type, data, fn) .one(type, data, fn) .trigger(type, data) .triggerHandler(type, data) .unbind(type, data) .load(fn), .resize(fn) .scroll(fn) .ready(fn) .error(), .error(fn) .mousedown(fn) .mouseup(fn) .mouseout(fn) .mousover(fn) .mousemove(fn) .keydown() .keydown(fn) .keyup() .keyup(fn) .keypress() .keypress(fn)
40. Eventos .bind(type, data, fn) .one(type, data, fn) .trigger(type, data) .triggerHandler(type, data) .unbind(type, data) .load(fn), .resize(fn) .scroll(fn) .ready(fn) .error(), .error(fn) .mousedown(fn) .mouseup(fn) .mouseout(fn) .mousover(fn) .mousemove(fn) .keydown() .keydown(fn) .keyup() .keyup(fn) .keypress() .keypress(fn)
41. Eventos .hover(fnEnter, fnLeave) .toggle(fnOn, fnOff) .blur() .blur(fn) .unblur() .unblur(fn) .click() .click(fn) .dblclick() .dblclick(fn) .submit() .submit(fn) .focus() .focus(fn) .select() .select(fn) .unload() .unload(fn)
42. Eventos .hover(fnEnter, fnLeave) .toggle(fnOn, fnOff) .blur() .blur(fn) .unblur() .unblur(fn) .click() .click(fn) .dblclick() .dblclick(fn) .submit() .submit(fn) .focus() .focus(fn) .select() .select(fn) .unload() .unload(fn)
43. Efectos
44. Efectos .show() .show(speed, callback) .hide() .hide(speed, callback) .toggle() .slideUp() .slideUp(speed, callback) .slideDown() .slideDown(speed, callback) .fadeIn() .fadeIn(speed, callback) .fadeOut() .fadeOut(speed, callback) .fadeTo(speed, opacity, callback)
45. Efectos .show() .show(speed, callback) .hide() .hide(speed, callback) .toggle() .slideUp() .slideUp(speed, callback) .slideDown() .slideDown(speed, callback) .fadeIn() .fadeIn(speed, callback) .fadeOut() .fadeOut(speed, callback) .fadeTo(speed, opacity, callback)
46. Efectos .animate(params, duration, easing, callback) .animate(params, options) .stop() .queue() .queue(callback) .queue(queue) .dequeue()
47. $("#block").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 );
48. AJAX
49. AJAX $.ajax(options) .load(url, data, callback) .loadIfModified (url, data, callback) $.get (url, data, callback) $.post (url, data, callback) $.getJSON (url, data, callback) $.getScript (url, data, callback)
50. $.ajax({ url: "/contacts/search", {data: "q=choan"}, success: function(html){ $("#results").append(html); } });
51. $.get("/contacts/search", {data: "q=choan"}, function(html){ $("#results").append(html); } });
52. $("#results") .load("/contacts/search", data: "q=choan")
53. AJAX .ajaxComplete(callback) .ajaxSend(callback) .ajaxStart(callback) .ajaxStop(callback) .ajaxSuccess(callback) .ajaxError(callback)
54. AJAX .ajaxComplete(callback) .ajaxSend(callback) .ajaxStart(callback) .ajaxStop(callback) .ajaxSuccess(callback) .ajaxError(callback)
55. jRails - jQuery on Rails
56. Instalación ./script/plugin install \ http://ennerchi.googlecode.com/svn/trunk/plugins/jrails rake jrails:install:javascripts
57. Prototype form_remote_for form_remote_tag link_to_remote observe_field observe_form periodically_call_remote remote_form_for submit_to_remote Scriptaculous draggable_element drop_receiving_element sortable_element visual_effect RJS hide insert_html remove replace replace_html show toggle Funcionalidad “Drop In”
58. $.ajaxSetup( { data: { authenticity_token : AUTH_TOKEN } }) $.post("/todo", {_method:"put"}); $.post("/todo", _method:"put"); Caveat Emptor (#1)
59. jQuery $('#footerNav') Prototype $('footerNav') Caveat Emptor (#2)
60. Unobtrusive
61. ¿Que es?
62. Ejemplo formulario <form class='remote' action="http://search.twitter.com/search"> <input type="text" value=""> <input type="submit" value="Buscar"> </form> <div id='searchResults'> </div>
63. Ejemplo formulario $(function() { $('form.remote').each(function() { var url = $(this).attr('action'); $(this).find('input[@type=submit]:first').hide(); $(this).find('input[@type=text]:first') .keyup(function() { var query = $(this).val(); $('#searchResults').load( url + query + ' #results'); }); }); });
64. Plugins
65. Livequery $('a').livequery('click', function(event) { alert('clicked'); return false; });
66. Autocomplete var data = "blat mamuso denegro".split(" "); $("input.suggest").autocomplete(data); $("input.suggest").autocomplete("/contactos");
67. Autocomplete $("#imageSearch").autocomplete("/images", { width: 320, max: 4, highlight: false, scroll: true, scrollHeight: 300, formatItem: function(data, i, n, value) { return "<img src='images/" + value + "'/> " + value.split(".")[0]; }, formatResult: function(data, value) { return value.split(".")[0]; } });
68. Tablesorter <table id="myTable"> <thead> <tr><th>Nombre</th><th>Apellido</th><th>Email</th></tr> </thead> <tbody> <tr><td>Smith</td><td>John</td><td>jsmith@gmail.com</td></tr> <tr><td>Doe</td><td>John</td><td>jdoe@gmail.com</td></tr> <tr><td>Jack</td><td>Ripper</td><td>jripper@gmail.com</td></tr> <tbody> </table> $("#myTable").tablesorter();
69. jQuery form $('#myForm').ajaxForm(); $('#commentsForm').ajaxForm({ target: '#comments', url: '/comments', success: function() { alert('Hemos recibido tu comentario'); } });
70. jQuery UI Interaction Draggable Droppable Resizable Selectable Sortable Widgets Accordion Autocomplete Colorpicker Dialog Slider Tabs Datepicker Magnifier Progressbar Spinner Effects "Blind" "Bounce" "Clip" "Drop" "Explode" "Fold" "Highlight" "Pulsate" "Scale" "Shake" "Slide" "Transfer"
71. ¿El futuro? Sizzle + (V8, SpiderMonkey, SquirelFish)
72. ¿Preguntas?