在asp.net中使用符合xhtml规范的spliter控件

之前为了使用spliter而尝试了dojo，有一个很严重的问题，其对xhtml规范支持得不好，使用时必须去掉xhtml的声明，这样一来，某些ms ajax control toolkit将无法正常使用。为了寻求更好的方法，我一直没有放弃，最近终于找到了这样一个spliter控件，它能支持xhtml，并且使用起来也很方便，接下来介绍其使用方法。

我的布局是经典的左侧treeview，右侧gridview，两者皆放在updatePanel中，然后再放入div搭建的页面结构。

首先是aspx的代码：

         < div  id ="pagebody" >
             < div  id ="sidebar" >
                 < %-- 左侧栏--% >              
             </ div >
             < div  id ="spliter" ></ div >
             < div  id ="mainbody" >
                 < %-- 右侧栏--% >
             </ div >         
         </ div >
 
         < div >             
             < input  id ="splitWidth"  value ="250px"   />
         </ div >
         < VwdCms:SplitterBar  runat ="server"  ID ="SplitterBar2"  
            LeftResizeTargets ="sidebar"  
            MinWidth ="0"  
            MaxWidth ="500"         
            BackgroundColor ="lightsteelblue"  
            BackgroundColorLimit ="firebrick"
            BackgroundColorHilite ="steelblue"
            BackgroundColorResizing ="purple"
            SaveWidthToElement ="splitWidth"
            OnResize ="splitterOnResize"        
            style ="background-image:url(image/vsplitter.gif);
                background-position:center center;
                background-repeat:no-repeat;" />      

然后是相应的css代码

#pagebody
{} {
    width: 100%;
    height: 100%;
    border:solid 1px #6699CC;
}
#sidebar
{} {
    /**//*width:169px;*/
    width:300px;
    height:500px;
    overflow:auto;
    clear:left;
    float:left;
}
#spliter
{} {    
    width:6px;
    height:500px;
    background-color:#6699CC;
    float:left;
}
#mainbody
{} {    
    height:500px;
    overflow:auto;
    float:left;
    clear:right;    
}

需要拷贝以下 三个文件到你的目录

1. /App_Code/SplitterBar.cs （注意是App_Code目录，而不是App_Data目录）
2. /image/VwdCmsSplitterBar.js
3. /image/vsplitter.gif

然后在head段添加js，包含引入其js文件及一个更改spliter大小后的事件的响应

< head  runat ="server" >
     < title > PMX Web Edition BETA 0.4.0708 </ title >
     < link  href ="StyleSheet.css"  rel ="stylesheet"  type ="text/css"   />
     < script  src ="js/VwdCmsSplitterBar.js"  type ="text/javascript" ></ script >
     < script  language ="javascript"  type ="text/javascript" >
        function splitterOnResize(width)
        {
            // do any other work that needs to happen when the 
            // splitter resizes. this is a good place to handle 
            // any complex resizing rules, etc.

            // make sure the width is in number format
            if (typeof width == "string")
            {
                width = new Number(width.replace("px",""));
            }

            // now do something
        }        
     </ script >     
</ head >

然后更新web.config文件的system.web段，引入控件使用的VwdCms命名空间

     < pages >
         < controls >
             < add  tagPrefix ="VwdCms"  namespace ="VwdCms" />  
         </ controls >
     </ pages >

好了，编译一下，看看是不是大功告成了！

本文参考了http://www.codeproject.com/useritems/VwdCmsSplitterBar.asp
它的例子使用的是table而不是div，我将其改为div后发现其仍然可用，这样就满足xhtml的要求了，在顶部加上xhtml的doctype也不会像dojo那样发生问题，可以和ms的ajax控件很好的合作。

 07.08.07 补充，原来官方的例子有一个bug，onresize回调函数的方法签名应该是function splitterOnResize(sbar,width)，查了源码才弄清楚为什么回调总是得不到变更后的width，顺便应用了一下ajax的自定义profile，代码为

         function  splitterOnResize(sbar,width)
         {
            // do any other work that needs to happen when the 
            // splitter resizes. this is a good place to handle 
            // any complex resizing rules, etc.

            // make sure the width is in number format
            if (typeof width == "string")
            {
                width = new Number(width.replace("px",""));
            }

            // now do something
            
            Sys.Services.ProfileService.properties.SidebarWidth=width;            
            Sys.Services.ProfileService.save();
        }

07.10.20补充，在经过一段时间的探索后，终于明白了原作者为什么会选择使用table而非div作为例子，因为ff中，不指定divR的宽度，允许其自适应浏览器的宽度后，其子元素必须指定具体宽度，而无法做到自适应了，当希望子元素宽度和divR一致，使用100%作为宽度值时，其百分比的参照物为浏览器而非其父元素即divR，因为父元素没有被指定宽度。为了避免严重错位的情况发生，推荐大家也使用table。
 

< table  id ="pagebody"  style ="width:100%;height:500px;border:solid 1px #6699CC;overflow:auto;" >
             < tr  style ="height:500px;overflow:auto;" >
                 < td  id ="sidebar"  align ="left"  valign ="top"  style ="width:300px;height:500px;overflow:auto" >
                     < div  id ="divTree1"  style ="width:300px;height:500px;overflow:auto;padding:0px;margin:0px;" >
                      <% --左侧栏-- %>
                     </ div >
                 </ td >                 
                 < td  id ="spliter"  style ="height:500px;width:1px;background-color:#6699CC;" ></ td >
           
                 < td  id ="mainbody"  align ="left"  valign ="top"  style ="height:500px;overflow:auto" >
                     < div  style ="height:500px;overflow:auto;padding:0px;margin:0px;" >
                      <% --右侧栏-- %>
                     </ div >
                 </ td >
             </ tr >
</ table >