Getting Started with jQuery & BC

- Tuesday, July 27, 2010

If you've always wanted to take the user experience of your BC sites to the next level but have been scared by the thought of dipping your toes into the world of JavaScript, then jQuery might just be for you.

jQuery is a popular JavaScript library that simplifies document manipulation, animation and AJAX interactions - letting you do more, with less coding.

What's even better is that jQuery plays nice with the BC platform, allowing you to easily implement advanced front-end functionality, improving the user experience of your sites and speeding up your development process.

In this post, I'll show you how to get started with jQuery, how to start using it on your BC sites and point you towards some handy how-to articles.

1. Getting to know jQuery

Before you dive in and begin using jQuery on your sites, it's important that you have a basic understanding of how jQuery works. If you're well versed in HTML and CSS, you should find the learning curve a little less steep and be on your way in no time.

To get you on the right track, here are some great "Getting Started" articles:

2. Including jQuery on your BC sites

Including the jQuery library on your site is as easy as referencing a hosted copy of the .js file inside the head of your page. For this example, we'll reference a copy of jQuery stored inside the "/js/" folder of our site:

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>

Because of BC's great site-wide template system, we can easily use jQuery on all of our pages by including the above code in the head of our site's default template.

In terms of hosting jQuery, you have a couple of options to choose from:

1. Host the library yourself
If you'd feel safer hosting the library yourself, you can simply download the latest version at http://jquery.com/ and upload it to a directory on your BC site. For example, many designers host the .js file inside the /js/ directory.

2. Reference an externally hosted version
A number of large enterprises provide hosted copies of jQuery on their existing CDN networks, which are available for public use. For example, Google host a copy that you can easily reference on your site. To use an externally hosted copy, simply replace the "src=" attribute of your script tag with the URL of the version you'd like to include. For example, http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js references a "minified" copy of jQuery version 1.4.2

If you'd like to include the latest version of jQuery hosted on jQuery's own CDN, you can use: http://code.jquery.com/jquery-latest.min.js

One of the key advantages of using Google's CDN hosted copy of jQuery is that as many websites across the web reference it, the library will be already cached on many of your visitors local machines - this greatly reduces load times, as they'll already have a local copy downloaded when they visit your site.

3. Using jQuery with BC

Once you're up to speed with the jQuery basics and have included the library in your site-wide template, you're ready to go.

To help get you started, we've written a bunch of great tutorials that show you how to enhance BC's built-in features with a little bit of jQuery magic:

It's always great to see new and exciting integrations of jQuery with BC - if you've recently completed a jQuery implementation, we'd love to see it in action! Feel free to share your BC + jQuery creations over on the Community Forums or in the comments of this post.

Comments