FTab(Floating Tabs)

タブ付きのフローティングウィンドウ

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

このページはタブ付きのフローティングウィンドウを紹介します。

FTab(タブ付きのフローティングウィンドウ)はウェブページにタブ付きのウィンドウを作成します。マウスでウインドウを移動、サイズ変更などは出来ます。
FTabはクッキーにウインドウのサイズ、位置、状態、ZIndex、選択されたTabページなどを保存します。'cookie:0;'でこの機能をオフにします。サンプルにウィンドウを変更して、ページを更新してください。
配置は簡単です。<DIV>に表示したい内容を入れて、javascriptを呼び出せばウィンドウを作れます。
模様はサンプルを見てください。IE5.5，IE6，Firefox2，Firefox3, Opera, Google Chrome and Safariでテストしました。

１、head部分に、JavaScript、CSSを別々にソースを載せます。
<link rel="stylesheet" href="ftab.css">
<script type="text/javascript" src="ftab.js"></script>

２、body部に適当のところで、表示するコンテンツを入れます。

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


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



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


</div>


３、コンテンツの後ろに、起動ソースを入れます。
<script type="text/javascript">
FTab('ftab1',330,90,160,50,'');
</script>

１、起動パラメータ設定。
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.

２、起動後制御関数。
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)

３、ユーザイベントもサポートします。
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 Download All FTab files - 17 Kb

使い方

面白いところ

１、起動パラメータ設定。
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.

２、起動後制御関数。
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);

３、ユーザイベントもサポートします。
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ボタンをクリックしてみてください。