65.9K
CodeProject 正在变化。 阅读更多。
Home

FTab（浮动选项卡）

uuware
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.92/5 (22投票s)

2009 年 6 月 13 日

CPOL

2分钟阅读

viewsIcon

94807

downloadIcon

399

FTab（浮动标签）是一个很酷的跨浏览器 DHTML 浮动窗口脚本，支持标签。

引言

FTab（浮动标签）是一个很酷的跨浏览器 DHTML 浮动窗口脚本，支持标签。浮动窗口可以移动/调整大小/最小化/最大化/固定/显示模态框，并且状态（大小/位置/最小化/最大化或其他）可以保存到 cookie 中。配置非常简单，你只需要将你的内容放入单独的标签中，然后调用

FTab('ftab1',left, top, width, height, style)

就会显示一个很酷的带有标签的浮动窗口！你也可以创建一个没有浮动的窗口。打开示例页面，看看 FTab 多么酷！
支持多种浏览器，例如 Internet Explorer、Opera、Firefox、Google Chrome 和 Safari。

Using the Code

这里展示了一个简单的代码。有关完整功能，请参阅 演示页面。

  1. 在 head 中添加
    <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. 在内容之后，添加 JavaScript 来初始化 FTab
    <script type="text/javascript"> 
FTab('ftab1',330,90,160,50,''); 
</script>

关注点

  1. 初始化 FTab 的参数
    function FTab(tabID, left, top, width, height, style, showPageIndex)

    可以这样使用：（注意不要使用 'new'，例如 var o = new FTab(...)，但即使使用 'new' 也不会出错。）

    var o = FTab(tabID,10,10,200,160, 
  'title:1;minmax:1;close:1;move:1;status:1;resize:1;scroll:1;tab:1;',0);
  o.show(pageIndex);

    作为选项，这里是所有选项（1 表示默认值为 true）

    title:1;minmax:1;close:1;move:1;status:1;resize:1;scroll:1;tab:1;
  tabrect:1;expandable:0;cookie:1;modal:0;center:0;

    也可以这样使用

    FTab(tabID,10,10,200,160,'').show(pageIndex);

    创建 FTab 时，你需要这些参数（left、top 等），但下次，你只需要 tabID 来引用 FTab。
    对于样式，所有参数的默认值为 1。如果没有标题（title:0），即使将它们设置为 1，也不会有关闭和最小化/最大化按钮，也不会有移动功能。如果没有状态（status:0），则没有调整大小的功能。
    如果设置 'expandable:1;'（默认值为 0），则自动设置此样式

    noTitle = false;
noResize = true;
noMinMax = true;
noClose = true;
noMove = true;
noStatus = true;
noFixed = true;
modal = false;
center = false;
  2. 初始化后，你可以使用这些函数
    function show(pageIndex);
function switchMinMax();
function switchFixed();
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 isFixed();
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" 按钮。

历史

  • 首次发布于 2008/07/08
  • 于 2008/8/22 更新 - 添加了可扩展样式
  • 于 2009/6/07 更新 - JS 源代码被压缩，仅为 11 KB！
  • 于 2009/6/21 更新 - 添加了固定和模态对话框功能。

有关详细信息，请访问 最新版本和演示。

© . All rights reserved.