jQuery%20on%20Rails%20Presentation

1,463 views

Published on

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

No Downloads
Views
Total views
1,463
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery%20on%20Rails%20Presentation

  1. 1. write less. do more.
  2. 2. who are we?
  3. 3. Yehuda Katz Andy Delcambre
  4. 4. How is this going to work?
  5. 5. Introduction to jQuery
  6. 6. Event Driven JavaScript
  7. 7. Labs!
  8. 8. Labs! git clone git://github.com/adelcambre/jquery-tutorial.git
  9. 9. Introduction to jQuery
  10. 10. h1 { color: #999; } UJS With jQuery $(“h1”).click(function() { $(this).fadeIn(); });
  11. 11. get some elements. but how?
  12. 12. CSS 3 plus • div • div:first • div:header • div#foo • div:last • div:animated • div.class • div:not(#foo) • div:contains(txt) • div, p, a • div:even • div:empty • div p • div:odd • div:has(p) • div > p • div:eq(1) • div:parent • div + p • div:gt(1) • div:hidden • div ~ p • div:lt(1) • div:visible
  13. 13. CSS 3 plus • div[foo] • :last-child • :reset • div[foo=bar] • :only-child • :button • div[foo!=bar] • :input • :file • div[foo^=bar] • :text • :hidden • div[foo$=bar] • :password • :enabled • div[foo*=bar] • :radio • :disabled • :nth-child(2) • :checkbox • :checked • :nth-child(even) • :submit • :selected • :first-child • :image
  14. 14. get some elements.
  15. 15. $(“table tr:nth- child(even) > td:visible”)
  16. 16. do stuff.
  17. 17. $(“div”) Returns jquery object
  18. 18. $(“div”).fadeIn() Returns jquery object
  19. 19. $(“div”).fadeIn() .css(“color”, “green”) Returns jquery object
  20. 20. we call this chaining
  21. 21. Crazy chains $(“ul.open”) // [ ul, ul, ul ] .children(“li”) // [ li, li, li ] .addClass(“open”) // [ li, li, li] .end() // [ ul, ul, ul ] .find(“a”) // [ a, a, a ] .click(function(){ $(this).next().toggle(); return false; }) // [ a, a, a ] .end(); // [ ul, ul, ul ]
  22. 22. Lab 1: Selectors •Select every other row of the table • Select the Checked checkboxes • Select the first column of the table • Select the top level of the outline • Select any links to jquery.com • Select any images that contain flowers
  23. 23. 5 parts of jquery dom events effects ajax plugins
  24. 24. dom traversal $(“div”).parent(); $(“div”).siblings(); $(“div”).next(); $(“div”).nextAll(“p”); $(“div”).nextAll(“p:first”); dom
  25. 25. $(“div”) <body> <div> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  26. 26. $(“div#foo”).siblings() <body> <div id='foo'> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  27. 27. $(“div”).next() <body> <div> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  28. 28. $(“div”).nextall(“p”) <body> <div id='foo'> <p> <p> <pre> <p> dom
  29. 29. $(“div”).nextall(“p: rst”) <body> <div id='foo'> <p> <p> <pre> <p> dom
  30. 30. nd $(“div pre”) $(“div”).find(“pre”) dom
  31. 31. $(“div pre”) <body> <div> <div> <pre> <p> <pre> <pre> <p> <pre> <p> dom
  32. 32. $(“div”). nd(“pre”) <body> <div> <div> <pre> <p> <pre> <pre> <p> <pre> <p> dom
  33. 33. lter $(“div:contains(some text)”) $(“div”).filter(“:contains(some text)”) $(“div”).filter(function() { return $(this).text().match(“some text”) }) dom
  34. 34. andSelf() $(“div”).siblings().andSelf() $(“div”).parent().andSelf() dom
  35. 35. $(“div”).siblings().andself() <body> <div id='foo'> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  36. 36. $(“p”).parent().andself() <body> <div id='foo'> <div> <pre> <p> <p> <p> <p> <p> <p> dom
  37. 37. Lab 2: Traversal • Select any text areas and their labels • Any span’s parent • All of the form elements from a form that PUT’s
  38. 38. attributes $(“div”).attr(“id”) // returns id $(“div”).attr(“id”, “hello”) // sets id to hello $(“div”).attr(“id”, function() { return this.name }) $(“div”).attr({id: “foo”, name: “bar”}) $(“div”).removeAttr(“id”); dom
  39. 39. classes $(“div”).addClass(“foo”) $(“div”).removeClass(“foo”) $(“div”).toggleClass(“foo”) $(“div”).hasClass(“foo”) dom
  40. 40. other $(“div”).html() $(“div”).html(“<p>Hello</p>”) $(“div”).text() $(“div”).text(“Hello”) $(“div”).val() $(“div”).val(“Hello”) dom
  41. 41. noticing a pattern?
  42. 42. manipulation $(“div”).append(“<p>Hello</p>”) $(“<p>Hello</p>”).appendTo(“div”) $(“div”).after(“<p>Hello</p>”) $(“<p>Hello</p>”).insertAfter(“div”) dom
  43. 43. way more... http://docs.jquery.com http://api.jquery.com dom
  44. 44. Lab 3: Manipulation Note: Use the Lab 2 File again • Add CSS4 to the list after CSS3 • Remove any images with Dogs • Turn the ruby row red • Add some default text to the input field
  45. 45. 5 parts of jquery dom events effects ajax plugins
  46. 46. document ready $(document).ready(function() { ... }) Alias: jQuery(function($) { ... })
  47. 47. bind $(“div”).bind(“click”, function() { ... }) Alias: $(“div”).click(function() { ... })
  48. 48. “this” bound refers to the element
  49. 49. e $(“div”).click(function(e) { ... })
  50. 50. corrected event object Property Correction target The element that triggered the event (event delegation) relatedTarget The element that the mouse is moving in (or out) of pageX/Y The mouse cursor relative to the document which mouse: 1 (left) 2 (middle) 3 (right) keypress: The ASCII value of the text input metaKey Control on Windows and Apple on OSX
  51. 51. trigger $(“div”).trigger(“click”) Alias: $(“div”).click()
  52. 52. triggerHandler doesn’t trigger the browser’s default actions
  53. 53. custom events $(“div”).bind(“myEvent”, function() { ... }) $(“div”).trigger(“myEvent”)
  54. 54. hover $(“div”).hover(function() { ... }, function() { ... })
  55. 55. toggle $(“div”).toggle(function() { ... }, function() { ... })
  56. 56. 1.3 live $(“div”).live(“click”, function() { ... })
  57. 57. 5 parts of jquery dom events effects ajax plugins
  58. 58. Fades $(“div”).fadeIn() $(“div”).fadeOut(“slow”)
  59. 59. slides $(“div”).slideUp(200) $(“div”).slideDown(“slow”)
  60. 60. animate $(“div”).animate({height: “toggle”, opacity: “toggle”}) $(“div”).animate({fontSize: “24px”, opacity: 0.5}, {easing: “expo”})
  61. 61. Lab 4: Events and Effects Note: Use the Lab 2 File again • Fade out all of the divs • Make each img grow when you mouseover them (and shrink again after you leave) • Make clicking an li collapse the sub list
  62. 62. 5 parts of jquery dom events effects ajax plugins
  63. 63. make easy things easy $(“div”).load(“some_url”); $(“div”).load(“some_url”, {data: “foo”}, function(text) { ... });
  64. 64. it’s easy to do it right $.getJSON(“some_url”, function(json) { ... }) $.getJSON(“some_url”, {data: “foo”}, function(json) { ... })
  65. 65. it’s consistent $.get(“some_url”, function(text) { ... }) $.post(“some_url”, {data: “foo”}, function(text) { ... })
  66. 66. and powerful $.ajax Options • async • global • beforeSend • ifModi ed • cache • jsonp • complete • processData • contentType • success • data • timeout • dataType • type • error
  67. 67. and powerful global ajax settings /* No Ajax requests exist, and one starts */ $(“div.progress”).ajaxStart(function() { $(this).show() }); /* The last Ajax request stops */ $(“div.progress”).ajaxStop(function() { $(this).hide() }); /* Any Ajax request is sent */ $(“p”).ajaxSend(function() { ... }); /* Any Ajax request completes (success or failure) */ $(“div”).ajaxComplete(function() { ... }); /* Any Ajax request errors out */ $(“div”).ajaxError(function() { ... }); /* Any Ajax request succeeds */ $(“div”).ajaxSucccess(function() { ... });
  68. 68. 5 parts of jquery dom events effects ajax plugins
  69. 69. there are hundreds
  70. 70. which are important?
  71. 71. jquery ui • Draggables • Accordion • Droppables • Date Picker • Sortables • Dialog • Selectables • Slider Widgets • Resizables • Tabs Primitives http://ui.jquery.com
  72. 72. jquery one easy step: ajaxify a form in forms $(“form.remote”).ajaxForm() http://www.malsup.com/jquery/form/
  73. 73. form validation specify validation rules in your markup http://bassistance.de/jquery- plugins/jquery-plugin-validation/
  74. 74. BASE metadata plugin specify metadata for elements in markup <div data=”{some: ‘data’}”> $(“div”).metadata().some // returns ‘data’ http://jqueryjs.googlecode.com/svn/ trunk/plugins/metadata/
  75. 75. Event Driven JavaScript
  76. 76. http://github.com/ wycats/blue-ridge
  77. 77. jQuery on Rails
  78. 78. jQuery and RJS
  79. 79. Rails 3
  80. 80. Ajax and Rails $.getJSON(“/rails/action”)
  81. 81. Ajax and Rails respond_to do |format| format.json { render :json => obj } end
  82. 82. link_to_remote link_to_remote "Delete this post", :update => "posts", :url => { :action => "destroy", :id => post.id }
  83. 83. link_to_remote link_to "Delete this post", url(:action => "destroy", :id => post.id), :rel => "#posts"
  84. 84. link_to_remote $(‘a.remote’).live(“click”, function() { $(this.rel).load(this.href) });
  85. 85. form_remote_tag <% form_remote_tag :url => ..., :update => “res” do -%> <% form_tag :url => ..., :rel => “#res” do -%>
  86. 86. form_remote_tag $(‘form’).each(function() { $(this).ajaxForm({ target: this.rel }) })
  87. 87. observe_ eld <%= var lastTime = new Date; observe_field :suggest, $('#suggest') :url => { .live(“keyup”, function() { :action => :find }, if(new Date - lastTime > 250) { :frequency => 0.25, var field = $('#suggest'); :update => :suggest, var url = field.attr('rel'); :with => 'q' field.load(url, %> {q: field.val()}); } lastTime = new Date; });
  88. 88. periodically_call_remote periodically_call_remote( setInterval(function() { :url => { $('#avg') :action => 'avgs' }, .load('/some/avgs'); :update => 'avg', }, 20000); :frequency => '20')

×