Pimp your site with jQuery!
Upcoming SlideShare
Loading in...5
×
 

Pimp your site with jQuery!

on

  • 2,497 views

It looked a lot nicer on the day. I blame you, and your miserable font collection.

It looked a lot nicer on the day. I blame you, and your miserable font collection.

Statistics

Views

Total Views
2,497
Views on SlideShare
2,491
Embed Views
6

Actions

Likes
1
Downloads
8
Comments
0

2 Embeds 6

http://www.slideshare.net 5
http://21law.co.kr 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Pimp your site with jQuery! Pimp your site with jQuery! Presentation Transcript

  • Pimp your site using
  • About me @elliottkember Freelance developer Rails, jQuery
  • Why jQuery? it's fast it's widely-adopted its great dev community its excellent cross-browser support
  • Getting started Download from jQuery.com or host with Google Code
  • Getting started Download from jQuery.com curl -O http://code.jquery.com/jquery-1.4.2.min.js javascripts or host with Google Code <script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script> google.load("jquery", "1.4.2"); google.load("jqueryui", "1.8.0"); google.load("prototype", "1.6.1.0"); google.load("scriptaculous", "1.8.3"); google.load("mootools", "1.2.4"); google.load("dojo", "1.4.1"); google.load("swfobject", "2.2"); google.load("yui", "2.8.0r4"); google.load("ext-core", "3.1.0");
  • $
  • First things first CSS1-2 selectors... $(‘#content’) $(‘#content div’) $(‘#content div.hidden’)
  • That’s not all...
  • That’s not all... CSS3 selectors! $(‘div[rel=external]’) OMF G! $(‘div:empty’) $(‘div:not(.hidden)’)
  • Events $(‘#content div’).click(event); $(‘#content div’).click( function(){ // do things here } );
  • More events than Foursquare
  • More events than Foursquare .bind() .keydown() .one() .blur() .keypress() .ready() .change() .keyup() .resize() .click() .live() .scroll() .dblclick() .load() .select() .delegate() .mousedown() .submit() .die() .mouseenter() .toggle() .error() .mouseleave() .trigger() .focus() .mousemove() .triggerHandler() .focusin() .mouseout() .unbind() .focusout() .mouseover() .undelegate() .hover() .mouseup() .unload() http://api.jquery.com/category/events/
  • More events than Foursquare .bind() .keydown() .one() .blur() .keypress() .ready() .change() .keyup() .resize() .click() .live() .scroll() .dblclick() .load() .select() .delegate() .mousedown() .submit() .die() .mouseenter() .toggle() .error() .mouseleave() .trigger() .focus() .mousemove() .triggerHandler() .focusin() .mouseout() .unbind() .focusout() .mouseover() .undelegate() .hover() .mouseup() .unload() http://api.jquery.com/category/events/
  • .click() handler (it’s like onClick but way way nicer) $(this).click(function(){ alert(‘a’) });
  • but I want TWO events! $(this).toggle(function(){ alert(‘a’) }, function(){ alert(‘b’) });
  • what about that AJAX thing? $.ajax() $.post() $.get() $.getScript() and $.getJSON()
  • Using AJAX $.ajax({ url: '/notes/new', type: 'POST', success: function(data){ alert(data); }
  • Using AJAX $.get('/notes/new', function(){ alert(data); $.post('/notes/new', function(){ alert(data); $.ajax();
  • .load() is special $(‘#content’).load('/notes', function(){ // This is where the magic happens! });
  • .load() is special $(‘a[rel=browser]’).click(function(e){ e.stopPropagation(); e.preventDefault(); $('#browser') .addClass('loading') .load($(this).attr('href'), function(){ $('#browser').removeClass('loading') });
  • .load() is special $('a[href^='/']').click(function(e){ e.stopPropagation(); e.preventDefault(); $('#browser') .addClass('loading') .load($(this).attr('href'), function(){ $('#browser').removeClass('loading') });
  • .load() is special $('a[href^='/']').click(function(e){ e.stopPropagation(); e.preventDefault(); $('#browser') .addClass('loading') .load($(this).attr('href'), function(){ $('#browser').removeClass('loading') });
  • .load() is special $('a[href^='/']').click(function(e){ e.stopPropagation(); e.preventDefault(); $('#browser') .addClass('loading') .load($(this).attr('href') + ' #browser', function(){ $('#browser').removeClass('loading') });
  • .load() is special $('a[href^='/']').click(function(e){ e.stopPropagation(); e.preventDefault(); $('#browser') .addClass('loading') .load($(this).attr('href') + ' #browser', function(){ $('#browser').removeClass('loading') });
  • .load() is special $('#browser') .load($(this).attr('href') + ' #browser') .load('/notes #browser')
  • .load() is special $('#browser') .load($(this).attr('href') + ' #browser') .load('/notes #browser')
  • .load() is special $('#browser').load('/notes #browser')
  • .load() is special $('#browser').load('/notes #browser')
  • When you’re ready... $( ‘document’).ready( function(){ // This is where the magic happens! } );
  • When you’re ready... $( ‘document’).ready( function(){ // This is where the magic happens! } );
  • When you’re ready... $(function(){ // This is where the magic happens! } );
  • When you’re ready... $(function(){ // This is where the magic happens! } );
  • Functiony goodness $(‘#content’).show() $(‘#content’).hide() $(‘#content’).fadeOut() $(‘#content’).fadeIn()
  • Each! $(‘ul#items li’).each(...) a function goes here!
  • Each! $(‘ul#items li’).each(function(){ // In here, we can do what we want. // Use “this” to mess with this <li>. // Or $(this) if you want to use jQuery-fu on it! $(this).hide() })
  • but wait... $(this).hide()
  • jQuery can CHAIN. $(this).hide()
  • jQuery can CHAIN. $(this).hide()
  • jQuery can CHAIN. $(this).hide().show()
  • jQuery can CHAIN. $ (this).hide().show().css(‘float’, ‘left’)
  • jQuery can CHAIN. $(this) .hide() .show() .css(‘float’, ‘left’) .wrap(‘<li class=“item”/>’) .click( function(){ alert(‘a’)
  • jQuery can CHAIN. $(this) .hide() // hide .show() // show again .css(‘float’, ‘left’) // Do some CSS .wrap(‘<li class=“item”/>’) // wrap in <li>s .click( // add a click handler function(){ // which... alert(‘a’) // alerts ‘a‘!
  • I know this looks frightening. It just takes practice.
  • A stroll through the DOM $(‘form.new_item’) .parents(‘div.form’) .find(‘li.description’) .find(‘a.name’) .children(‘span.surname’)
  • A stroll through the DOM $(‘form.new_item’) .parents(‘div.form’) .find(‘li.description’) .find(‘a.name’) .children(‘span.surname’) This is called “traversing”.
  • jQuery UI makes things fly around
  • .animate() $(‘li:first’).animate({ ‘margin-left’ : ‘30px’ }, 1000)
  • .animate() $('li:first').animate({ 'margin-left' : '-=150px ' }, 1000)
  • .animate() $('li:first').animate({ 'margin-left' : '-=150px' }, 1000)
  • $(".block").toggle(function() { $(this).animate({ backgroundColor : "black" }, 1000); }, function() { $(this). animate({ backgroundColor : "#68BFEF"
  • .toggleClass() $('li:first').toggleClass(class, duration)
  • .toggleClass() $('li:first').toggleClass('selected', 1000)
  • Interactions Draggable Droppable Resizable Selectable Sortable
  • Interactions Draggable Droppable Resizable Selectable Sortable
  • disabled distance addClasses grid Draggable handle appendToElement axis helper Droppable cancel iframeFix Resizable connectToSortabl opacity e refreshPositions Selectable containment revert cursor revertDuration Sortable cursorAtObject scope delay scroll
  • A menu $(‘li a’).hover( function(){ $(this).fadeTo(1000, 1); }, function(){ $(this).fadeTo(1000, 0.5); }
  • $('ul#menu li').hover( function(){ $(this).find('ul').fadeTo(1000, 1); }, function(){ $(this).find('ul').fadeTo(1000, 0.5); } ).find('ul').fadeTo(0, 0.5);
  • $('ul#menu li').hover( function(){ $(this).find('ul').stop().fadeTo(1000, 1); }, function(){ $(this).find('ul').stop().fadeTo(1000, 0.5); } ).find('ul').fadeTo(0, 0.5);
  • Plugins are where the magic REALLY happens. "Results 1 - 10 of about 2,260,000 for jquery plugins."
  • Fancybox / Facybox
  • Form Plugin Easy validation, AJAXification of forms. $('#myForm').ajaxForm(function() {  alert('Thank you for your comment!');  }); http://jquery.malsup.com/form/#ajaxForm
  • jquery.example.js Gives your input fields default values! http://github.com/mudge/jquery_example
  • Using Rails? Use jRails! http://github.com/aaronchi/jrails
  • CA VE
  • CA VE
  • BE CAREFUL
  • BE CAREFUL
  • jQuery is like lipstick
  • don’t overdo it.