Skip to Main Content

Build a jQuery Site in a Day

Posted on 1.02.2012

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 () 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 (

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code
  •    

    The Ultimate Guide to Personalization

    Kibo