Ajax加载面板（简述）

1.位置

 1）如果您有许多控件添加到 AjaxSettings 并希望使用 IsSticky="true"，那么您需要使用如下标记为 RadAjaxLoadingPanel 控件设置绝对定位：

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" IsSticky="true" runat="server" style="position:absolute;" >
<asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="Loading.gif" /> </telerik:RadAjaxLoadingPanel>

2）在RadAjaxLoadingPanel中设置标签和图像，与其它组件配合使用，需要调用其ID

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Width="256px" Height="64px">
    <asp:Label ID="Label2" runat="server" ForeColor="Red">Loading... </asp:Label>
    <asp:Image ID="Image1" runat="server" Width="224px" Height="48px" ImageUrl="~/Loading.gif">
    </asp:Image>
</telerik:RadAjaxLoadingPanel>

2.定时

InitialDelayTime和MinDisplayTime属性只能在加载面板RadAjaxManager / RadAjaxManagerProxy或RadAjaxPanel控件管理时使用。当手动显示或隐藏加载面板时，它们无效。在这种情况下，可以使用setTimeout()和setInterval() JavaScript 方法实现相同的功能。

3.透明度

默认情况下，加载面板不会“替换”由 AJAX 请求更新的控件。相反，它显示在控件“上方”。RadAjaxLoadingPanel有一个Transparency属性值，应该以百分比设置 - 值 (0-100)。Transparency属性的默认值为0，这意味着加载面板是绝对可见的。

4.皮肤

RadAjaxLoadingPanel支持皮肤，您可以通过将Skin属性设置为相应皮肤的名称来更改其皮肤。Skin属性的默认值为""（无皮肤）。

如果设置了Skin属性，则默认情况下从皮肤应用透明度。但是，您可以通过设置EnableSkinTransparency="false"来更改此行为。

BackgroundPosition属性使您能够在加载面板中定位加载图像（Top、TopRight、TopLeft、CenterLeft、Center、CenterRight、BottomLeft、Bottom、BottomRight、None）。默认值为中心。

5.模态重叠

RadAjaxLoadingPanel公开了 Modal 属性，该属性提供了强制面板跨越页面整个可见区域的功能，从而防止用户单击页面上可能触发 PostBacks 或 AJAX 请求的其他元素。

 <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" Modal="true">

6.一般特征

• Is Sticky：如果选中此选项，面板将出现在您将其放置在网络表单上的位置。如果未选中该选项，加载面板将出现在正在更新的控件的位置。该选项默认未选中。

• Initial Delay Time : 以毫秒为单位指定延迟，之后将显示加载面板。

• Min display time：指定显示加载面板的最小时间（以毫秒为单位）。

• Transparency：是一个从 0 到 100 的值，表示加载面板的透明度。值 0 将使加载面板完全不透明，较大的值将显示加载面板逐渐变得更加透明。

 7.动画

RadAjaxLoadingPanel动画是一个简单的扩展器，它允许您以简单的声明方式将 jQuery 框架与现有页面一起使用。RadAjaxLoadingPanel提供内置的淡入淡出动画。

要实现自定义动画，您应该使用RadAjaxLoadingPanel的OnClientShowing和OnClientHiding客户端事件处理程序。请注意，您需要使用eventArgs参数的set_cancelNativeDisplay(true)方法取消加载面板的默认显示（隐藏）。

ClientShowing和ClientHiding事件参数还通过 get_updatedElement() 方法提供对更新元素的引用。通过这种方式，您可以为特定控件实现一些自定义加载面板逻辑。请注意，get_updatedElement()返回一个 DOM 元素，而不是客户端控件实例。

//.net代码
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager> 
<%-- 淡入淡出效果,OnClientShowing OnClientHiding--%>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackColor="yellow"
    OnClientShowing="MyClientShowing" OnClientHiding="MyClientHiding" >
</telerik:RadAjaxLoadingPanel>
<%-- 一个响应事件AjaxControlID,一个弹出面板ControlID --%>
<telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
        <%-- 异步触发器,更新指定区域 --%>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <%-- 被Button1更新的控件 --%>
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<%-- 按钮Button,按钮事件OnClick --%>
<asp:Button ID="Button1" runat="server" Text="AJAX" OnClick="Button1_Click" /><br />
<br />
<table cellpadding="10">
    <tr>
        <td>
            <%-- 指定的Panel区域 --%>
            <asp:Panel ID="Panel1" runat="server" Width="600px" Height="500px" BorderStyle="Dotted">
                <%-- 在Panel区域显示的内容--%>
                <asp:Label ID="Label1" runat="server" />
             </asp:Panel>
        </td>
    </tr>

<%-- 淡入淡出效果具体写法 --%>
</table>
        <script type="text/javascript">
            function MyClientShowing(sender, eventArgs) {
                eventArgs.get_loadingElement().style.border = "2px solid red";
                eventArgs.set_cancelNativeDisplay(true);
                $telerik.$(eventArgs.get_loadingElement()).show("slow");
            }
            function MyClientHiding(sender, eventArgs) {
                eventArgs.get_loadingElement().style.border = "2px solid blue";
                eventArgs.set_cancelNativeDisplay(true);
                $telerik.$(eventArgs.get_loadingElement()).hide("slow");
            }
        </script>

//C#代码
protected void Button1_Click(object sender, EventArgs e)
{
     //运行事件
     System.Threading.Thread.Sleep(3000);
     //显示内容
     Label1.Text = DateTime.Now.ToString();
}

8.模态

RadAjaxLoadingPanel可以是模态的——它可以在 AJAX 请求运行时覆盖整个浏览器视口，因此用户根本无法与页面交互。Modal您可以通过将属性设置为 来启用此功能true。