«

»

Oct
24
2012

Building jQuery Tabs from XML

I have developed a small application to build the jQuery tabs dynamically from XML data source. It’s completely developed using client side technologies – HTML, Javascript and XML.

This sample application will display all the posts in my blog grouped into appropriate categories. Each category displayed as a tab.

 

jQuery Tabs and Contents Generated from XML

jQuery Tabs and Contents Generated from XML

 

 

 

 

Watch it in action here -????http://www.electronmedia.in/wp/post_index_app/post_index.htm

This application uses some jQuery transition effect and CSS3 rounded corner feature.

You can view the source by Right click >> View source on this page.

 

Here are the steps to build:

  • First have your XML data source ready
  • You need to read this data from XML from javascript. JQuery’s ajax function will be handy to use here. This is an asynchronous function. You will have to input the XML source location and store the loaded content into an local object (a JS variable)
jQuery.ajax({type: “GET”,url: “data/posts.xml”,dataType: “xml”,success: function (xml) {xmlDoc = xml;

}

});

 

  • Once the XML document loaded and stored, you can parse their values to build the input html required to build the tabs using jQuery.tabs() function. Refer the input HTML structure here – http://jqueryui.com/tabs/
  • You can insert the generated HTML into a div tag using jQuery.append() function. You can generate any type of HTML but final structure should match to the HTML syntax required to build tabs (for jQuery function work)
  • In my case I am generating tabs (for each category) and generating hyperlinks under each category
  • Finally you can call the jQuery.tabs() function and pass the div (the div with required HTML)
jQuery("#base").tabs()

 

  • You can optionally insert some FX parameters to add some transition effects
jQuery("#base").tabs({ fx: { height: 'toggle', opacity: 'toggle'} });

 

You might also be interested in:

Can HTML5 be a Game Changer for the Industry?

 

Did you find this post useful? Feel free to share your feedback in the comments area.

You can find more interesting posts from us on the??posts index??section

If you are interested to be notified for the new posts from us, then you can make use of the subscribe option available on the right sidebar.

Help us to improve our search rating by recommending this post to Google using the button below

 

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>