快速浏览AjaxControlToolKit控件(三)

时间:2022-06-21 16:27:01

九.ResizableControlExtender

主要属性:

1.TargetControlID:需要自动缩放的元素的ID

2.HandleCssClass:控制自动缩放元素的手柄样式

3.ResizableCssClass:恢复到需要的尺寸时候需要自动缩放的元素的样式

4.MinimumWidth/MinimumHeight:元素能的最小宽度,高度

5.MaximumWidth/MaximumHeight:元素的最大高度,宽度

6.OnClientResizeBegin:元素开始自动大小的时候触发的浏览器事件

7.OnClientResizing:元素正在自动适应大小后浏览器的事件

8.OnClientResize:元素完成自动适应大小后浏览器的事件

9.HandleOffsetX/HandleOffsetY:执行拖动的手柄离拖动元素的坐标

aspx:

快速浏览AjaxControlToolKit控件(三)快速浏览AjaxControlToolKit控件(三)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>

 

快速浏览AjaxControlToolKit控件(三)

十.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:

快速浏览AjaxControlToolKit控件(三)快速浏览AjaxControlToolKit控件(三)Code

cs:

快速浏览AjaxControlToolKit控件(三)快速浏览AjaxControlToolKit控件(三)Code

 

快速浏览AjaxControlToolKit控件(三)

十一.TabContainer

TabContainer中包含TabPanel进行使用

主要属性:

1.ActiveTabChanged(Event):tab选择改变的时候服务器回发事件

2.OnClientActiveTabChaged:tab选择改变的时候客户端回发时间

3.ActiveTabIndex:控件的tab顺序

快速浏览AjaxControlToolKit控件(三)

十二.TextBoxWatermarkExtender

主要属性:

1.TargetControlID:需要操作的TextBox的ID

2.WatermarkText:提示信息

3.WatermarkCssClass:提示信息的样式

aspx:

快速浏览AjaxControlToolKit控件(三)快速浏览AjaxControlToolKit控件(三)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" />