Demo: Building Widgets with jQuery

Examples of the various widgets you can construct using jQuery's API.

Scroll down...




You may have seen the calculator demo at the end of the lesson on browser JavaScript. That one used pure JavaScript to build a simple browser calculator. Now that you know jQuery, you're capable of building a more attractive set of browser widgets. The demos below should be within your understanding.

They use a site called The Code Player, which lets you see code being written in real time. You can use the controls at the bottom to increase the speed of the code (up to 20x) if you'd like.

The site provides a nice look at combining HTML5, CSS3, and JavaScript to produce attractive and useful widgets. The walkthroughs are addictive like crack for creative front-end engineers.

When you open up a walkthrough, they may ask you to sign up, but you can just click play to get around that. There aren't audio overlays to these demos so, if you have questions, write them down and we'll discuss them with the group.

Quick Notes

  • These demos are often meant to be one-off programs and so they don't always use good code organization techniques. Try to take away the tactics of what they're doing while knowing that there is a better way to organize these things.
  • The demos use lots of CSS3 as well. Remember that you're here for JavaScript, so don't worry about remembering all the CSS3 wizardry (e.g. gradients, transitions).

1. The Accordion Menu

Check out this accordion menu demo from The Code Player. Most of the runtime is devoted to setting up the HTML and CSS, but it's a good look at the code in progress.

2. The jQuery Calculator

Check out this calculator demo from The Code Player. Again, much time is devoted to setup but there is a healthy bit of JavaScript in there as well. As opposed to the calculator demo you saw before, this one looks great!

3. The Multi-Step Form

Check out this multi-step form from The Code Player. The first 2/3rds are setting up the form in HTML/CSS and the last 1/3rd is more to-the-point with the JavaScript. They do make use of the JavaScript Object Pattern.

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Demo: Debugging JavaScript in the Browser