在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;

}