FTab(Floating Tabs) Online Help

Feedback & Discuss

Online Help for FTab

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

base use of FTab.

base use of FTab 2.

no floating tab window, but resize.

base floating window.

base floating window with some style.

inner browser.

add OK and Cancel button at status.

add inner tab window in window.

show window as tips.

List base use of FTab

more contents to show in tab window.
use of green style.

<html><head>
<title>FTab(Floating Tabs)</title>
<link rel="stylesheet" href="ftab.css">
<link rel="stylesheet" href="ftab_green.css">
<script type="text/javascript" src="ftab.js"></script>
<script type="text/javascript">
function init(){
FTab('ftab_s1',false,false,'100%','100%','title:0;status:0;tabrect:0;');
}
</script>
</head>
<body onload="init();">
<table style="width:100%;height:100%;">
<tr><td>
  more contents to show in tab window.<br>
  notice that resize to window's size.<br>
</td></tr>
<tr><td style="width:100%;height:100%;">

<div id="ftab_s1" title="ftab(width:100%;height:100%;&no title&no status)" style="display:none;width:100%;height:100%;">

<div title="Page1">
ftab(width:100%;height:100%;&no title&no status).<br>
style is "width:100%;height:100%;"<br>
this is Page1.<br>
this is Page1.<br>
this is Page1.<br>
this is Page1.<br>
this is Page1.<br>
this is Page1.<br>
</div>


<div title="Page2">
this is Page2<br>
this is Page2<br>
this is Page2<br>
this is Page2<br>
this is Page2<br>
this is Page2<br>
this is Page2<br>
this is Page2<br>
this is Page2<br>
</div>


<div title="Page3">
this is Page3<br>
this is Page3<br>
this is Page3<br>
this is Page3<br>
this is Page3<br>
this is Page3<br>
this is Page3<br>
</div>

</div>

</td></tr>
</table>
</body>
</html>

List base use of FTab 2

tab window with expandable style.

<html><head>
<title>FTab(Floating Tabs)</title>
<link rel="stylesheet" href="ftab.css">
<link rel="stylesheet" href="ftab_green.css">
<script type="text/javascript" src="ftab.js"></script>
<script type="text/javascript">
function init(){
//expandable,width must be fixed(can not auto resize even set with %)
FTab('ftab_s21',false,false,500,'','expandable:1;');
FTab('ftab_s22',false,false,500,'','tab:0;expandable:1;initmin:1;');
FTab('ftab_s23',false,false,500,'','expandable:1;initmin:0;');
}
</script>
</head>
<body onload="init();">
<table style="width:100%;height:100%;">
<tr><td>
  more contents to show in tab window.<br>
  notice ftab2 and ftab3 is same group, so can only open one of them.<br>
</td></tr>
<tr><td style="width:100%;height:100%;" valign="top">

<div id="ftab_s21" title="ftab1(expandable, no move&resize)" style="display:none;">

<div title="Page1">
expandable, no move&resize
</div>


<div title="Page2">
this is Page2<br>
this is Page2<br>
</div>


<div title="Page3">
this is Page3<br>
this is Page3<br>
this is Page3<br>
</div>

</div>

<div id="ftab_s22" title="ftab2(expandAble,ftab2 and ftab3 is one group)" group="ftab_exp" style="display:none;">

<div title="Page1">
ftab2(no floating,scrollbars)<br>
<table><tr><td nowrap>ftab_exp1 and ftab_exp2 is one group,so only one of them can expandable<br>
</td></tr></table>
this is Page1.<br>
</div>

</div>

<div id="ftab_s23" title="ftab3(expandAble,ftab2 and ftab3 is one group)" group="ftab_exp" style="display:none;">

<div title="Page1">
ftab3(no floating,scrollbars)<br>
<table><tr><td nowrap>ftab_exp1 and ftab_exp2 is one group,so only one of them can expandable<br>
</td></tr></table>
this is Page1.<br>
</div>


<div title="Page2">
this is Page2<br>
this is Page2<br>
</div>

</div>

</td></tr>
</table>
</body>
</html>

List no floating tab window, but resize

no floating tab window, but resize.

<div id="ftab_s3" title="ftab(no floating,scrollbars)" style="display:none;height:200px;">

<div title="Page1">
ftab(no floating,scrollbars)<br>
this page can resize,but no move.
<table><tr><td nowrap>this is Page1,this is Page1,this is Page1<br>
</td></tr></table>
this is Page1.<br>
</div>


<div title="Page2">
this is Page2<br>
this is Page2<br>
</div>

<br>
<br>
  some others text.<br>
  some others text.<br>
  some others text.<br>
  some others text.<br>
  some others text.<br>
  some others text.<br>
  some others text.<br>
  some others text.<br>
  some others text.<br>
</body>
</html>

List base floating window

how simply to has a floating window.

List base floating window with some style

simple window without close button and with status off.

List inner browser

brow out site in html page.

List add OK and Cancel button at status

add OK and Cancel button at status.

List add inner tab window in window

add inner tab window in window.

<div id="ftab_s8" title="ftab1, floating window(has tabpage inner)" style="display:none;">

<div title="this is Page1">
this is page1<br>
</div>

<div title="Page2">
this is page2<br>
</div>

<div title="Page3">
<input type="text" maxlength="25" id="ftab1_text">
<input type="button" value="set title" onclick="set_title()"><br>
<input type="button" value="set page title" onclick="set_title2()">
<input type="button" value="set status" onclick="set_status()">
<script type="text/javascript">
function set_title(){
  var oTmp = document.getElementById('ftab1_text');
  var o = FTab('ftab_s8');
  o.setTitle(oTmp.value);
}
function set_title2(){
  var oTmp = document.getElementById('ftab1_text');
  var o = FTab('ftab_s8');
  var s = oTmp.value.replace(/ /g, '');
  if(s.length<1)
    o.setTabTitle(2,'[no title]');
  else
    o.setTabTitle(2,oTmp.value);
}
function set_status(){
  var oTmp = document.getElementById('ftab1_text');
  var o = FTab('ftab_s8');
  o.setStatus(oTmp.value);
}
</script>

<br>
has inner tab:<br>

<div id="ftab_s82" title="ftab6, inner tabpage" style="display:none;">

<div title="Page1">
this is page1<br>
</div>

<div title="Page2">
this is page2<br>
this is page2<br>
</div>

</div>

</div>

</div>

</body>
</html>

List show window as tips

show window as tips.

<a href="#" onmousemove="tips_mon(event,'ftab_tips1')" onmouseout="tips_mout('ftab_tips1')">move mouse here</a>, same tips but different position:
<a href="#" onmousemove="tips_mon(event,'ftab_tips1')" onmouseout="tips_mout('ftab_tips1')">move mouse here</a>

<div id="ftab_tips1" title="Tips" style="display:none;">

<div title="Page1">
this is sample for tips:<br>
<img src="uuhedt.png">
</div>

</div>

function tips_mon(e, id){
 e = e || window.event;
 var p = mousePosition(e);
 var o = FTab(id,p.x+10,p.y+20,400,260,'tab:0;scroll:0;close:0;resize:0;fixed:0;minmax:0;');
 o.move(p.x+20,p.y+10);
 o.show();
}
function tips_mout(id){
  FTab(id).hide();
}
</script>

</body>
</html>

Development programme is HAPPINESS, but real life is oppressive, need your donations to enhance this soft.
If you donate 10~$, then you can ask me to make javascript or others code for you!