Write less, do more. That is jQuery’s tag line, and it couldn’t be closer to the truth.

Using the jQuery Javascript Library, creating a functional website with all the expected layout, navigation and features is simple. While you’ll still need some design flair and creative input to turn it into magic, the aesthetics and functionality would satisfy any basic website brief.

To demonstrate this, we’ve set up www.jquerysiteinaday.com, a simple, straightforward tutorial on how you can have a site up and running in a day (in fact, probably much quicker). To accomplish this, we’ll detail the basic layout and wireframe, the jQuery UI Widgets and, using a tiny amount of jQuery syntax, show you how simple it is to set up a site like this.

The main ingredients we’ll be using are as follows:

• A jQuery Custom UI file (http://wsm.co/v3vVK3) that includes both the core jQuery Library and all the widgets needed (although, for this example, only the Tabs and Accordion widgets will be used).

• A Custom jQuery UI Theme (http://wsm.co/vgPMwm) — readers can download a pre-rolled theme or roll their own.

• A basic wireframe which can be designed in Photoshop or even laid out on paper.

• Some HTML and CSS (http://wsm.co/sbYvJB) to get things laid out as needed. Some basic CSS styling and position knowledge will be useful to fully understand the markup.

With everything in place, let’s get started with the wireframe:

Create Your Wireframe and HTML Page
As seen in Image 1, a basic wireframe for the site has already been created with the logo at the top, horizontal navigation below and “feature boxes” along the right-hand side. Even with some basic experience, a file like this can be put together relatively quickly.



The next step is to create a new HTML file with all the usual , and tags. From here, it is necessary to add in the jQuery reference as seen in the code example below:

 

It is best practice to include the reference to the jQuery files in the footer (http://wsm.co/tV7CXd). Once there is a reference to jQuery in your document, only then is it possible to start using it.

First, let’s look at the navigation:

Tabs

The jQuery UI file (<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>) contains the code for our Tabs Widget; a great layout tool that enables designers to include a lot of content separated into portions. The Tabs Widget is effective for structuring the main content of a page.

The HTML needed to create the navigation consists of the following:

• A list (<ul>) where each list item represents a tab item

• An <a> tag, to act as the trigger to navigate to the different tabs

• A set of <div> tags to hold the content

The <a> tags will need to refer to the respective tab. Each content <div> needs a corresponding ID to the anchor name, as seen in the following example:

Place the above code where the navigation and content should appear. Remember that the layout has been positioned using our own CSS, so it is necessary to modify the style sheet for this step.

The corresponding Javascript can be seen below:

The main container <div> has the ID "my-tabs" inside which the tabs are converted into jQuery UI Tabs by calling the Tabs on the ID (in this case #my-tabs) using the following BLOCKED SCRIPT $("#my-tabs").tabs();. When the main structure of the tabs have been created it is possible to add content or additional tabs as necessary.

Now that the navigation and content are complete, it’s time to move onto the Accordions:

Accordions

Accordions are useful when displaying featured content, perhaps in a sidebar, as they add interactivity by sliding content in and out of view. Similar to Tabs, there are many methods and events available to enhance the “basic” accordion, but even in its simplest form — created with only a few lines of code — it certainly meets expectations.

The HTML structure is also similar to tabs. The containing <div> element houses a list of <h3>’s with the anchor tags that allow it to expand and collapse. In contrast to tabs, the content <div>’s must follow the corresponding header.

Add the following structure to your HTML:

Like the Tabs, we simply call the accordion on the ID (in this case #my-accordion): $("#my-accordion").accordion();. When you have a fully functioning Accordion, feel free to experiment with more content and methods.

Do note that the <h3> elements are required elements and, if substituted, should be given an appropriate class on which the accordion should be called.

And … You’re Done

Using the jQuery Library, a custom theme from the jQuery roller and only two widgets from jQuery UI, we have a fully functional website (albeit, only on one HTML page).

About the Authors: Iain Scott is the managing director of the London-based Web design and digital marketing agency, Base Creative, where Anora Vasant serves as the technical project manager.