asked on

Ajax and Static Content in Jquery tabs

Hi Guys and Gals-

I am using the Flowplayer.org/tools/tabs/ to create my search result windows in a real estate application. The issue I am having is the use of Ajax, vs Static content inside a DIV. I dont want my visitors to have to wait for content to download on each tab just to get their results. According to the documentation, adding the ajax setting in the JS call allows you to tun all on to ajax, however I only want that last two tabs to use ajax to call in external content, and the first to load static or DIV content.

<!DOCTYPE html>
<html>
 <head>
	<title>jQuery Tools standalone demo</title>
 
	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
	 
 
	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	
 
 
	
	<!-- tab styling -->	
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs-no-images.css"/>
	 
	
	<!-- skin 2 -->
	<style>
	
	
	/* alternate colors: skin2 */
	ul.skin2 a {
		background-color:#89a;		
		color:#fff !important;
	}
	
	/* mouseover state */
	ul.skin2 a:hover {
		background-color:#678;
	}
	
	/* active tab */
	ul.skin2 a.current {
		background-color:#4F5C6A;
		border-bottom:2px solid #4F5C6A;	
	}
	
	/* tab pane with background gradient */
	div.skin2 div {
		min-height:200px;
		color:#fff;	
		background:#234 url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x scroll 0 -50px;
		
		/* IE6 does not support PNG24 images natively */
		_background:#4F5C6A;
	}
	</style>
</head>
 
<body>
 
 
<!-- tabs -->
<ul class="css-tabs skin2">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Second tab</a></li>
	<li><a href="#">A ultra long third tab</a></li>
</ul>
 
<!-- panes -->
<div class="css-panes skin2">
	<div>
	
		<img src="http://static.flowplayer.org/img/title/eye192.png" alt="Flying screens" style="float:left;margin:0 30px 20px 0" />
	
		<h2>Lorem ipsum dolor sit amet</h2>
		
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.
		</p>
		
		<p>
			Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam. 
		</p>			
		
		<br clear="all" />
		
	</div>
	
	<div>
		<p>
			Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui.
		</p> 
		<p>
			Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.
		</p>
	</div>
	
	<div>
		<p>
			Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
		</p>
		
		<p>
			In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis nisi. Vivamus at enim. Integer semper imperdiet massa. Vestibulum nulla massa, pretium quis, porta id, vestibulum vitae, velit.
		</p>
	</div>
</div>
 
<!-- activate tabs with JavaScript -->
<script> 
$(function() {
	$("ul.skin2").tabs("div.skin2 > div");
});
</script>
 
 
 
</body>
 
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Pravin Asar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jfergy

ASKER

Hey, follow up question. How do I add multiple tab containers to a page dynamically. As the number of containers will change? The support data does not seem to dscuss this

Thanks

Pravin Asar

To add tabs dynamically.

tabs( "add" , url , label , [index] )

e.g.

$(document).ready(function()
{
      $("#tabs").tabs();
// add after first tab
      $("#tabs").tabs( "add" , "http://www.yahoo.com" ,"NEW TAB", 1 );
// append the tab
      $("#tabs").tabs( "add" , "http://www.yahoo.com" ,"NEW TAB");
      return;
}