在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;
}
需要拷贝以下三个文件到你的目录
<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>
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>
我的布局是经典的左侧treeview，右侧gridview，两者皆放在updatePanel中，然后再放入div搭建的页面结构。
首先是aspx的代码：
- /App_Code/SplitterBar.cs （注意是App_Code目录，而不是App_Data目录）
- /image/VwdCmsSplitterBar.js
- /image/vsplitter.gif
然后在head段添加js，包含引入其js文件及一个更改spliter大小后的事件的响应
好了，编译一下，看看是不是大功告成了！
本文参考了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，代码为
</table>
转载于:https://www.cnblogs.com/doraeimo/archive/2007/07/21/826639.html