在Asp.net中使用dojo的splitContainer控件

在vs2005为winForm编程,有splitContainer控件可以用;可webForm可就没有这么个东西了。去问了赵老师,他说“试试dojo的splitContainer”,于是我查了N多资料捣鼓了1天终于搞定了,下面来总结一下这次收获的经验。效果图:
在Asp.net中使用dojo的splitContainer控件_第1张图片

如何使用dojo中的某个控件

  1.  去官方网站下载最新版本的dojo,我用的是0.4.1的。
  2.  将其解压缩后放在项目所在目录下的js目录下
  3.  在网页的<head>标记内,做一次这样的引用,算是让js读取dojo相关的命名空间
      < script type = " text/javascript "  src = " js/dojo/dojo.js " ></ script >  
  4.  紧跟其后,要这样来引用控件相关的类,例如本文中要使用的是splitContainer
            dojo.require( " dojo.widget.SplitContainer " );
            dojo.require(
    " dojo.widget.ContentPane " );
  5. 因为dojo是开源的,您可以在dojo\tests\widget目录下找到相应控件的使用方法,并且可以在这里查找每个方法的说明文档
  6. 根据sample得知,这样写就可以让splitContainer生效,其中SplitContainerorientation决定了其水平方式分栏还是垂直方式分栏,style中的border属性决定了分隔条的风格。而两个ContentPane在其内即决定了分两栏,overflow设置为auto决定了在拖动分隔条时左右两侧的内容不会重叠。
    < div  id ="SplitContainer1"  dojoType ="SplitContainer"  
            orientation
    ="horizontal"
            sizerWidth
    ="5"
            activeSizing
    ="false"
            style
    ="border: 1px solid black; float: left; width: 100%; height: 100%;" >
          
    < div  id ="ContentPane1"  dojoType ="ContentPane"  sizeMin ="20"  sizeShare ="20"  style ="overflow:auto" >
            
    <!-- 左侧的内容 -->
          
    </ div >                                     
          
    < div   id ="ContentPane2"   dojoType ="ContentPane"  sizeMin ="50"  sizeShare ="50"   style ="overflow:auto" >
            
    <!-- 右侧的内容 -->
          
    </ div >       
    </ div >

 配合asp.net使用的注意事项

  1.  由于dojo使用的标记不符合xhtml1.0的规范,因此需要去掉webForm开头部分声明的这句话,否则无法使用
    <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
  2. 考虑到大部分使用这种左右分栏结构的人同时需要收缩一侧的效果,写了如下的代码将其实现,注意调用的时候要这样写onclick="fac(event)"来兼容IE和FF
             function  fac(evt)
            
    {
                evt
    =evt?evt:window.event;
                
    var oTarget=evt.srcElement||evt.target;            
                oTarget.disabled
    ="disabled";            
                
    if (!dojo.widget.byId("SplitContainer1").isHide)
                
    {
                    dojo.widget.byId(
    "SplitContainer1").removeChild(dojo.widget.byId("ContentPane1"));
                    dojo.widget.byId(
    "SplitContainer1").isHide=true;
                    oTarget.value
    =">>";
                }

                
    else
                
    {
                    dojo.widget.byId(
    "SplitContainer1").removeChild(dojo.widget.byId("ContentPane2"));
                    dojo.widget.byId(
    "SplitContainer1").addChild(dojo.widget.byId("ContentPane1"));         
                    dojo.widget.byId(
    "SplitContainer1").addChild(dojo.widget.byId("ContentPane2"));
                    dojo.widget.byId(
    "SplitContainer1").isHide=false;
                    oTarget.value
    ="<<";
                }

                oTarget.disabled
    ="";
            }
  3. 若配合msAjax控件一同使用,例如要用到updatePanel时,不要把整个splitContainer都放在一个updatePanel中,应尽量分几栏放几个,否则在回调之后,页面上的div标签的class属性都会消失得无影无踪,造成dojo控件失效。
  4. 去掉开头xhtml的声明之后会有产生一个并发症,某些ajax control toolkit的控件将不正常!

你可能感兴趣的:(asp.net)