Archive for the “Uncategorized” Category

Tuesday, July 6, 2010 Categorized under:
Author: geopaulm geopaulm geopaulm

Creating Tabs for your website in less than 10 mins. Jquery UI tutorial

logo

This is a very basic tutorial on utilizing the jquery UI tools in order to create features like tabs, slider, accordians etc… In this tutorial we discuss about making tabs using jquery UI within a span of 10 mins

Demo : Click Here

Step 1.

  • You will need to download all the jquery source files .. ie the javascript files and the css files from the jquery server..
  • For speeding up the tutorial we give u all the necessary files for the current tutorial as a zip…..Download it and extract to a folder in your localhost click here to download source files

Step 2.

  • Create a basic html file and load the essential javascript and stylescripts as shown below… I am not currently dealing with editing the css as it is a seperate process called jquery theming which will be done in a later session

Step 3. Creating the content

  • The whole box with the tab structure is enclosed inside the <div id=’tabs’></div> tags . This defines the basic region of the tabs
  • Inside the tab tags..The headings of different tabs are mentioned by means of ul tags as shown below
  • The content of different tabs are wrapped inside a ‘<div id=’tabs-1′></div>’ according to the tab numbers..

Step 4. Calling the jquery function

  • Finally call the javascript function inorder to invoke the jquery tabs function

Popularity: 26% [?]