[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/xampp182/htdocs/simpeg/zapatec/zptabs/zptabs/demo/ [ Home ]
File: themes.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" Several themes can be used in one page. Notice that tab bar can be either above or under the content. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Tabs Widget - Themes Demo</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
	<script type="text/javascript" src="../src/zptabs.js"></script>

	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>
	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Themes Demo</div>

		<div class='zpCalDemoText'>
		<ul>
		
		
<li>Several themes can be used in one page.</li>
<li>Notice that tab bar can be either above or under the content.</li>

		</ul>
		</div>



<div style="width: 400px">
  <center><div id="tabBar1"></div></center>
  <div id="tabs1" style="height: 200px"></div>
</div>

<br/>

<div style="width: 400px; background: #6F8DB9; padding: 10px">
  <div id="tabs2" style="height: 200px"></div>
  <div id="tabBar2"></div>
</div>

<script type="text/javascript">

var objSource = {
  tabs: [
    {
      id: 'game',
      linkInnerHTML: 'Game',
      url: 'content-game.html'
    },
    {
      id: 'photo',
      linkInnerHTML: 'Photo',
      url: 'content-photo.html'
    },
    {
      id: 'music',
      linkInnerHTML: 'Music',
      url: 'content-music.html'
    },
    {
      id: 'chat',
      linkInnerHTML: 'Chat',
      url: 'content-chat.html'
    }
  ]
};

var objTabs1 = new Zapatec.Tabs({
  tabBar: 'tabBar1',
  tabs: 'tabs1',
  source: objSource,
  sourceType: 'json',
  theme: 'red',
  themePath: '../themes/'
});

var objTabs2 = new Zapatec.Tabs({
  tabBar: 'tabBar2',
  tabs: 'tabs2',
  source: objSource,
  sourceType: 'json',
  theme: 'rounded',
  themePath: '../themes/'
});

</script>


	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Tabs Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>      
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>