【在覆盖层上处理tabview】
在各式各样的业务中、覆盖层的使用给我们带来了很多的方便;tabview也不例外,在比较特殊的业务中需要处理覆盖层上显示tabview;我选择两个JQUERY的插件。
[list]
【1】thickbox 覆盖层 [url]http://jquery.com/demo/thickbox/[/url]
【2】jquery.tabs tabview[url]http://stilbuero.de/jquery/tabs_3/[/url]
[/list]
在适当的位置上下载插件的例子。
需要导入的js \ css文件
js代码 十分的简单
覆盖层的超链接
弹出层里的HTML代码
在各式各样的业务中、覆盖层的使用给我们带来了很多的方便;tabview也不例外,在比较特殊的业务中需要处理覆盖层上显示tabview;我选择两个JQUERY的插件。
[list]
【1】thickbox 覆盖层 [url]http://jquery.com/demo/thickbox/[/url]
【2】jquery.tabs tabview[url]http://stilbuero.de/jquery/tabs_3/[/url]
[/list]
在适当的位置上下载插件的例子。
需要导入的js \ css文件
<script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="thickbox-compressed.js" type="text/javascript"></script>
<script src="jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="jquery.tabs.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.tabs.css" type="text/css" media="print, projection, screen">
<link rel="stylesheet" href="thickbox.css" type="text/css" media="print, projection, screen">
js代码 十分的简单
<script type="text/javascript">
$(function() {
$('#container-1').tabs();
});
</script>
覆盖层的超链接
<a href="#TB_inline?height=455&width=600&inlineId=dispalyDIV&modal=true" class="thickbox">弹出层</a>
弹出层里的HTML代码
<div id="displayDIV" style="display:none">
<div id="container-1">
<ul>
<li><a href="#fragment-1"><span>默认文件夹</span></a></li>
<li><a href="#fragment-2"><span>Java文件夹</span></a></li>
<li><a href="#fragment-3"><span>.net文件夹</span></a></li>
</ul>
<div id="fragment-1">
<p>默认文件夹</p>
<pre><code>$('#container').tabs();</code></pre>
</div>
<div id="fragment-2">
<P>java文件夹</P>
</div>
<div id="fragment-3">
<P>.net文件夹</P>
</div>
</div>