• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery
 

jQuery

on

  • 1,584 views

 

Statistics

Views

Total Views
1,584
Views on SlideShare
1,583
Embed Views
1

Actions

Likes
0
Downloads
20
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery jQuery Presentation Transcript

    • jQuery + Ruby + Rails AppFolio - September 2007 Yehuda Katz (yehudakatz.com)
    • What is jQuery? • An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
    • Why jQuery? • Fully documented • Great community • Tons of plugins • Small size (14kb) • Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
    • Complete Focus: • Find some elements • Do something with them
    • Find Some Elements... • CSS 1-3 Support • Basic XPath via a Plugin • Better CSS support than most browsers
    • $(“div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    • $(“#body”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    • $(“div > div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    • $(“div:has(div)”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
    • Features • Events (click, hover, toggle, namespaces) • DOM Manipulation (append, prepend, remove) • Effects%/em, colors) slideDown, fadeOut, stop, relative, queues, (hide, show, • AJAX (load, get, post, XD, JSONP)
    • Events • $(“form input:last”).click(function(){ $(“#menu”).slideDown(“slow”); });
    • Live Events • $(“form input:last”).livequery(“click, function(){ $(“#menu”).slideDown(“slow”); }); • With LiveQuery Official Plugin
    • DOM Manipulation • $(“a[target]”) .append(“ (Opens in New Window)”); • $(“#body”).css({ border: “1px solid green”, height: “40px” });
    • Effects • $(“#menu”).slideDown(“slow”); • $(“div”).hide(500,function(){ $(this).show(500); });
    • Relative Animations • $(“#foo”).animate({ left: “+50px” top: “-50px” }, “slow”)
    • AJAX • $(“#body”).load(“sample.html”); • $(“#body”).load(“sample.html #foo”); • $.getScript(“test.js”); • $.getScript(“http://jquery.com/jquery.js”);
    • Chaining • $(“div”).hide(); • $(“div”).hide().color(”blue”); • $(“div”).hide().color(”blue”).slideDown();
    • Live Demo
    • Accordion Menu
    • Plugins • Drag and Drop • Sortables • Tabbed Navigation • Sortable Tables • And hundreds more... • http://jquery.com/plugins
    • Community • Very active mailing list • 140+ Posts/Day • 2500+ Members • Technorati: 22+ blog posts per day
    • Who uses jQuery? • IBM • BBC • MSNBC • SourceForge • Amazon • Intuit • AOL • Salesforce • Technorati • FeedBurner • Drupal • WB Records • Wordpress • Linux.com • Digg • many others...
    • Books • 4 Books in Progress: • Learning jQuery (Packt) • jQuery Reference (Packt) • jQuery Quickly (Manning) • Designing with jQuery (Manning)
    • Future • “jQuery UI” - Next Sunday! • Themeing • Internationalization
    • Using jQuery with Rails • Most jQuery use is not different than normal jQuery use • $(“div”).remove(); // works on any site • Considerations come mainly in with dealing with Ajax requests
    • 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
    • Ajax with jQuery • Typically, you’ll reply with an HTML chunk • jQuery handles this gracefully: $(“#stuff”).load(“/controller/action”);
    • 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 #=>
    • Where does the JS go? • jQuery dictates good separation of content, style, and behavior • Put all your code in application.js (just like style.css) • jQuery and Prototype can play nicely together: jQuery.noConflict(); jQuery(function($){ /* your code */ });
    • 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
    • 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>
    • jQuery & RJS • jQuery Doesn’t Agree with the philosophy that produced RJS • Send data, not code
    • 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) })
    • 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", remote_link "Update call it as: :action => "bar"}, "#baz"
    • You still have your helpers :)
    • jQuery on Rails • Mainly Proof-of-Concept • Uses Hpricot to select jQuery snippets • Includes (POC) helpers for • Tab field • Sortable table • More coming
    • 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/
    • jquery.com docs.jquery.com - jquery.com/plugins More: visualjquery.com learningjquery.com