FTab(有Tab的浮动窗口)

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

关于本网站制作的FTab(有Tab的浮动窗口)的介绍。

FTab(有Tab的浮动窗口)可以在网页内建立含有Tab页的浮动窗口。可以用鼠标来拖动或改变窗口大小。
FTab使用cookie来保存窗口大小，位置和状态（最小化或正常），活动Tab页的索引，甚至窗口的前后顺序。当然可以用'cookie:0;'来不使用这些功能。在例子中，请尝试改变窗口大小或位置然后刷新。
FTab很容易配置，把内容放入<DIV>中然后执行javascript就可以了。
更多的请参看例子页面。IE5.5，IE6，Firefox2，Firefox3, Opera, Google Chrome and Safari中运行测试过。
后记：3，4年前为了在Web系统的网页中选择日期，做过浮动的窗口。只是IE的版本。最近在Web系统中好像越来越多的有Tab的应用了。刚好有点空，就把原来的程序大改了一遍，也参照的其他网站的Tab。并且把程序全部公开了。希望你能喜欢。

1，在网页head部，加入装载JavaScript，CSS的下列代码。
<link rel="stylesheet" href="ftab.css">
<script type="text/javascript" src="ftab.js"></script>

2，在body的适当地方，加入想表示的内容。

<div id="ftab1" title="ftab1's title" style="display:none;">


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



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


</div>


3，在表示内容的后面，加入启动的JavaScript代码。
<script type="text/javascript">
FTab('ftab1',330,90,160,50,'');
</script>

1，启动参数的设定。
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;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.

2，启动后可以使用的函数。
function show(pageIndex)
function switchMinMax()
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，加入了支持用户事件的功能。
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 + '.';
}

窗体的颜色，文字色都可以自由配置。
请点击例子的ExtStyle按钮看看效果。

例子
打开例子网页： ftab.html

下载
Ver 1.0 下载FTab的所有文件 - 17 Kb

使用方法

有意思的地方

1，启动参数的设定。
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;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.

2，启动后可以使用的函数。
function show(pageIndex);
function switchMinMax();
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，加入了支持用户事件的功能。
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 + '.';
}

还想扩展
窗体的颜色，文字色都可以自由配置。请点击例子的ExtStyle按钮看看效果。