jQuery SUG Group Introduction

Andrew Chalkley
UI Developer

The Proper Way
CSS
Ye Olde Way
Tables
Obtrusive

CSS evangelists told us that there should be a separation
of layout from markup.
JavaScript evangelists tell us today that there should be the separation of behavior from markup.

Bad
<a href=“javascript:window.open(‘somepage.html’)”>Some Page</a>
<a href=“#” onclick=“window.open(‘somepage.html’); return false;”>Some Page</a>
Better
<a href=“somepage.html” onclick=“window.open(‘somepage.html’); return false;”>...</a>
Best
<a href=“somepage.html” class=“new_window”>Some Page</a>

JavaScript Implementation
window.onload = function() {
}
var anchors = document.getElementsByTagName(‘a’);
for (vari = 0, anchor; i < anchors.length; i++) {
}
if (anchor.className == “new_window”) {
anchor.onclick = function() {
varhref = this.href;
window.open(href);
return false;
}
}

But wait…
window.onload executes after page is completely loaded (with images)
it overrides any existing load or click handlers
cannot handle class=“new_windowexternal_link”
it leaks memory in IE6
The Answer…

CSS Selectors $(“.new_window”) – shallow learning curve
Cross-browser support
Compatibility mode (DWR, Prototype, etc)
Executes when DOM is ready (before images have loaded)
Write less, do more

$(function() {
});
$(“a.new_window”).click(function() {
});
window.open( $(this).attr(“href”) );
return false;

$(function() {
});
$(“a.new_window”).click(function() {
});
window.open( $(this).attr(“href”) );
return false;

jQuery SUG Group Introduction

by Andrew Chalkley on Oct 19, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 144

Statistics

jQuery SUG Group Introduction — Presentation Transcript

http://www.cakesolutions.net	143
http://www.slideshare.net	1