在Asp.net中使用dojo的splitContainer控件
2007-01-30 01:45
316 查看
在vs2005为winForm编程,有splitContainer控件可以用;可webForm可就没有这么个东西了。去问了赵老师,他说“试试dojo的splitContainer”,于是我查了N多资料捣鼓了1天终于搞定了,下面来总结一下这次收获的经验。效果图:
<script type="text/javascript" src="js/dojo/dojo.js"></script>
紧跟其后,要这样来引用控件相关的类,例如本文中要使用的是splitContainer
dojo.require("dojo.widget.SplitContainer");
dojo.require("dojo.widget.ContentPane");
因为dojo是开源的,您可以在dojo\tests\widget目录下找到相应控件的使用方法,并且可以在这里查找每个方法的说明文档
根据sample得知,这样写就可以让splitContainer生效,其中SplitContainer的orientation决定了其水平方式分栏还是垂直方式分栏,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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
考虑到大部分使用这种左右分栏结构的人同时需要收缩一侧的效果,写了如下的代码将其实现,注意调用的时候要这样写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="";
}
若配合msAjax控件一同使用,例如要用到updatePanel时,不要把整个splitContainer都放在一个updatePanel中,应尽量分几栏放几个,否则在回调之后,页面上的div标签的class属性都会消失得无影无踪,造成dojo控件失效。
去掉开头xhtml的声明之后会有产生一个并发症,某些ajax control toolkit的控件将不正常!
<script type="text/javascript" src="js/dojo/dojo.js"></script>
紧跟其后,要这样来引用控件相关的类,例如本文中要使用的是splitContainer
dojo.require("dojo.widget.SplitContainer");
dojo.require("dojo.widget.ContentPane");
因为dojo是开源的,您可以在dojo\tests\widget目录下找到相应控件的使用方法,并且可以在这里查找每个方法的说明文档
根据sample得知,这样写就可以让splitContainer生效,其中SplitContainer的orientation决定了其水平方式分栏还是垂直方式分栏,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使用的注意事项
由于dojo使用的标记不符合xhtml1.0的规范,因此需要去掉webForm开头部分声明的这句话,否则无法使用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
考虑到大部分使用这种左右分栏结构的人同时需要收缩一侧的效果,写了如下的代码将其实现,注意调用的时候要这样写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="";
}
若配合msAjax控件一同使用,例如要用到updatePanel时,不要把整个splitContainer都放在一个updatePanel中,应尽量分几栏放几个,否则在回调之后,页面上的div标签的class属性都会消失得无影无踪,造成dojo控件失效。
去掉开头xhtml的声明之后会有产生一个并发症,某些ajax control toolkit的控件将不正常!
相关文章推荐
- 不使用ASP.NET服务器端控件(包括form表单不加runat="server")来触发.cs里的事件(方法),(适用于有代码洁癖者)。
- ASP.NET 2.0中使用webpart系列控件
- AJAX技术与asp.net 2.0的完美结合之Timer的web应用 及使用AJAX控件时的“Sys 未定义”错误解决办法
- 使用ASP.NET AJAX Control Toolkit中的ReorderList控件实现用鼠标拖动改变条目顺序
- 使用ASP.NET Atlas编写显示真实进度的ProgressBar(进度条)控件
- [参考]一个ASP.Net的DataGrid分页控件,在Oracle数据库下,每次只取当前页的数据,不使用存储过程
- [ASP.NET-VII] ASP.NET 使用验证控件(RegularExpressionValidator)验证输入(TextBox)中的输入是否合法
- ASP.NET 2.0中使用sitemapdatasource页面导航控件
- ASP.NET 2.0 Login控件使用技巧(二) - 角色管理
- ASP.NET相关控件GridView和DetailsView的使用
- 在ASP.NET中使用ObjectDataSource数据控件和GridView操作数据
- ASP.NET 2.0使用FileUpload控件上传文件示例
- 牛腩购物12 :整合用户登录页 用到 asp.net 内置票据认证控件的使用(用户登录 用户权限) 用户控件ascx 设置/获取RadioButtonList 和RadioButton
- asp.net web 开发登录相关操作的控件LoginName、LoginStatus和LoginView控件使用详解
- 在 ASP.NET 页面中使用 TreeView 控件
- ASP.NET学习笔记--自定义验证控件的使用
- 表单验证ASP.NET RequiredFieldValidator 控件使用方法及使用实例
- ASP.NET 2.0中使用webpart系列控件
- ASP.NET GridView控件在列上格式化时间及DataFormatString使用