Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
jQuery for designers
      4 februari 2010
HTML
CSS
Javascript?
WTF?
Doel van deze presentatie:


Van WTF? naar Aha!
  *ping* *genius*
1
The Setup
TextMate Syntax support

                     GetBundles
$ cd ~/Library/Application Support/TextMate/Bundles
$ svn co http...
Download jQuery syntax:
Maak een testproject aan
met een HTML file, jQuery
 included, en een scripts
   file om in te werken
2
Showdown
Something cool:

$(document).ready(function() {

      var test = '<div class="test"></div>'

      function appendTo() {
...
3
Your turn
Document ready
     Haal default slice van
        project server
$(document).ready(function() {
    // Code here
});
alert(); and prompt();

$(document).ready(function() {
    alert('hello!');
});


$(document).ready(function()
{
    promp...
css(‘property’, ‘value’);



$(document).ready(function() {
    $('body').css('background', 'red');
});
Real world
                                   example!
      select(); onclick event


$(document).ready(function() {

   ...
events: hover event

$(document).ready(function() {

      $('body').hover(function() {
          // Stuff to do when the ...
Real world
                                                    example!

                 addClass();
         :last-child...
Real world
                                           example!
events: hover event
  :hover on any element in IE6


$(docu...
Real world
                                               example!
 focus event + addClass();
          Add :focus support...
4
JS in the wild
AB: tooltip
Tagger.fm: tagbox
Vorst Nationaal: websites in settings
+
Supertip
?
Vragen
Thx!
jQuery for designers
jQuery for designers
jQuery for designers
jQuery for designers
jQuery for designers
Upcoming SlideShare
Loading in …5
×

jQuery for designers

2,977 views

Published on

  • Be the first to comment

jQuery for designers

  1. 1. jQuery for designers 4 februari 2010
  2. 2. HTML
  3. 3. CSS
  4. 4. Javascript?
  5. 5. WTF?
  6. 6. Doel van deze presentatie: Van WTF? naar Aha! *ping* *genius*
  7. 7. 1 The Setup
  8. 8. TextMate Syntax support GetBundles $ cd ~/Library/Application Support/TextMate/Bundles $ svn co http://svn.textmate.org/trunk/Review/Bundles/ GetBundles.tmbundle/ Reload bundles:
  9. 9. Download jQuery syntax:
  10. 10. Maak een testproject aan met een HTML file, jQuery included, en een scripts file om in te werken
  11. 11. 2 Showdown
  12. 12. Something cool: $(document).ready(function() { var test = '<div class="test"></div>' function appendTo() { $('#container').append(test); } for (i = 0; i <= 767; i++) { appendTo(); } $('.test').hover(function() { $(this).animate({ opacity: 0.1, }, 250, function() { // Animation compete $(this).animate({ opacity: 0.75, }, 250, function() { $(this).css('background', '#FFFF00'); }); }); }); });
  13. 13. 3 Your turn
  14. 14. Document ready Haal default slice van project server $(document).ready(function() { // Code here });
  15. 15. alert(); and prompt(); $(document).ready(function() { alert('hello!'); }); $(document).ready(function() { prompt(); });
  16. 16. css(‘property’, ‘value’); $(document).ready(function() { $('body').css('background', 'red'); });
  17. 17. Real world example! select(); onclick event $(document).ready(function() { $('#email').click(function() { $(this).select(); }); });
  18. 18. events: hover event $(document).ready(function() { $('body').hover(function() { // Stuff to do when the mouse enters the element; $(this).css('background', 'red'); }, function() { // Stuff to do when the mouse leaves the element; $(this).css('background', 'blue'); }); });
  19. 19. Real world example! addClass(); :last-child support for IE6/IE7/IE8 $(document).ready(function() { $('#categories ul li:last-child').addClass('lastChild'); });
  20. 20. Real world example! events: hover event :hover on any element in IE6 $(document).ready(function() { $('ul li').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); });
  21. 21. Real world example! focus event + addClass(); Add :focus support for IE6 $(document).ready(function() { $('input').bind({ focus: function(event) { $(this).addClass('focus'); }, blur: function(event) { $(this).removeClass('focus'); } }); });
  22. 22. 4 JS in the wild
  23. 23. AB: tooltip
  24. 24. Tagger.fm: tagbox
  25. 25. Vorst Nationaal: websites in settings
  26. 26. + Supertip
  27. 27. ? Vragen
  28. 28. Thx!

×