|
タブ付きのフローティングウィンドウ Online Demo
The FTab(Floating Tabs) is published on CodeProject. There you will find the discussion board.
About FTab
FTab(タブ付きのフローティングウィンドウ)はウェブページにタブ付きのウィンドウを作成します。マウスでウインドウを移動、サイズ変更などは出来ます。 FTabはクッキーにウインドウのサイズ、位置、状態、ZIndex、選択されたTabページなどを保存します。'cookie:0;'でこの機能をオフにします。サンプルにウィンドウを変更して、ページを更新してください。 配置は簡単です。<DIV>に表示したい内容を入れて、javascriptを呼び出せばウィンドウを作れます。 模様はサンプルを見てください。IE5.5,IE6,Firefox2,Firefox3, Opera, Google Chrome and Safariでテストしました。
サンプル1
ftab2(not set left&top, but width&height="100%", also no title and no status).
so height is relatived to text(content).
this is Page1.
Page2
this is Page2
this is Page3
サンプル2
ftab_e1(not set left&top, but with 'tab:0;expandable:1;').
so height is relatived to text(content).
this is Page1.
ftab_e2(not set left&top, but with 'tab:0;expandable:1;').
ftab_e3(with 'tab:0;expandable:1;').
so height is relatived to text(content).
1, add this in head.
<link rel="stylesheet" href="ftab.css">
<script type="text/javascript" src="ftab.js"></script>
2, add contents in 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>
1, params for initialize FTab.
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;expandable:0;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.
If set 'expandable:1;'(default is 0), then auto set this style:
noTitle = false;
noResize = true;
noMinMax = true;
noClose = true;
noMove = true;
noStatus = true;
2, after initialize, can use this functions.
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, support for user's event.
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 + '.';
}
Customize for user.
click "ExtStyle" buttons in example page.
floating window without tabs.
使い方
1、head部分に、JavaScript、CSSを別々にソースを載せます。 <link rel="stylesheet" href="ftab.css"> <script type="text/javascript" src="ftab.js"></script>
2、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、コンテンツの後ろに、起動ソースを入れます。 <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ボタンをクリックしてみてください。
|