jQuery - Boston Ruby Group (July '07)

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    10 Favorites & 1 Group

    jQuery - Boston Ruby Group (July '07) - Presentation Transcript

    1. jQuery + Ruby + Rails Boston Ruby Group - July 2007 John Resig (ejohn.org) Download this: http://dev.jquery.com/~john/files/apple-demo.zip
    2. What is jQuery? • An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
    3. Why jQuery? • Fully documented • Great community • Tons of plugins • Small size (20kb) • Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
    4. Complete Focus: • Find some elements • Do something with them
    5. Find Some Elements... • Full CSS 1-3 Support • Basic XPath • Better CSS support than most browsers
    6. $(“div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    7. $(“#body”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    8. $(“div > div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    9. $(“div[div]”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    10. Features • Events (click, hover, toggle) • DOM Manipulation (append, prepend, remove) • Effects (hide, show, slideDown, fadeOut) • AJAX (load, get, post)
    11. Events • $(“form input:last”).click(function(){ $(“#menu”).slideDown(“slow”); });
    12. DOM Manipulation • $(“a[@target]”) .append(“ (Opens in New Window)”); • $(“#body”).css({ border: “1px solid green”, height: “40px” });
    13. Effects • $(“#menu”).slideDown(“slow”); • $(“div”).hide(500,function(){ $(this).show(500); });
    14. AJAX • $(“#body”).load(“sample.html”); • $.getScript(“test.js”);
    15. Chaining • $(“div”).hide(); • $(“div”).hide().color(”blue”); • $(“div”).hide().color(”blue”).slideDown();
    16. Live Demo
    17. Accordion Menu
    18. Plugins • Drag and Drop • Sortables • Tabbed Navigation • Sortable Tables • And hundreds more...
    19. Community • Very active mailing list • 108+ Posts/Day • 2500+ Members • Technorati: 22+ blog posts per day
    20. Who uses jQuery? • IBM • MSNBC • Technorati • Drupal • Wordpress • Digg • many others...
    21. Books • 4 Books in Progress: • Learning jQuery (Packt) • jQuery Reference (Packt) • jQuery Quickly (Manning) • Designing with jQuery (Manning)
    22. Future • “jQuery UI” • Themeing • Internationalization
    23. Using jQuery with Rails • Most jQuery use is non different than normal jQuery use • $(“div”).remove(); // works on any site • Considerations come in with dealing with Ajax requests
    24. Ajax and Rails • Just another request to a controller/action • You might want to respond like so: respond_to do |format| format.js { # do stuff } end • jQuery sends the right headers so you can respond easily
    25. Ajax with jQuery • Typically, you’ll reply with an HTML chunk • jQuery handles this gracefully: $(“#stuff”).load(“controller/action”);
    26. Reply with JSON • Sometimes you’ll want to reply with a data structure for further manipulation • ActiveRecord objects have to_json serialization built in: \"{attributes:{foo: \\\"bar\\\", baz: \\\"bat\\\"}}\" • Or you can get specific: \"{foo: \\\"bar\\\", baz: \\\"bat\\\"}\" @ar_object.attributes.to_json #=>
    27. Where does the JS go? • jQuery dictates good separation of content, style, and behavior • Put all your code in application.js • jQuery and Prototype can play nicely together: jQuery.noConflict(); jQuery(function($){ /* your code */ }); • More info in the docs
    28. Where’s RJS? • RJS says that sending back code (from the server) is the best way to do things • This is overkill, simplify and extract what you’re trying to achieve
    29. RJS v. jQuery-style • With RJS: id=’myid’ onclick=”return someFunction <a href=”#” (‘myid’);”>text</a> <a href=”#” id=’myid2’ onclick=”return someFunction (‘myid2’);”>text</a> • With jQuery: <a href=”...” id=”myid”>text</a> <a href=”...” id=”myid2”>text</a> <script>$(“a”).click(someFunction);</script>
    30. Helpers • Say you have a link that makes an Ajax call and updates some div with the response: <a href='/foo/bar' rel='#baz' class='remote'>Update Baz</a> • You might write a simple line of jQuery code to handle it: $(\"a.remote\").click(function() { $(this.rel).load(this.href) })
    31. Helpers (cont.) • You could then write a Rails helper to reuse it: def remote_link text, url_hash, update = nil link_to(text, url_hash, :class => \"remote\", :rel => update) end • You could thenBaz\", {:controller => \"foo\", call it as: remote_link \"Update :action => \"bar\"}, \"#baz\"
    32. More info: • jQuery with Rails: • http://yehudakatz.com/2007/01/31/using-jquery-in-rails-part-i/ • http://yehudakatz.com/2007/05/18/railsconf-talk-recap/ • jQuery Rails Plugin: • http://yehudakatz.com/2007/05/17/jquery-on-rails-a-fresh-approach/ • http://yehudakatz.com/2007/05/25/10/ • http://yehudakatz.com/2007/05/26/jquery-on-rails-a-still-very-alpha-update/
    33. jquery.com docs.jquery.com - jquery.com/plugins More: visualjquery.com learningjquery.com

    jeresigjeresig, 2 years ago

    custom

    5079 views, 10 favs, 4 embeds more stats

    More Info

    © All Rights Reserved

    Go to text version
    • Total Views 5079
      • 4933 on SlideShare
      • 146 from embeds
    • Comments 0
    • Favorites 10
    • Downloads 251
    Most viewed embeds
    • 142 views on http://ejohn.org
    • 2 views on http://webcandies.blogspot.com
    • 1 views on http://feeds.feedburner.com
    • 1 views on http://www.zhuaxia.com

    more

    All embeds
    • 142 views on http://ejohn.org
    • 2 views on http://webcandies.blogspot.com
    • 1 views on http://feeds.feedburner.com
    • 1 views on http://www.zhuaxia.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as innappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel

    Categories

    Groups / Events