Click here to Skip to main content
15,867,704 members
Articles / Web Development / XHTML

FTab (Floating Tabs)

Rate me:
Please Sign up or sign in to vote.
4.92/5 (24 votes)
29 Sep 2009CPOL2 min read 88.7K   382   51   37
FTab (Floating Tabs) is a cool cross browser DHTML floating window script with support for tabs.
Image 1

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:

JavaScript
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:
    ASP.NET
    <link rel="stylesheet" href="ftab.css">
    <script type="text/javascript" src="ftab.js"></script>
  2. Add contents in the body:
    ASP.NET
    <!-- 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:
    ASP.NET
    <script type="text/javascript"> 
    FTab('ftab1',330,90,160,50,''); 
    </script>

Points of Interest

  1. Params for initializing FTab:
    JavaScript
    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'.)

    JavaScript
    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):

    JavaScript
    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:

    JavaScript
    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:

    JavaScript
    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:
    JavaScript
    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.
    JavaScript
    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

  • Customized for user
  • Can set other colors or styles

Click "ExtStyle" buttons in the example page.

History

  • First released on 2008/07/08
  • Updated on 2008/8/22 - Added expandable style
  • Updated on 2009/6/07 - JS source is compressed added to only 11 KB!
  • Updated on 2009/6/21 - Added fixed and modal dialog features.

For details, visit last version & demo.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
China China
From china, and location at japan.

Comments and Discussions

 
GeneralGreat work!!! Pin
liquizing17-Nov-12 3:25
liquizing17-Nov-12 3:25 
GeneralRe: Great work!!! Pin
uuware15-May-13 20:08
uuware15-May-13 20:08 
BugProblems about cookies Pin
Member 93297781-Aug-12 23:26
Member 93297781-Aug-12 23:26 
GeneralRe: Problems about cookies Pin
uuware5-Aug-12 4:21
uuware5-Aug-12 4:21 
GeneralRe: Problems about cookies Pin
Member 93297785-Aug-12 22:24
Member 93297785-Aug-12 22:24 
GeneralMy vote of 5 Pin
Anurag Sarkar20-May-12 2:41
Anurag Sarkar20-May-12 2:41 
GeneralMy vote of 5 Pin
Md. Touhidul Alam Shuvo21-Jun-11 23:35
Md. Touhidul Alam Shuvo21-Jun-11 23:35 
GeneralDemo Pin
Johnny J.30-Sep-09 20:32
professionalJohnny J.30-Sep-09 20:32 
GeneralRe: Demo Pin
uuware1-Oct-09 14:56
uuware1-Oct-09 14:56 
GeneralRe: Demo Pin
Johnny J.1-Oct-09 19:04
professionalJohnny J.1-Oct-09 19:04 
GeneralRe: Demo Pin
uuware1-Oct-09 19:25
uuware1-Oct-09 19:25 
GeneralRe: Demo Pin
ac-chan9-Oct-09 11:48
ac-chan9-Oct-09 11:48 
GeneralRe: Demo Pin
uuware12-Oct-09 14:47
uuware12-Oct-09 14:47 
GeneralVery Nice Work Pin
Abhijit Jana29-Sep-09 10:53
professionalAbhijit Jana29-Sep-09 10:53 
JokeRe: Very Nice Work [modified] Pin
uuware29-Sep-09 14:40
uuware29-Sep-09 14:40 
GeneralOf browser compatibility ... Pin
Member 33441294-Jul-09 3:45
Member 33441294-Jul-09 3:45 
Thank you for the exceptionally great js-library!

I notices that the script-library worked well in IE, Firefox and Safari,
but, in Opera (in the latest version) the resizing did not work.

I would like to ask if it is too much to be asked if you could
work on the library yet a bit more to bring its compability to
Opera too (and maybe Chrome that I have not tested)?

Thank you very much,

Matti
GeneralRe: Of browser compatibility ... Pin
uuware5-Jul-09 15:20
uuware5-Jul-09 15:20 
GeneralRe: Of browser compatibility ... Pin
Member 33441296-Jul-09 0:10
Member 33441296-Jul-09 0:10 
GeneralRe: Of browser compatibility ... Pin
uuware6-Jul-09 0:37
uuware6-Jul-09 0:37 
GeneralRe: Of browser compatibility ... Pin
Member 33441296-Jul-09 13:30
Member 33441296-Jul-09 13:30 
GeneralRe: Of browser compatibility ... Pin
uuware6-Jul-09 14:46
uuware6-Jul-09 14:46 
GeneralBrowser Back Button Pin
cwlocke25-Jun-09 10:08
cwlocke25-Jun-09 10:08 
GeneralRe: Browser Back Button Pin
uuware30-Jun-09 18:01
uuware30-Jun-09 18:01 
GeneralVery nice Pin
Jimmiepotter24-Jun-09 8:30
Jimmiepotter24-Jun-09 8:30 
JokeRe: Very nice Pin
uuware24-Jun-09 11:46
uuware24-Jun-09 11:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.