KNOWLEDGE BASE
Log In    |    Knowledge Base    |    4D Home
Video Tip: Video Tech Tip: Working with the Tabs object
PRODUCT: 4D Web 2.0 Pack | VERSION: 1.1 | PLATFORM: Mac & Win
Published On: May 9, 2007
PLEASE NOTE: This Tech Tip applies to 4D Web 2.0 Pack version 1.0, 1.1, 1.2, and v11

This Video Tech Tip shows how to use the Tabs object from the 4D Ajax Framework. The 4D Ajax Framework is part of 4D Web 2.0 Pack.

In the video 4 examples are shown. The source code for three of the examples is included here. The fourth example can be seen in the "Contacts" demo database available from here.



Example 1 source HTML:

<HTML>
<HEAD>
  <TITLE>4DAF Tabs: Example 1</TITLE>
  <SCRIPT language="javascript" TYPE="text/javascript" CHARSET="utf-8" SRC="dax/js/localization/resources_en.js"></SCRIPT>
  <SCRIPT language="javascript" TYPE="text/javascript" CHARSET="ISO-8859-1"   SRC="dax/js/compile.js"></SCRIPT>
  <LINK REL="stylesheet" CHARSET="ISO-8859-1" HREF="/dax/themes/basic/basic_gz.css" MEDIA="all"   TYPE="text/css" TITLE="Basic" />

<SCRIPT TYPE="text/javascript">
<!--
onPageLoad = function ()
{
var MyTab = new Tabs();
MyTab.insert('Tab 1',0);
MyTab.insert('Tab 2',1);
$('TabDiv').appendChild(MyTab.dom);
};
// -->
</SCRIPT>
</HEAD>

<BODY onLoad="onPageLoad();">

<P>This example creates a simple Tabs object.</P>

<DIV ID="TabDiv"/>

<!-- For 4DAF 1.2 and newer use this instead:

<DIV ID="TabDiv" style="overflow: hidden;"/>

--!>

</BODY>
</HTML>


Example 2 source HTML:

<HTML>
<HEAD>
<TITLE>4DAF Tabs: Example 2</TITLE>
<SCRIPT language="javascript" TYPE="text/javascript" CHARSET="utf-8" SRC="dax/js/localization/resources_en.js"></SCRIPT>
<SCRIPT language="javascript" TYPE="text/javascript" CHARSET="ISO-8859-1" SRC="dax/js/compile.js"></SCRIPT>
<LINK REL="stylesheet" CHARSET="ISO-8859-1" HREF="/dax/themes/basic/basic_gz.css" MEDIA="all" TYPE="text/css" TITLE="Basic" />

<SCRIPT TYPE="text/javascript">
<!--
onPageLoad = function ()
{
var MyTab = new Tabs();
MyTab.insert('Tab 1',0);
MyTab.insert('Tab 2',1);
MyTab.activateById(0);
$('TabDiv').appendChild(MyTab.dom);
};
// -->
</SCRIPT>

</HEAD>

<BODY onLoad="onPageLoad();">

<P>This example creates a simple Tabs object and specifies which tab has focus on loading the page.</P>

<DIV ID="TabDiv"/>

<!-- For 4DAF 1.2 and newer use this instead:

<DIV ID="TabDiv" style="overflow: hidden;"/>

--!>

</BODY>
</HTML>


Example 3 source HTML:

<HTML>
<HEAD>
<TITLE>4DAF Tabs: Example 3</TITLE>
<SCRIPT language="javascript" TYPE="text/javascript" CHARSET="utf-8" SRC="dax/js/localization/resources_en.js"></SCRIPT>
<SCRIPT language="javascript" TYPE="text/javascript" CHARSET="ISO-8859-1" SRC="dax/js/compile.js"></SCRIPT>
<LINK REL="stylesheet" CHARSET="ISO-8859-1" HREF="/dax/themes/basic/basic_gz.css" MEDIA="all" TYPE="text/css" TITLE="Basic" />

<SCRIPT TYPE="text/javascript">
<!--
onPageLoad = function () {
var someText = document.getElementById("SomeText");
var somePicture = document.getElementById("SomePicture");
someText.textContent="This is the content for Tab 1.";
somePicture.src="tab1.jpg";

var MyTab = new Tabs();
MyTab.insert('Tab 1',0);
MyTab.insert('Tab 2',1);
MyTab.onswitch = function(index) {
  switch(index) {
  case 0:
  someText.textContent = "This is the content for Tab 1.";
  somePicture.src="tab1.jpg";
  break;
  case 1:
  someText.textContent = "This is the content for Tab 2.";
  somePicture.src="tab2.jpg";
  break;
  };
};
MyTab.activateById(0);
$('TabDiv').appendChild(MyTab.dom);
};
// -->
</SCRIPT>

</HEAD>

<BODY onLoad="onPageLoad();">

<P>This example creates a simple, but functional Tabs object. In this case when the user clicks on one of the tabs the content of the page is dynamically changed.</P>

<DIV ID="TabDiv" STYLE="position:relative; height:20px;"></DIV>

<!-- For 4DAF 1.2 and newer use this instead:

<DIV ID="TabDiv" STYLE="position:relative; height:20px; overflow: hidden;"/></DIV>

--!>

<P ID="SomeText">This is the content for Tab 1.</P>
<IMG ID="SomePicture" SRC="tab1.jpg">

</BODY>
</HTML>


For the latest information the 4D Ajax Framework please see the Daxipedia:

https://daxipedia.4d.com