Simon Willison, 6th May 2008
Links and resources from a three hour tutorial presented at XTech 2008.
Download PDF: xtech-unobtrusive-jquery.pdf (3 MB)
Tools:
Demos:
Copy and paste demos:
Paste the following code in to Firebug on the sidenote popup page.
var $ = jQuery;
$('a.sidenote').unbind().one('click', function() {
$('<p />').load(this.href).appendTo(document.body);
// Make the link stop being a link
$(this).replaceWith($(this).contents());
return false;
});
var loading = $(
'<img alt="loading" src="http://simonwillison.net/static/2008/loading.gif" />'
).appendTo(document.body).hide()
loading.ajaxStart(function() { $(this).show() });
loading.ajaxStop(function() { $(this).hide() });
Paste the following code in to Firebug on the XTech schedule page.
var $ = jQuery;
var signup = $('div#en_sidebar div#signup.rhsbox');
var news_box = $('<div id="news_feed" class="rhsbox"></div>');
news_box.html(signup.html());
news_box.find('div.box').empty();
var ul = $('<ul />');
var feed_url = jQuery('link[type=application/atom+xml]').attr('href');
jQuery.get(feed_url, function(xml) {
var feed = jQuery(xml);
feed.find('feed entry').each(function() {
var title = $(this).find('title').text();
var link = $(this).find('link').attr('href');
var li = $('<li><a href="' + link + '">' + title + '</a></li>');
li.appendTo(ul);
});
});
ul.css('text-align', 'left').appendTo(news_box.find('div.box'));
news_box.insertBefore(signup);