Ajax扩展控件
?
18.MutuallyExclusiveCheckBox(复选框相互排斥控件)
该控件可以使复选框实现类似单选框一样的相互排斥的效果
?
<asp:CheckBox ID="CheckBox1" runat="server" Text="黑" /> <ajax:MutuallyExclusiveCheckBoxExtender ID="CheckBox1_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="颜色" TargetControlID="CheckBox1"> </ajax:MutuallyExclusiveCheckBoxExtender> <asp:CheckBox ID="CheckBox2" runat="server" Text="白" /> <ajax:MutuallyExclusiveCheckBoxExtender ID="CheckBox2_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="颜色" TargetControlID="CheckBox2"> </ajax:MutuallyExclusiveCheckBoxExtender> <asp:CheckBox ID="CheckBox3" runat="server" Text="大" /> <ajax:MutuallyExclusiveCheckBoxExtender ID="CheckBox3_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="大小" TargetControlID="CheckBox3"> </ajax:MutuallyExclusiveCheckBoxExtender> <asp:CheckBox ID="CheckBox4" runat="server" Text="小"/> <ajax:MutuallyExclusiveCheckBoxExtender ID="CheckBox4_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="大小" TargetControlID="CheckBox4"> </ajax:MutuallyExclusiveCheckBoxExtender>?
只有一个值得一提的属性:Key(key属性相同的复选框相互排斥)
?
19.Nobot(拒绝机器人控件)
客户端的验证为了提高用户体验，服务器端的验证才是为了安全性。
http://www.cnblogs.com/abcdwxc/archive/2007/11/06/950816.html
http://www.cnblogs.com/dflying/archive/2007/03/16/676886.html
?
20.Rating(等级评定控件)
http://www.cnblogs.com/jaxu/archive/2009/05/16/1458264.html|推荐
HTML:
<ajax:Rating ID="Rating1" runat="server" StarCss?
WaitingStarCssEmptyStarCssCurrentRating="1"?
MaxRating="10" ?OnChanged="Stopawhile">
?</ajax:Rating>
CS:
using AjaxControlToolkit; ? ?//RatingEventArgs
protected void Stopawhile(object sender, RatingEventArgs e)
{
?? //Thread.Sleep(400);
?? ?str = e.Value; ?//e.Value得到的值就是客户选的等级,可在此将其写入数据库
?? Resoponse.Write("客户端看不见此句,但此句执行了");
//由于Rating本身就支持Ajax的无刷新效果,所以上一句Response是执行了,但由于没有回发,所以客户端看不见
}
CSS:
.ratingStar {
?? ?font-size: 0pt;
?? ?width: 13px;
?? ?height: 12px;
?? ?margin: 0px;
?? ?padding: 0px;
?? ?cursor: pointer;
?? ?display: block;
?? ?background-repeat: no-repeat;
}
.filledRatingStar {
?? ?background-image: url(../images/FilledStar.jpg);
}
.emptyRatingStar {
?? ?background-image: url(../images/EmptyStar.jpg);
}
.savedRatingStar {
?? ?background-image: url(../images/SavedStar.jpg);
}
?
?
21.TabContainer(多选项卡容器控件)
如果要在其内的某个TabPanel内添加服务端控件,需给该TabPanel加runat="server"
HTML:
??<ajax:TabContainer ID="TabContainer1" runat="server" Height="100px" Width="400px"?
??OnClientActiveTabChanged="ClientMethod" OnActiveTabChanged="TabPostBack"?
?? AutoPostBack="True">
?? ?<ajax:TabPanel ID="TabPanel1" HeaderText="Tab1" runat="server" ForeColor="Highlight">
?? ?<ContentTemplate>
?? ?<asp:TextBox ID="TextBox1" runat="server">123</asp:TextBox>
?? ?</ContentTemplate>
?? ?</ajax:TabPanel>
?? ?<ajax:TabPanel ID="TabPanel2" HeaderText="Tab2" runat="server">
?? ?<ContentTemplate>
?? ?<asp:TextBox ID="TextBox2" runat="server">456</asp:TextBox>
?? ?</ContentTemplate>
?? ?</ajax:TabPanel>
?? ?</ajax:TabContainer>
主要属性:
OnClientActiveTabChanged(Tab改变时激发的客户端方法,只能写方法名,不支持像Button控件那样OnClientClick中可加return)
OnActiveTabChanged(Tab改变时执行的服务器端方法,由于TabContainer本身支持回调,所以其跟Rating等级评
定控件一样,是"默默执行了服务端方法",要看到效果可加AutoPostBack="True"来增加回发)
??protected void TabPostBack(object sender, EventArgs e)
?? ? ? ?{ //TabContainer的ActiveTab属性可获得当前Tab
?? ? ? ? ? Label1.Text = TabContainer1.ActiveTab.HeaderText;
?? ? ? ?}
TabPanel有OnClientClick属性
TabContainer的高与宽设置的是所有TabPanel的高与宽(默认宽是整个网页的宽,高是根据其内部的控件多少来确定),貌似不能单独设置TabPanel的高与宽。
TabContainer的样式已经集成在其控件本身里面了,可以查看当时下载AjaxControlTookkit时的AjaxControlToolkit文件夹里的Tabs里的样式文件,然后按照其默认样式模板自定义在自己的项目中,这样就会取代其默认的样式
http://www.cnblogs.com/skywind/archive/2007/12/29/1019989.html
http://hejianlong.123.blog.163.com/blog/static/2671583920101943732476/
主要是要修改TabContainer的CssClass,查看网页源码可知,默认是ajax__tab_xp
http://tianmoboping.blog.163.com/blog/static/15739532200831234459235/
http://www.cnblogs.com/htht66/archive/2008/03/14/1104765.html
http://blog.csdn.net/High_Mount/archive/2009/12/17/5027043.aspx
?
?
22.ResizableControl(改变大小控件)
可以让页面中的任何控件具备大小缩放的功能,目前发现被缩放的控件只有被放到Panel控件才够完美,且该控件要设置style="width:100%;height:100%;",ResizableControl的TargetControlID=Panel的ID,这样就相当于通过调整Panel的大小间接调整该控件的大小,可以通过设置Panel的Width和Height来预先设置一个合适的大小。
HTML:
??<asp:Panel ID="Panel1" runat="server" Width="70" Height="35">
?<asp:Image ID="Image1" runat="server" ImageUrl="images/fan.jpg" style="width:100%; height:100%;"/>
?? ?</asp:Panel>
?? ?<ajax:ResizableControlExtender ID="ResizableControlExtender3" runat="server"
?? ? TargetControlID="Panel1" HandleCssMinimumHeight="20" MinimumWidth="20"
?? ? ?MaximumHeight="200" MaximumWidth="200" ResizableCssOnClientResize="Getime">
?? ?</ajax:ResizableControlExtender>
主要属性:
TargetControlID:最好像前面说的那么设置
HandleCssClass:要套用到把柄的样式表
ResizableCssClass:改变大小的时候目标控件的样式表
MinimumWidth:可调整大小的控件的最小宽度，默认值是0。
MinimumHeight:可调整大小的控件的最小高度，默认值是0。
MaximumWidth:可调整大小的控件的最大宽度，默认值是0。
MaximumHeight:可调整大小的控件的最大高度，默认值是0。
HandleOffsetX:把柄位置水平方向要偏离多少像素。
OnClientResize:当控件已经被调整大小之后,所要执行的JavaScript函数名称。
OnClientResizeBegin:当控件开始调整大小时,所要执行的JavaScript函数名称。
OnClientResizing:当控件正在被调整大小之后,所要执行的JavaScript函数名称。
CSS:
.handleImage
{ width:15px;
??height:16px;
??background-image:url(../images/HandleHand.jpg);
??overflow:hidden;
??cursor:se-resize;
}
.resizingImage
{ padding:0px;
??border-style:solid;
??border-width:3px;
??border-color:#B4D35D;
}
怎么通过javascript或后台代码(System.Drawing.Size)来得到或设置缩放大小在以下链接中有讲:
http://www.cnblogs.com/xlovey/archive/2007/11/22/967988.html
http://www.cnblogs.com/abcdwxc/archive/2007/11/09/954206.html
?
23.RoundedCornersExtender(添加圆角控件)
一定要通过Panel的属性设置高度或宽度(而不是在css里)否则将没有背景颜色的效果,但可以看到边框。
只设置宽度的话,Panel会根据其内容的高度来自动或高或低。
http://www.cnblogs.com/terrylee/archive/2006/08/09/atlas_roundedcorners_extender.html
http://www.cnblogs.com/abcdwxc/archive/2007/11/12/956939.html
http://www.cnblogs.com/zm235/archive/2008/05/09/1189558.html
