Write less, do more.
That is jQuery’s tag line,
and it couldn’t be closer
to the truth.
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
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
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
• 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
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
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:
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 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 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.