jquery 在覆盖层上处理tabview

【在覆盖层上处理tabview】


在各式各样的业务中、覆盖层的使用给我们带来了很多的方便；tabview也不例外，在比较特殊的业务中需要处理覆盖层上显示tabview；我选择两个JQUERY的插件。

【1】thickbox 覆盖层 http://jquery.com/demo/thickbox/
【2】jquery.tabs tabview http://stilbuero.de/jquery/tabs_3/

在适当的位置上下载插件的例子。
需要导入的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>$(&#039;#container&#039;).tabs();</code></pre>
	            </div>
	            <div id="fragment-2">
	               <P>java文件夹</P>
	            </div>
	            <div id="fragment-3">
	                <P>.net文件夹</P>
	            </div>
	        </div>