jQuery UI – Organizing Data by Using Tabs in your HTML

Sometimes we need to find a way to organize data within a HTML Web Page. Tabs allow us to have a single content area, which can be separated into individual panels, so only one area can be seen at a time. Which panel is seen is controlled by a horizontal header with labels for each tab.

The labels should be made of a unordered list, with links. The links should be internal links, which point to the id’s of the child divs. All of these should be within a containing div – that div will be the one called when a jQueryUI is used to make the tabs.

  

	
First
	
2nd
	
Another Tab
  
  

batman ipsum
I had a vision of a world without Batman. The Mob ground out a little profit and the police tried to shut them down one block at a time. And it was so boring. I've had a change of heart. I don't want Mr Reese spoiling everything but why should I have all the fun? Let's give someone else a chance.

Okay. Now... Hardened Kevlar plates over titanium-dipped, tri-weave fibers for flexibility. You'll be lighter, faster, more agile.

Just you, sir? Don't worry, Master Wayne. It takes a little time to get back in the swing of things.

  
  

chuck noris ipsum
Chuck ipsum. Chuck Norris once tried to defeat Garry Kasparov in a game of chess. When Norris lost, he won in life by roundhouse kicking Kasparov in the side of the face.

Chuck Norris once kicked a baby elephant into puberty. Chuck Norris once commented, "There are few problems in this world that cannot be solved by a swift roundhouse kick to the face. In fact, there are none."

In the original pilot for Star Trek Next Generation, Chuck Norris can be seen powering the USS Enterprise warp drive with his roundhouse kicks.

  
  

ye 'ol pirate ipsum
Long boat driver Davy Jones' Locker avast run a shot across the bow lateen sail swab galleon brig square-rigged. Scurvy capstan loot broadside tackle gangway fluke hulk log wench. Barbary Coast scourge of the seven seas warp parrel scurvy interloper bilge haul wind Buccaneer line.

Skysail quarterdeck gangway gun doubloon plunder gabion take a caulk line pink. Log Arr squiffy deadlights bilge water rope's end coffer plunder strike colors capstan. Capstan maroon chantey grog blossom yardarm man-of-war rum crimp gunwalls spike.

Careen hang the jib red ensign barkadeer spirits marooned tackle Buccaneer brigantine bounty. Trysail tackle hardtack deadlights Plate Fleet coffer log case shot black jack square-rigged. Topmast dance the hempen jig no prey, no pay Shiver me timbers coxswain broadside Pieces of Eight brigantine careen boom.

    
  

JavaScript

The resulting JavaScript would seem to be complex given how much HTML code exist – however, it is actually fairly compact.

// Build a tab structure using jQueryUI
$('#tabs').tabs();

Yep – that’s it. Most often the default basic tab structure is used, although there are additional parameters you can use if necessary.

Load Data via AJAX

This is a slight break from the standard way of doing things in jQuery. To minimize the amount of code to write, jQuery instead specifies that you load AJAX data by changing the HTML. So instead of pointing to an internal link, by using “#” in the href, you will point to an external HTML document.

• AJAX Tab

Open on MouseOver instead of Click

What if you didn’t want users to have to click, just hover over a tab to display it. Well just add the event parameters as shown below:

// Build a tab structure using jQuery UI
$('#tabs').tabs({
  event: "mouseover"
});

Watch on YouTube

jQuery UI – Organizing Data by Using Tabs in your HTML was originally found on Access 2 Learn