Feedback & Discuss
FTab(Floating Tabs)


RMT


The FTab(Floating Tabs) is published on CodeProject. There you will find the discussion board.
Here show you FTab(Floating Tabs).

FTab(Floating Tabs) is a DHTML script that animates small browser windows with support for tabs. Use the mouse to move and resize the windows.
It use cookies to remember size, positions and window state(minimized or maximized), active tab and window stack order. But can off this with 'cookie:0;'. In the demo, try to move and resize some of the windows. Then refresh the page.
It's easy to configure this script. You put your content into separate <DIV>s and then call a javascript function which creates the tabs dynamically.
Open example to see what how FTab. Supports a wide variety of browsers such as IE5.5,IE6,Firefox2,Firefox3, Opera, Google Chrome and Safari.



Example

Download

How to use
1, add this in head.
<link rel="stylesheet" href="ftab.css">
<script type="text/javascript" src="ftab.js"></script>

2, add contents in body.
<!-- FTabMain START -->
<div id="ftab1" title="ftab1's title" style="display:none;">

<!-- FTabPage START -->
<div title="Page1">
page1<br>
</div>
<!-- FTabPage END -->

<!-- FTabPage START -->
<div title="Page1">
page1<br>
</div>
<!-- FTabPage END -->

</div>
<!-- FTabMain END -->

3, after contents, add JavaScript to initialize FTab.
<script type="text/javascript">
FTab('ftab1',330,90,160,50,'');
</script>

That sounds interesting
1, params for initialize FTab.
function FTab(tabID, left, top, width, height, style, showPageIndex)
can used like:(notice no 'new' as var o = new FTab(...), but no errors even use 'new'.)
var o = FTab(tabID,10,10,200,160, 'title:1;minmax:1;close:1;move:0;status:1;resize:1;scroll:1;tab:1;tabrect:1;expandable:0;cookie:1;',0);
o.show(pageIndex);
also can like this:
FTab(tabID,10,10,200,160,'').show(pageIndex);
when create FTab,need this params(left, top, and others),but while next time only need tabID to refer to FTab.
for styles,default of all params is 1.if no title(title:0),then no close and minmax buttons even set them as 1,
and also no moving.and also if no status(status:0),then no resize.
If set 'expandable:1;'(default is 0), then auto set this style:
noTitle = false;
noResize = true;
noMinMax = true;
noClose = true;
noMove = true;
noStatus = true;

2, after initialize, can use this functions.
function show(pageIndex);
function switchMinMax(sMaxMin);(sMaxMin:max,min or none for switch)
function hide();
function setTitle(str);
function setTabTitle(pageIndex, str);
function setBody(pageIndex, str);
function setURL(pageIndex, url);
function setStatus(str);
function getSelectedIndex();
function isHide();
function isMin();
function move(left, top, width, height);

3, support for user's event.
FTabs.OnPageShow = function(ftab,index)
{
  window.status='FTab_OnPageShow,window:'+ftab.id + ', index:' + index + ' is shown.';
}
FTabs.OnActing = function(ftab)
{
  window.status='FTab_OnActing,window:'+ftab.id + '.';
}
FTabs.OnDeActing = function(ftab)
{
  window.status='FTab_OnDeActing,window:'+ftab.id + '.';
}
FTabs.OnMinMax = function(ftab, isMin)
{
  window.status='FTab_OnMinMax,window:'+ftab.id + ', isMin:' + isMin;
}
FTabs.OnHide = function(ftab)
{
  window.status='FTab_OnHide,window:'+ftab.id + '.';
}

Extend Style
Customize for user.
click "ExtStyle" buttons in example page.