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 s...
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 wi...
$
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:n...
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(...
More events than
          Foursquare
.bind()           .keydown()       .one()
.blur()           .keypress()      .ready(...
.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(){
          ...
.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')
    .ad...
.load() is special
$('a[href^='/']').click(function(e){
 e.stopPropagation(); e.preventDefault();
 $('#browser')
    .addC...
.load() is special
$('a[href^='/']').click(function(e){
 e.stopPropagation(); e.preventDefault();
 $('#browser')
    .addC...
.load() is special
$('a[href^='/']').click(function(e){
 e.stopPropagation(); e.preventDefault();
 $('#browser')
    .addC...
.load() is special
$('a[href^='/']').click(function(e){
 e.stopPropagation(); e.preventDefault();
 $('#browser')
    .addC...
.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 happen...
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>...
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(
       f...
jQuery can CHAIN.
$(this)
   .hide()                            // hide
   .show()                            // show agai...
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...
A stroll through the
        DOM
  $(‘form.new_item’)
      .parents(‘div.form’)
      .find(‘li.description’)
      .find(‘...
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() {
   $(thi...
.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
             appen...
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').fad...
$('ul#menu li').hover(
  function(){
        $(this).find('ul').stop().fadeTo(1000,
1);
  }, function(){
        $(this).fin...
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...
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.
Pimp your site with jQuery!
Pimp your site with jQuery!
Pimp your site with jQuery!
Pimp your site with jQuery!
Pimp your site with jQuery!
Pimp your site with jQuery!
Pimp your site with jQuery!
Pimp your site with jQuery!
Upcoming SlideShare
Loading in...5
×

Pimp your site with jQuery!

1,746

Published on

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

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

No Downloads
Views
Total Views
1,746
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

































































































  • Transcript of "Pimp your site with jQuery!"

    1. 1. Pimp your site using
    2. 2. About me @elliottkember Freelance developer Rails, jQuery
    3. 3. Why jQuery? it's fast it's widely-adopted its great dev community its excellent cross-browser support
    4. 4. Getting started Download from jQuery.com or host with Google Code
    5. 5. 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");
    6. 6. $
    7. 7. First things first CSS1-2 selectors... $(‘#content’) $(‘#content div’) $(‘#content div.hidden’)
    8. 8. That’s not all...
    9. 9. That’s not all... CSS3 selectors! $(‘div[rel=external]’) OMF G! $(‘div:empty’) $(‘div:not(.hidden)’)
    10. 10. Events $(‘#content div’).click(event); $(‘#content div’).click( function(){ // do things here } );
    11. 11. More events than Foursquare
    12. 12. 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/
    13. 13. 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/
    14. 14. .click() handler (it’s like onClick but way way nicer) $(this).click(function(){ alert(‘a’) });
    15. 15. but I want TWO events! $(this).toggle(function(){ alert(‘a’) }, function(){ alert(‘b’) });
    16. 16. what about that AJAX thing? $.ajax() $.post() $.get() $.getScript() and $.getJSON()
    17. 17. Using AJAX $.ajax({ url: '/notes/new', type: 'POST', success: function(data){ alert(data); }
    18. 18. Using AJAX $.get('/notes/new', function(){ alert(data); $.post('/notes/new', function(){ alert(data); $.ajax();
    19. 19. .load() is special $(‘#content’).load('/notes', function(){ // This is where the magic happens! });
    20. 20. .load() is special $(‘a[rel=browser]’).click(function(e){ e.stopPropagation(); e.preventDefault(); $('#browser') .addClass('loading') .load($(this).attr('href'), function(){ $('#browser').removeClass('loading') });
    21. 21. .load() is special $('a[href^='/']').click(function(e){ e.stopPropagation(); e.preventDefault(); $('#browser') .addClass('loading') .load($(this).attr('href'), function(){ $('#browser').removeClass('loading') });
    22. 22. .load() is special $('a[href^='/']').click(function(e){ e.stopPropagation(); e.preventDefault(); $('#browser') .addClass('loading') .load($(this).attr('href'), function(){ $('#browser').removeClass('loading') });
    23. 23. .load() is special $('a[href^='/']').click(function(e){ e.stopPropagation(); e.preventDefault(); $('#browser') .addClass('loading') .load($(this).attr('href') + ' #browser', function(){ $('#browser').removeClass('loading') });
    24. 24. .load() is special $('a[href^='/']').click(function(e){ e.stopPropagation(); e.preventDefault(); $('#browser') .addClass('loading') .load($(this).attr('href') + ' #browser', function(){ $('#browser').removeClass('loading') });
    25. 25. .load() is special $('#browser') .load($(this).attr('href') + ' #browser') .load('/notes #browser')
    26. 26. .load() is special $('#browser') .load($(this).attr('href') + ' #browser') .load('/notes #browser')
    27. 27. .load() is special $('#browser').load('/notes #browser')
    28. 28. .load() is special $('#browser').load('/notes #browser')
    29. 29. When you’re ready... $( ‘document’).ready( function(){ // This is where the magic happens! } );
    30. 30. When you’re ready... $( ‘document’).ready( function(){ // This is where the magic happens! } );
    31. 31. When you’re ready... $(function(){ // This is where the magic happens! } );
    32. 32. When you’re ready... $(function(){ // This is where the magic happens! } );
    33. 33. Functiony goodness $(‘#content’).show() $(‘#content’).hide() $(‘#content’).fadeOut() $(‘#content’).fadeIn()
    34. 34. Each! $(‘ul#items li’).each(...) a function goes here!
    35. 35. 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() })
    36. 36. but wait... $(this).hide()
    37. 37. jQuery can CHAIN. $(this).hide()
    38. 38. jQuery can CHAIN. $(this).hide()
    39. 39. jQuery can CHAIN. $(this).hide().show()
    40. 40. jQuery can CHAIN. $ (this).hide().show().css(‘float’, ‘left’)
    41. 41. jQuery can CHAIN. $(this) .hide() .show() .css(‘float’, ‘left’) .wrap(‘<li class=“item”/>’) .click( function(){ alert(‘a’)
    42. 42. 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‘!
    43. 43. I know this looks frightening. It just takes practice.
    44. 44. A stroll through the DOM $(‘form.new_item’) .parents(‘div.form’) .find(‘li.description’) .find(‘a.name’) .children(‘span.surname’)
    45. 45. A stroll through the DOM $(‘form.new_item’) .parents(‘div.form’) .find(‘li.description’) .find(‘a.name’) .children(‘span.surname’) This is called “traversing”.
    46. 46. jQuery UI makes things fly around
    47. 47. .animate() $(‘li:first’).animate({ ‘margin-left’ : ‘30px’ }, 1000)
    48. 48. .animate() $('li:first').animate({ 'margin-left' : '-=150px ' }, 1000)
    49. 49. .animate() $('li:first').animate({ 'margin-left' : '-=150px' }, 1000)
    50. 50. $(".block").toggle(function() { $(this).animate({ backgroundColor : "black" }, 1000); }, function() { $(this). animate({ backgroundColor : "#68BFEF"
    51. 51. .toggleClass() $('li:first').toggleClass(class, duration)
    52. 52. .toggleClass() $('li:first').toggleClass('selected', 1000)
    53. 53. Interactions Draggable Droppable Resizable Selectable Sortable
    54. 54. Interactions Draggable Droppable Resizable Selectable Sortable
    55. 55. 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
    56. 56. A menu $(‘li a’).hover( function(){ $(this).fadeTo(1000, 1); }, function(){ $(this).fadeTo(1000, 0.5); }
    57. 57. $('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);
    58. 58. $('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);
    59. 59. Plugins are where the magic REALLY happens. "Results 1 - 10 of about 2,260,000 for jquery plugins."
    60. 60. Fancybox / Facybox
    61. 61. Form Plugin Easy validation, AJAXification of forms. $('#myForm').ajaxForm(function() {  alert('Thank you for your comment!');  }); http://jquery.malsup.com/form/#ajaxForm
    62. 62. jquery.example.js Gives your input fields default values! http://github.com/mudge/jquery_example
    63. 63. Using Rails? Use jRails! http://github.com/aaronchi/jrails
    64. 64. CA VE
    65. 65. CA VE
    66. 66. BE CAREFUL
    67. 67. BE CAREFUL
    68. 68. jQuery is like lipstick
    69. 69. don’t overdo it.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×