A jQuery Site In A Day

jQuery WebsiteWrite less, do more...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. Ok, you'll still need some design flair and creative input to turn it into magic, but overall, the aesthetics and functionality would satisfy any basic website brief.

To demonstrate this, we've set up jQuery Site In A Day: 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:

  • A jQuery Custom UI file. This includes both the core jQuery Library, and all the widgets you'll ever need (although we're only using Tabs and Accordion).
  • A Custom jQuery UI Theme. You can download a pre-rolled theme or roll your own.
  • A basic wireframe, designed in Photoshop, but can be laid out on paper if you prefer (planning is important!)
  • A sprinkle of HTML and our own CSS to get things laid out as we need. (You will need some basic CSS styling and position knowledge to fully understand our own markup.)

Let's get started with that wireframe. Create your page >>>

Create Your Wireframe and HTML Page

We quickly laid out this basic wireframe for the site. Logo at the top, horizontal navigation below and (what we like to call) feature boxes along the right hand side. Even with some basic experience, a file like this can be put together relatively quickly.

jQuery Site In A Day Wireframe

Next is to create a new HTML file (with all the usual <html>,<head> and <body> tags ready. It's here we can start thinking about adding in the jQuery reference. Here's our code:


<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" />
...
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

It's best practice to include the reference to the jQuery files in the footer.

Ok, so now we have a reference to jQuery, let's start using it.

First, let's look at our navigation. The Tabs >>>

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. The Tabs widget is a great layout tool, enabling you to include a lot of content separated into portions, and is effective for structuring the main content of a page. The HTML we'll need to create the navigation consists of:

  • 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 content.

The <a> tags will need to refer to the respective tab. Each content <div> needs a corresponding ID to the anchor name, like so:


<div id="my-tabs">
	<ul>
		<li><a href="#tab-01>Tab1</li>
		<li><a href="#tab-02>Tab2</a></li>
	</ul>
	<div id="tab-01">
		<p>Content.</p>
	</div>
	<div id="tab-02">
		<p>Content.</p>
	</div>
</div>

Place the above code where you need your navigtion and content to appear. (Remember, that we've positioned the layout using our own CSS, and we assume you have a good understanding of CSS for this task).

And the corresponding Javascript:


$(function() {
	$( "#my-tabs" ).tabs();
});

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 JavaScript: $("#my-tabs").tabs();. The main structure of your tabs have been created and you can add content and further tabs to it.

Navigation and content done! What about those Accordions >>>

Accordions

Accordions are very useful to show featured content, perhaps in a sidebar, and adds some interactivity by sliding content in and out of view. As with the 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 - you can have everything you expect.

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 to your HTML the following structure: 


<div id="my-accordion">
    <h3><a href="#">Header1</a></h3>
    <div>Content.</div>
    <h3><a href="#">Header2</a></h3>
    <div>Content.</div>
</div>

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


$(function() {
	$( "#my-accordion" ).accordion();
});

NB: The <h3> elements are required elements and if substituted should be given an appropriate class on which the accordion should be called.

So, what's next >>>

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

There is more you can do, if you feel a little adventurous. We've compiled a demonstration of a few of the other cool widgets that come with the jQuery UI.

Form

jQuery UI includes some widgets that are very useful for forms of any kind. If you've rolled a theme and are using the jQuery and jQuery UI files then you'll need only a few lines of code to use some of these features.

Here is a quick guide on using the widgets and methods than come with jQuery UI.

Thanks for stopping by. Play around with the form and click on the ? icon to see how to use jQueryUI to recreate these effects.

?

Autocomplete

Autocomplete has made forms easier for all of us out at some stage. jQuery "Autocomplete" can be added with the following lines of code. List your items as below for "availableTags" then specify the "ID" to which the Autocomplete applies. For example:

$(function() {
 var availableTags = [
  "Alpha",
  "Beta"
 ];
$( "#myinput" ).autocomplete({
source: availableTags
 });
});

Then in your form you will need an <input...> with the "ID" you specified above (do not include a "type" for the input):

<input id="myinput" />
?

Date Pickers

"Datepickers" make the act of adding a date easier for users and can allow you to control how a date is submitted in a form. All you need are the following lines of jQuery and a corresponding "input" with the "ID" of "datepicker":

$(function() {
$( "#datepicker" ).datepicker();
...

As with all jQuery UI widgets there are many options to allow you to further define the interaction of the user. For example, by adding a minimum and maxiumum date we've been able to ensure the user is between 18-100 years of age:

$(function() {
$( "#datepicker" ).datepicker({ 
	minDate: "-100Y", maxDate: "-18Y" ,
});
});
<input type="text" id="datepicker" />
?

Great! Then you'll know you can keep up with the latest at the the jQuery Blog!

Great! Be sure to check out their Getting Started guide.

Effects

The jQuery UI effects are another great feature. Here is an example of the "show", "hide" and "removeClass" and "addClass" effects.

A message will display below the <select>... tag here depending on the option you choose. The <div> with the message is hidden to begin with:


$("#myanswer").hide();

Next we check whether the value of the <select>... has changed and if it has changed to "myoption" then we "show" the appropriate message (a <div> with the "ID" 'myanswer'):


$("#myselect").change(function() {
	if ( $("#myselect").val() == "myoption"){
		$("#myanswer").show();
    }
});

The above code will be added with your jQuery files while the select below goes in your form.


<select id="myselect">
	<option value="myoption">I'm lovin it!</option>
</select>
<div id="myanswer">The answer</div>

There's no need for any css here as jQuery does all the work for you.

?

You hit the submit button!

Dialog Boxes

$( "#mydialog" ).dialog();

For your HTML:

<div id="mydialog" title="My Title">
<p>My Text</p>
</div>

We've used a dialog box here which reacts to clicking the submit button. Click the button to see!


$('#mydialog').dialog({
	autoOpen: false
});
$('#mysubmit').click(function() {
	$('#mydialog').dialog('open');
});
});

Buttons

To complement the style of the rest of you form the jQuery UI theme will style your buttons up for you, too. Add the following lines to your code:

$( "input:submit, a, button", "#editable" ).button();

For your HTML:

<input type="submit" value="Submit" />

1. Download or Roll a Theme.

The folks over at jQuery UI have a really handy theme roller. You can download one of many pre-existing themes or roll your own. The great thing about using jQuery themes is that you're styling is taken care of.

Once you have chosen your theme you can download it with the jQuery and jQuery UI js files with the core and optional components you would like. If you're using effects like "bounce" or widgets like "accordion" you must ensure they are selected for download.

The download comes in a handy .zip file which contains the requisite js and css files as well as those lovely icons you saw when rolling the theme. Include all of these in your HTML file (see below).

Visit the jQuery UI Theme Roller

2. Include the files and the relevant js.

Once you have all of your files be sure to include them in your HTML file:


<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" />
...
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>  
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

When you're using any of the jQuery UI widgets or effects you will need to include a call to them. To do this you will need to add some code similar to the following code below the files included above:


<script>
$(function() {
	$( "#my-accordion" ).accordion();
});
</script>

So your page will look something like this:


<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" />
...
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>  
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
	$( "#my-accordion" ).accordion();
});
</script>

In the tutorial, when we ask you to add the code we're talking about the calls to the relevant widget - the code below your jQuery files.

3. Add in the HTML

Finally, you'll usually need to add specific HTML tags or ID's to make the widgets work. This should be added in your HTML where you'd like the element to display and an example of HTML code will be provided with ID's you can customise.