在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
附相关代码片断：
这是tab.js的代码
}
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代码：
<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;
}
