在DNN站点中加上Tabs效果，并实现在tab中添加模块

在DNN站点中加上Tabs效果，并实现在tab中添加模块
为了实现如题的目标，我首先去群里和论坛上寻找已有成熟方案的建议。在此给

出我在论坛上的帖子：http://anforen.5d6d.com/thread-298-1-1.html

经过这番过程，我知道了我要作的是在皮肤中添加js和html及css代码。而不是像

最初想到的通过添加一个模块到DNN中，再在这个模块的tab中添加另一模块。当

然，这种方案能否实现，我还是不知道。希望有知道的朋友能回复一下。

我找到“Tab通用切换效果

http://www.85flash.com/Get/wangyejiqiao/Xhtml/2008-

9/9/20_45_16_732.html”将上面多余的代码去掉，将其粘贴到皮肤的index.ascx

文件中，但由于放在已有的RightPane窗格同一个<td></td>标签中，结果在添加

module的界面上，始终没有找到新添加的这个tab pane，经过一番试验，找到原

因，将新添的tab pane放到单独的<td>标签中，这样，就可以直接添加module到

对应的pane中了。当然，也实现在每个tab中新增一个module的目标。在这里需要

注意的是：由于添加的span div td等标签，都需要加上runat="server",才能在

添加module时，找到对应的pane，(详见：

http://www.cnblogs.com/boy119/archive/2005/11/11/48458.html 关于dnn中

Pane的疑问)。此时，我发现一个怪问题，估计和这个runat有关。

此问题是这样的，共有5个tab，当我将module及用来添加module的pane添加到

tab1和tab3时，前三个tab都可以看到内容，而tab4和tab5看不到内容，也没有错

误提示。后来，我将pane和module添加到tab5，这样，5个tab都可以正常的显示

内容了。

目标基本达到了，现在的任务就是让代码更整洁了。

在查看测试页面时，注意到IE提示，有错误，查看details，按提示找到错误代码

，是提示js代码中有对象找不到，将此代码删除掉，因为我们的确没有用到此对

象。而原代码中又有定义。问题解决。

还有就是需要将js代码和css代码从index.ascx中分离出来。

将css添加到skin.css以及ie6skin.css中。

将js单独保存为tab.js放到皮肤当前目录下。

新的问题又来了，那就是调用tab.js的代码需要解决这个文件的引用路径问题，

因为不同的DNN安装，肯定有不同的虚拟目录。

最后以“skin dnn path js src”为关键字，才google到方法(详见：

http://dnnuke.blogspot.com/2007/12/integrating-lightbox-js-2033-

image.html)，
像这样，就解决了问题。




Code
<script src="<%=skinpath%>tab.js" type="text/javascript"></script>


附相关代码片断：

这是tab.js的代码



function scrollDoor(){
}
scrollDoor.prototype = {
sd : function(menus,divs,openClass,closeClass){
var _this = this;
if(menus.length != divs.length)
{
alert("菜单层数量和内容层数量不一样!");
return false;
}
for(var i = 0 ; i < menus.length ; i++)
{
_this.$(menus[i]).value = i;


_this.$(menus[i]).onmouseover = function(){

for(var j = 0 ; j < menus.length ; j++)
{


_this.$(menus[j]).className =

closeClass;
_this.$(divs[j]).style.display

= "none";
}
_this.$(menus[this.value]).className =

openClass;
_this.$(divs[this.value]).style.display

= "block";
}
}
},
$ : function(oid){
if(typeof(oid) == "string")
return document.getElementById(oid);
return oid;
}
}
window.onload = function(){
var SDmodel = new scrollDoor();
SDmodel.sd(["m01","m02","m03","m04","m05"],

["c01","c02","c03","c04","c05"],"sd01","sd02");

}

接下来是html代码：



<%--这是tabs效果的html代码--%>
<div class="bodyer">
<h1 class="t_rt">
滑动门封装类
</h1>
<h2>
效果预览
</h2>
<div class="preview">
<div

class="scrolldoorFrame">
<ul

class="scrollUl">
<li

class="sd01" id="m01">滑动门</li>
<li

class="sd02" id="m02">滑动门</li>
<li

class="sd02" id="m03">滑动门</li>
<li

class="sd02" id="m04">滑动门</li>
<li

class="sd02" id="m05">滑动门</li>
</ul>
<div class="bor03

cont">
<div id="c01">
<div

id="SPAN1" class="BottomPane" runat="server">


sadfasf</div>
</div>
<div id="c02"

class="hidden">
第二层内容
</div>
<div id="c03"

class="hidden">
第三层内容
</div>
<div id="c04"

class="hidden">
第四层内容
</div>
<div id="c05"

class="hidden">
第五层内容

<div id="Div1" class="BottomPane" runat="server">


sadfasf</div>
</div>
</div>
</div>
</div>
</div>
<%--这是tabs效果的html代码--%>

====然后是css代码



body
{
margin: 0px;
padding: 0px;
font-size: 12px;
background: #eee;
line-height: 20px;
}
.bodyer
{
width: 560px;
margin: 20px auto auto;
border: 1px dotted #ccc;
background: #fff;
}
.t_rt
{
text-align: right;
}
h1, h2, h3, h4, h5, h6
{
font-weight: bold;
margin: 0px;
padding: 0px;
font-size: 12px;
}
ul, li
{
margin: 0px;
padding: 0px;
}
li
{
list-style-type: none;
}
h1
{
margin: 10px;
padding-right: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #ccc;
}
.preview
{
margin: 10px;
padding: 10px;
overflow: hidden;
background: #eee;
}
.cont
{
padding: 10px;
}
.cls
{
clear: both;
}
.hidden
{
display: none;
}
#sourse
{
border: 1px dotted #ccc;
width: 600px;
height: 300px;
margin: 0px auto;
}
.textDiv
{
margin: 10px 40px 10px;
text-align: center;
}
h2
{
margin: 0px 10px;
background: #ccc;
padding: 5px;
}
.example
{
margin: 10px;
background: #FFF;
border: 1px dotted #ccc;
padding: 10px;
}
.scrolldoorFrame
{
width: 400px;
margin: 0px auto;
overflow: hidden;
}
.scrollUl
{
width: 400px;
border-bottom: 1px solid #CCC;
overflow: hidden;
height: 35px;
}
.scrollUl li
{
float: left;
}
.bor03
{
border: 1px solid #ccc;
border-top-width: 0px;
}
.sd01
{
cursor: pointer;
border: 1px solid #CCC;
background: #FFF;
margin: 5px;
padding: 2px;
font-weight: bold;
}
.sd02
{
cursor: pointer;
border: 0px solid #CCC;
margin: 5px;
padding: 2px;
}