快速浏览AjaxControlToolKit控件(三)

wendy_soft

于 2014-03-28 14:07:23 发布

阅读量511

点赞数

本文链接：https://blog.csdn.net/wendykeysky/article/details/22397361

版权

九.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" />