之前为了使用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>