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).
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.
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:
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:
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).
$( "#my-tabs" ).tabs();
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.
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.
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.
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.
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).
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:
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.