Developer: jQuery Foundation .js

Posted on Jan 29, 2009 by Rich to Technology Trends, Web Development

As developers we always keep our little things that we always use or start a project in the same mannerisms. Coming up later, I will write about how we lay the foundation for a project with our project template. But for now, I would like to show you how we have our jQuery foundation file layed out. Above and beyond the scope of this base file, everything past this point is decided by the individual project.

We have done many websites and somethings always seem to arise.   So I decided “Why not just have them in the base file from the beginning.”  Right? of course.

So here is the file that we use for just such a thing.

So here is “jQuery Foundation .js”

JQuery:

This has quickly become my norm when dealing with a javascript framework. It is light, flexible and above anything else, easy to learn and implement.

When I use this, I have a set of things I always place inside the code that executes on the DOM.

1. External Links

Now many people do not like to use the target=”_blank” anymore, since it’s not standard anymore. Well why not use jQuery to make it happen.

1
2
3
4
5
6
7
8
9

$('a[rel="external"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
});
// or
$('a[id="externalLink"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
});

2. PDF’s

PDFs should open up without sending the visitor flying to a new window and all sorts of shenanigans like that.

1
2
3
4

$("a[href*=.pdf]").click(function() {
		$(this).attr({"target":"_self"});
		return false;
});

3. Confirm a Click event

This was just something that I add because well, sometimes you hit a link or a button or submit something by accident right? of course! we all do. Adding this little bit of code will help you try to avoid that, or at least deal with it a little better.

1
2
3
4
5
6
7
8
9
10
11

// IN DOM
$('a[rel="confirmDelete"]').click(confirmTheClick);
// OUTSIDE DOM
function confirmTheClick()
{
	var agree="Are you sure you wish to perform this action?\nCheck your work!";
	if ( confirm( agree ) )
		return true;
	else
		return false;
}

You can also download the quick and easy jQuery Foundation  javascript file right here, so you can see it.

Do you have anything that you use? Drop us a comment we would love to see what ideas you have!

Tags: DOM, Javascript, jQuery, jQuery examples, jQuery tutorial