Skip to main content
Email Password   helpLost your password?

Introduction

FTab (Floating Tabs) is a COOL cross browser DHTML floating window script with support for tabs. The floating window can move/resize/minimize/maximize/fixed/show modal, and the states(size/positions/minimized/maximized or others) can save to cookie. It's so easy to configure that you only need put your content into separate tabs and then call:

FTab('ftab1',left, top, width, height, style)

A COOL floating window with tabs will be shown! You can also create a window without floating. Open the example page to see how COOL FTab is!
Supports a wide variety of browsers such as Internet Explorer, Opera, Firefox, Google Chrome and Safari.

Using the Code

A simple code is shown here. For full features, see the demo page.

  1. Add this in the head: 
    <link rel="stylesheet" href="ftab.css">
<script type="text/javascript" src="ftab.js"></script>
  2. Add contents in the 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>

Points of Interest

  1. Params for initializing FTab: 
    function FTab(tabID, left, top, width, height, style, showPageIndex)

    can be used like: (notice no 'new' as var o = new FTab(...), but no errors even if you use 'new'.)

    var o = FTab(tabID,10,10,200,160, 
  'title:1;minmax:1;close:1;move:1;status:1;resize:1;scroll:1;tab:1;',0);
  o.show(pageIndex);

    As options, here are all (1 for default true):

    title:1;minmax:1;close:1;move:1;status:1;resize:1;scroll:1;tab:1;
  tabrect:1;expandable:0;cookie:1;modal:0;center:0;

    It can also be like this:

    FTab(tabID,10,10,200,160,'').show(pageIndex);

    When creating FTab, you need these params (left, top, and others), but next time, you 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. If there is no status (status:0), then there is 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;
noFixed = true;
modal = false;
center = false;
  2. After initializing, you can use these functions: 
    function show(pageIndex);
function switchMinMax();
function switchFixed();
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 isFixed();
function move(left, top, width, height);
  3. Support for user's event:
    Here you can do something if you like.
    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

Click "ExtStyle" buttons in the example page.

History

For details, visit last version & demo.

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralDemo Pin
Johnny J.		21:32 30 Sep '09  
GeneralRe: Demo Pin
uuware		15:56 1 Oct '09  
GeneralRe: Demo Pin
Johnny J.		20:04 1 Oct '09  
GeneralRe: Demo Pin
uuware		20:25 1 Oct '09  
GeneralRe: Demo Pin
ac-chan		12:48 9 Oct '09  
GeneralRe: Demo Pin
uuware		15:47 12 Oct '09  
GeneralVery Nice Work Pin
Abhijit Jana		11:53 29 Sep '09  
JokeRe: Very Nice Work [modified] Pin
uuware		15:40 29 Sep '09  
GeneralOf browser compatibility ... Pin
Member 3344129		4:45 4 Jul '09  
GeneralRe: Of browser compatibility ... Pin
uuware		16:20 5 Jul '09  
GeneralRe: Of browser compatibility ... Pin
Member 3344129		1:10 6 Jul '09  
GeneralRe: Of browser compatibility ... Pin
uuware		1:37 6 Jul '09  
GeneralRe: Of browser compatibility ... Pin
Member 3344129		14:30 6 Jul '09  
GeneralRe: Of browser compatibility ... Pin
uuware		15:46 6 Jul '09  
GeneralBrowser Back Button Pin
cwlocke		11:08 25 Jun '09  
GeneralRe: Browser Back Button Pin
uuware		19:01 30 Jun '09  
GeneralVery nice Pin
Jimmiepotter		9:30 24 Jun '09  
JokeRe: Very nice Pin
uuware		12:46 24 Jun '09  
GeneralWow very nice Pin
aldo hexosa		1:19 17 Jun '09  
JokeRe: Wow very nice Pin
uuware		5:29 17 Jun '09  
GeneralThis looks very nice Pin
Paul Darlington		22:15 15 Jun '09  
GeneralRe: This looks very nice Pin
uuware		4:15 16 Jun '09  
Generalthanks ! Pin
BillWoodruff		9:52 15 Jun '09  
GeneralRe: thanks ! Pin
uuware		17:23 15 Jun '09  
GeneralRe: thanks ! Pin
BillWoodruff		19:35 15 Jun '09  
Last Visit: 10:14 21 Nov '09     Last Update: 10:14 21 Nov '09 12 Next »


Last Updated 29 Sep 2009 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009