jQuery for designers

jQuery for designers
4 februari 2010

Doel van deze presentatie:

Van WTF? naar Aha!
*ping* *genius*

TextMate Syntax support

GetBundles
$ cd ~/Library/Application Support/TextMate/Bundles
$ svn co http://svn.textmate.org/trunk/Review/Bundles/
GetBundles.tmbundle/

Reload bundles:

Maak een testproject aan
met een HTML ﬁle, jQuery
included, en een scripts
ﬁle om in te werken

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');
});
});
});

});

Document ready
Haal default slice van
project server
// Code here
});

alert(); and prompt();

alert('hello!');
});

$(document).ready(function()
{
prompt();
});

css(‘property’, ‘value’);

$('body').css('background', 'red');
});

Real world
example!
select(); onclick event


$('#email').click(function() {
$(this).select();
});

});

events: hover event


$('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');
});

});

Real world
example!

addClass();
:last-child support for IE6/IE7/IE8

$('#categories ul li:last-child').addClass('lastChild');
});

Real world
example!
events: hover event
:hover on any element in IE6


$('ul li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});

});

Real world
example!
focus event + addClass();
Add :focus support for IE6


$('input').bind({
focus: function(event) {
$(this).addClass('focus');
},
blur: function(event) {
$(this).removeClass('focus');
}
});

});

Vorst Nationaal: websites in settings

jQuery for designers

Related slideshows

More Related Content

jQuery for designers

Editor's Notes