你的位置是:网站首页--- 技术文章---个网设计

一个强大的JS选项卡控件


【 字体:


写在前面:使用javascript就可以实现比较强大的选项卡控件(.Net中一般叫TabControl),下面介绍的TabControl控件相当的漂亮和专业,WebForm的程序员可以很方便地把它打包成.NET控件。

源代码
http://www.codeproject.com/KB/HTML/ftab.aspx

效果图
这一款控件被作者称为FTab。
 

介绍
FTab(浮动选项卡)是一个很酷的DHTML浏览控件,可以提供选项卡查看的功能。这个浮动的窗体可以移动,重置大小,最大化,最小化。并且上述状态可以被保存到Cookie中。配置是相当的容易的,你只要把你的内容放在不同的选项卡中,然后调用下面的代码就可以:

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


这样这一个很酷的有选项卡的视窗就会出现了。你还可以创建一个不浮动的视窗。你可以打开示例代码去看看真实的效果。控件支持IE5.5,IE6,Firefox2和Firefox3。

使用代码
下面显示一个简单例子
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>

更多内容请浏览原网页
 



出处:小作坊网Chakman

Copyright © 2006-2008 小作坊网 All rights reserved.
备案号:粤ICP备09058104号          电子信箱: jingle_guan#163.com