Theme:
FTab(Floating Tabs)
Online Demo
open online demo: demo
DownLoad
(*.zip file can be extract by Lhaz 7z)
ftab.zip (90.959 Kb, Date:2016/07/27, Downloads:623)
About FTab
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.
Sample1

Sample2

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
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 + '.'; 
}

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

Copyright© 2007-2015 uuware.com. All Rights Reserved.
Powered by Web No Coding