テーマ設定:
タブ付きのフローティングウィンドウ
Online Demo
The FTab(Floating Tabs) is published on CodeProject. There you will find the discussion board. 
このページはタブ付きのフローティングウィンドウを紹介します。
open online demo: demo

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

サンプル2

使い方
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ボタンをクリックしてみてください。

Copyright© 2007-2015 uuware.com. All Rights Reserved.
Powered by Web No Coding