Ajax加载面板（外观与造型）

复制粘贴机QAQ

已于 2022-08-15 14:01:17 修改

阅读量93

点赞数

分类专栏： Ajax加载面板文章标签： ajax javascript ecmascript

于 2022-08-15 14:00:34 首次发布

原文链接：https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxloadingpanel/appearance-and-styling/html-output

版权

Ajax加载面板专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.控制 RadAjaxLoadingPanel 的外观

1）RadAjax的主要视觉方面是在启用 AJAX 的控件更新时显示的RadAjaxLoadingPanel。可以通过以下方法控制 RadAjaxLoadingPanel 的外观：

修改标签内的<telerik:RadAjaxLoadingPanel> </telerik:RadAjaxLoadingPanel>标记。
更改加载面板中显示的图像。RadAjax附带了许多预定义的动画“gif”图像。为此，您将<src>标记路径更改为安装目录中的 gif 之一：“\Telerik\RadControls for ASP.NET AJAXsuiteversion\Skins\Default\Ajax”
RadAjaxLoadingPanel继承自System.Web.UI.Panel，并提供背景颜色、字体和其他属性的属性。实际上，大多数开发人员通常使用标记和加载图像来设置加载面板的样式，但您也可以使用这些面板属性。

带有 RadLoadingPanel 的图像和文本的自定义外观：

//背景颜色，边框颜色，边缘风格：点线，边框宽度
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackColor="Honeydew"
    BorderColor="Green" BorderStyle="Dotted" BorderWidth="3px" ForeColor="Blue" MinDisplayTime="1000">
     <img alt="Loading..." src="loading3.gif" style="border: 0px;" />
     <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</telerik:RadAjaxLoadingPanel>

2）RadAjaxLoadingPanel的BackgroundTransparency属性更改了 DIV 元素的不透明度，该元素包含加载面板的背景，而不会影响加载图像。默认情况下它为 0（或空），在这种情况下，不呈现内联不透明度样式。接下来的几个代码片段显示了Transparency和BackgroundTransparency属性与呈现的 html 之间的差异。

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Default"
Transparency="" BackgroundTransparency=""></telerik:RadAjaxLoadingPanel>

//未进行任何限定
<div class="RadAjax RadAjax_Default" id="RadAjaxLoadingPanel1Button1">
<div class="raDiv">
</div>
<div class="raColor raTransp">
</div>
</div>

//使用Transparency="30"时，HTML 将是：
<div style="opacity: 0.7;" class="RadAjax RadAjax_Default" id="Div1">
<div class="raDiv">
</div>
<div class="raColor raTransp">
</div>
</div>

//使用BackgroundTransparency="40" HTML 将是：
<div class="RadAjax RadAjax_Default" id="Div2">
<div class="raDiv">
</div>
<div class="raColor raTransp" style="opacity: 0.6;">
</div>
</div>

//使用Transparency="30"和BackgroundTransparency="40"，HTML 将是：
<div style="opacity: 0.7;" class="RadAjax RadAjax_Default" id="Div3">
<div class="raDiv">
</div><div class="raColor raTransp" style="opacity: 0.6;">
</div>
</div>

2.UpdatePanelCssClass 属性

对于RadAjaxManager，可以将UpdatePanelCssClass添加到每个AjaxSetting的 UpdatedControls 部分内的AjaxUpdatedControl。提供的字符串用作UpdatePanel 的CssClass ，它将在呈现期间包装AjaxUpdatedControl。

因此，UpdatePanel 的CssClass属性在输出 HTML 中呈现为类属性。此外，RadAjaxPanel被添加到UpdatePanel的CssClass中。因此，如果用户为UpdatePanelCssClass设置MyClass，则呈现的 div 中的结果将变为class=RadAjaxPanel MyClass。

        <%-- UpdatePanel写法一 --%>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="Button1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Button1" UpdatePanelCssClass="updatePanelClassName" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <asp:Button runat="server" ID="Button1" />

        <%-- UpdatePanel写法二 --%>
        <div id="RadAjaxManager1SU" style="display: none;">
            <span id="Span1" style="display: none;"></span>
        </div>

        <div id="Button1Panel" class="RadAjaxPanel updatePanelClassName" style="display: block;">
            <input id="Button1" type="button" onclick="javascript: **doPostBack('Button1', '')" value="" name="Button1" />
        </div>

对于RadAjaxPanel，CssClass属性应用于内部 div，其 ID 与RadAjaxPanel的ClientID相同。UpdatePanelCssClass适用于包装RadAjaxPanel的UpdatePanel 。

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" CssClass="PanelCssClass" UpdatePanelCssClass="updatePanelClassName">
    <asp:Button runat="server" ID="Button1" />
</telerik:RadAjaxPanel>

<div id="ctl03Panel" class="RadAjaxPanel updatePanelClassName" style="display: block;">
    <div id="ctl03" class="PanelCssClass">
     <input id="Button1" type="button" onclick="javascript: **doPostBack('Button1', '')" value="" name="Button1">
    </div>
</div>

3.HTML 输出

设置 RadAjaxLoadingPanel 的 Skin 属性后，其 HTML 输出如下：

<div class="RadAjax RadAjax_Sunset">
<div class="raDiv raTopLeft">
</div>
<div class="raColor raTransp">
</div>
</div>

三种要素：

div.RadAjax.RadAjax_SkinName - 这是加载面板包装器，其中包含皮肤名称（例如 Sunset）
div.raDiv - 这是包含动画加载图像的元素。背景图像的位置由第二个 CSS 类（raTop、raTopLeft、raTopRight、raLeft、raRight、raBottom、raBottomLeft、raBottomRight、raNone）确定。第二个 CSS 类取决于 RadAjaxLoadingPanel 的BackgroundPosition属性。如果 BackgroundPosition="None" 会出现 raNone 类并删除背景图像。如果没有第二个 CSS 类，则背景图像居中（默认为 BackgroundPosition="Center"）。
div.raColor - 这是保存加载面板背景颜色的元素。如果应用了 raTransp CSS 类，这个 div 可以是半透明的。此 CSS 类的存在由控件的EnableSkinTransparency属性（默认为“true”）确定。

两个内部 div（raDiv 和 raColor）是 100% 的宽和高，因此它们填充了包装器元素。raDiv 元素始终位于 raColor 元素之上。为了实现这一点，raColor 是绝对定位的，z-index 为 1，而 raDiv 是相对定位，z-index 为 2（相对定位只需要 z-index 样式起作用）。使用两个元素的好处是背景颜色可以是半透明的，而背景图像是完全不透明的（除非设置了Transparency属性，在使用Skin时不需要该属性）。

典型的 RadAjaxLoadingPanel 皮肤仅包含 3 个 CSS 规则 - 一个用于背景图像，一个用于背景颜色，一个用于皮肤透明度。

.RadAjax_SkinName .raDiv 
{ 
  background-image:url(............); 
} 
.RadAjax_SkinName .raColor 
{ 
  background-color:........; 
} 
.RadAjax_SkinName .raTransp 
{ 
  opacity:0.7;
  -moz-opacity:0.7; 
  filter:alpha(opacity=70); 
}

opacity CSS 属性是 CSS3 规范的一部分，仅由支持它的浏览器应用。-moz-opacity针对较旧的基于 Gecko 的浏览器，而专有的过滤器属性针对 IE。请注意，虽然 opacity 是介于 0 和 1 之间的数字，但 IE 的过滤器不透明度应乘以 100。