关于ajaxToolkit中的AlwaysVisibleControlExtender

Question

问题描述：我使用了AjaxToolkit中的AlwaysVisibleControlExtender，但发现当页面出现纵向滚动条时，AlwaysVisibleControlExtender指定的控件不会固定在我指定的位置，而是随页面的上下滚动而滚动。这是为什么？按书上说是会固定在我指定的位置上而不随页面的纵向滚动而滚动。参考书是由陈黎夫所著的《ASP.NET AJAX程序设计 第I卷：服务器端ASP.NET 2.0 AJAX Extensions与ASP.NET AJAX Control Toolkit》一书。代码如下：

 

<aspcriptManager ID="ScriptManager1" runat="server" />
        <div>
            <ajaxToolkit:AlwaysVisibleControlExtender ID="avce" runat="server" TargetControlID="myLogin" HorizontalSide="left" HorizontalOffset="50" VerticalSide="top" VerticalOffset="50" />
            <asp:Login ID="myLogin" CssClass="login" runat="server" />
            <div>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
                <p>
                    AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo.AlwaysVisibleControl Demo
                </p>
            </div>
        </div>

 

样式文件StyleSheet.css：

.login
{
 background-color: #fff;
 border: 2px solid #000;
 position: absolute;
 left: 10px;
 top: 50px;
}

请知道问题所在的朋友帮忙指点下我，谢谢先：）

Answer 1

你好，

 

请设置 TargetControlID为Panel 的ID。然后可以吧Login控件放到Panel中。如下：

 

Code Snippet

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:Panel ID="Panel1" runat="server">

<asp:Login ID="Login1" runat="server" BackColor="Yellow" BorderColor="Red">

</asp:Login>

</asp:Panel>

<cc1:AlwaysVisibleControlExtender ScrollEffectDuration=".1" HorizontalSide=Right HorizontalOffset=10

VerticalSide="Middle" VerticalOffset="10" ID="Login1_AlwaysVisibleControlExtender"

runat="server" TargetControlID="Panel1">

</cc1:AlwaysVisibleControlExtender>

 

 

Answer 2

To：Allen Chen - MSFT：谢谢您的回复。按您指导得，我已试过，成功了。但我有一个问题，我又看了下书，发现书上的代码并没有Panel，为什么书上不加Panel可以，我得就不行呢？难道是书上写错了？

Answer 3

你好，

这是由于AlwaysVisibleControlExtender的js对IE兼容不是很好造成的。你可以用其他浏览器试验一下。就目前来说如果使用AlwaysVisibleControlExtender的话最好还是用Panel作为Target. 其实更加简单的方式是直接设置style. AlwaysVisibleControlExtender对IE 7以上的浏览器页就是把target element的position设置为fixed.

 

Code Snippet

<asp:Login style="position:fixed" ID="Login1" runat="server" BackColor="Yellow" BorderColor="Red">