九.ResizableControlExtender
主要属性：
1.TargetControlID:需要自动缩放的元素的ID
2.HandleCssClass:控制自动缩放元素的手柄样式
3.ResizableCssClass:恢复到需要的尺寸时候需要自动缩放的元素的样式
4.MinimumWidth/MinimumHeight:元素能的最小宽度，高度
5.MaximumWidth/MaximumHeight:元素的最大高度，宽度
6.OnClientResizeBegin:元素开始自动大小的时候触发的浏览器事件
7.OnClientResizing:元素正在自动适应大小后浏览器的事件
8.OnClientResize:元素完成自动适应大小后浏览器的事件
9.HandleOffsetX/HandleOffsetY:执行拖动的手柄离拖动元素的坐标
aspx:
Code
<head runat="server">
<title></title>
<%-- <link href="StyleSheet.css" type="text/css" charset="GB2312" />--%>
<style type="text/css">
.frameImage
{
width:130px;
height:65px;
overflow:hidden;
float:left;
padding:3px;
}
.frameText
{
width:100px;
height:100px;
overflow:auto;
float:left;
background-color:#ffffff;
border-style:solid;
border-width:2px;
border-color:Gray;
font-family:Helvetica;
line-height:normal;
}
.handleImage
{
width:15px;
height:16px;
background-image:url(images/HandleHand.png);
overflow:hidden;
cursor:se-resize;
}
.handleText
{
width:16px;
height:16px;
background-image:url(images/HandleGrip.png);
overflow:hidden;
cursor:se-resize;
}
.resizingImage
{
padding:0px;
border-style:solid;
border-width:3px;
border-color:#B4D35D;
}
.resizingText
{
padding:0px;
border-style:solid;
border-width:2px;
border-color:#7391BA;
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True" EnableScriptLocalization="True" >
</asp:ScriptManager>
<div class="demoarea">
<div class="demoheading">ResizableControl Demonstration</div>
<p><strong>Resizable image with buttons for automatic resizing</strong></p>
<asp:Panel ID="PanelImage" runat="server" CssClass="frameImage">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/AJAX.gif"
AlternateText="ASP.NET AJAX" style="width:100%; height:100%;" />
</asp:Panel>
<div style="float: right; width: 160px; border: 1px dotted Gray; text-align: right">
<asp:LinkButton ID="Button1" runat="server" Text="Submit" /><br />
<asp:LinkButton ID="Button2" runat="server" Text="Shrink (via Server)" OnClick="Button2_Click" /><br />
<asp:LinkButton ID="Button3" runat="server" Text="Grow (via Client)" OnClientClick="return OnClientClickGrow();" /><br />
<p id="lastResize">Last image resize: Unknown</p>
</div>
<p></p>
<p><strong>Resizable text with "onresize" event handler</strong></p>
<asp:Panel ID="PanelText" runat="server" CssClass="frameText">
This text resizes itself to be as large as possible within its container.
</asp:Panel>
<script type="text/javascript">
function OnClientClickGrow () {
var rcp = $find('ResizableControlBehavior1');
var size = rcp.get_Size();
rcp.set_Size( { width: size.width*2, height: size.height*2 } );
return false;
}
function OnClientResizeImage(sender, eventArgs) {
$get("lastResize").innerHTML = "Last image resize at " + (new Date()).toString();
}
var fontSize = 12;
function OnClientResizeText(sender, eventArgs) {
// This sample code isn't very efficient, but demonstrates the idea well enough
var e = sender.get_element();
// Make the font bigger until it's too big
while((e.scrollWidth <= e.clientWidth) || (e.scrollHeight <= e.clientHeight)) {
e.style.fontSize = (fontSize++)+'pt';
}
var lastScrollWidth = -1;
var lastScrollHeight = -1;
// Make the font smaller until it's not too big - or the last change had no effect
// (for Opera where e.clientWidth and e.scrollWidth don't behave correctly)
while (((e.clientWidth < e.scrollWidth) || (e.clientHeight < e.scrollHeight)) &&
((Sys.Browser.agent !== Sys.Browser.Opera) || (e.scrollWidth != lastScrollWidth) || (e.scrollHeight != lastScrollHeight))) {
lastScrollWidth = e.scrollWidth;
lastScrollHeight = e.scrollHeight;
e.style.fontSize = (fontSize--)+'pt';
}
}
</script>
<ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server"
BehaviorID="ResizableControlBehavior1"
TargetControlID="PanelImage"
ResizableCssClass="resizingImage"
HandleCssClass="handleImage"
MinimumWidth="50"
MinimumHeight="26"
MaximumWidth="250"
MaximumHeight="170"
HandleOffsetX="3"
HandleOffsetY="3"
OnClientResize="OnClientResizeImage" />
<ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender2" runat="server"
TargetControlID="PanelText"
ResizableCssClass="resizingText"
HandleCssClass="handleText"
MinimumWidth="100"
MinimumHeight="50"
MaximumWidth="400"
MaximumHeight="150"
OnClientResize="OnClientResizeText" />
</div>
</form>
</body>
十.SliderExtender
主要属性：
1.Minimum/Maximum:滑动块最小值，最大值
2.Decimals:小数点位数
3.Steps:整个滑动块的步数
4.EnalbleHandleAnimation:滑片是否有滑动效果
5.HandleAnimationDuration:滑片滚动效果持续时间
6.RailCssClass:滑片轨迹的样式
7.HandleCssClass:滑片的样式
8.HandleImageURL:滑片的样式URL
9.Length:滑片的初始位置长度
10.BoundControlID:控制或者显示滑片值的控件ID可以是TextBox,Label
11.RaiseChangeOnlyOnMouseUp:滑片是否只由鼠标左键控制
12.TargetControlID:控件显示载体ID
aspx:
Code
cs:
Code
十一.TabContainer
TabContainer中包含TabPanel进行使用
主要属性：
1.ActiveTabChanged(Event):tab选择改变的时候服务器回发事件
2.OnClientActiveTabChaged:tab选择改变的时候客户端回发时间
3.ActiveTabIndex:控件的tab顺序
十二.TextBoxWatermarkExtender
主要属性：
1.TargetControlID:需要操作的TextBox的ID
2.WatermarkText:提示信息
3.WatermarkCssClass:提示信息的样式
aspx:
Code
<style type="text/css">
.unwatermarked {
height:18px;
width:148px;
font-weight:bold;
}
.watermarked {
height:20px;
width:150px;
padding:2px 0 0 2px;
border:1px solid #BEBEBE;
background-color:#F0F8FF;
color:gray;
}
</style>
我喜欢的技术:
<asp:TextBox ID="TextBox1" CssClass="unwatermarked" Width="150" runat="server" /><br />
<ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"
TargetControlID="TextBox1"
WatermarkText="喜欢技术的名字"
WatermarkCssClass="watermarked" />
我喜欢的论坛:
<asp:TextBox ID="TextBox2" CssClass="unwatermarked" Width="150" runat="server" /><br /><br />
<ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server"
TargetControlID="TextBox2"
WatermarkText="喜欢论坛的名字"
WatermarkCssClass="watermarked" />