jquery
Post on 27-Jan-2015
1.266 Views
Preview:
DESCRIPTION
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.
• Fully documented
• Great community
• Tons of plugins
• Small size (14kb)
• Everything works in IE 6+, Firefox,Safari 2+, and Opera 9+
Why jQuery?
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>
• Events (click, hover, toggle, namespaces)
• DOM Manipulation (append, prepend, remove)
• Effects (hide, show, slideDown, fadeOut, stop, relative, queues, %/em, colors)
• AJAX (load, get, post, XD, JSONP)
Features
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”);
• $(“div”).hide();
• $(“div”).hide().color(”blue”);
• $(“div”).hide().color(”blue”).slideDown();
Chaining
Live Demo
Accordion Menu
Plugins
• Drag and Drop
• Sortables
• Tabbed Navigation
• Sortable Tables
• And hundreds more...
• http://jquery.com/plugins
• Very active mailing list
• 140+ Posts/Day
• 2500+ Members
• Technorati: 22+ blog posts per day
Community
Who uses jQuery?• IBM
• MSNBC
• Amazon
• AOL
• Technorati
• Drupal
• Wordpress
• Digg
• BBC
• SourceForge
• Intuit
• Salesforce
• FeedBurner
• WB Records
• Linux.com
• 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: @ar_object.attributes.to_json #=> "{foo: \"bar\", baz: \"bat\"}"
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:<a href=”#” id=’myid’ onclick=”return someFunction(‘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 then call it as:remote_link "Update Baz", {:controller => "foo", :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.comdocs.jquery.com - jquery.com/plugins
More:
visualjquery.comlearningjquery.com
top related