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