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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Pimp your site with jQuery!

1,707
views

Published on

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.

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

































































































  • Transcript

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