从 Javascript 设置始终可见扩展器的水平/垂直侧面

ASP.NET 社区

0/5 (0投票)

2013 年 10 月 11 日

CPOL

5393

Ajax 的始终可见扩展器控件用于始终在页面上显示某些控件（通常是一个面板）。始终可见的意思是，如果页面已垂直或水平滚动，扩展器将始终在视图区域中显示目标控件。

Ajax 的始终可见扩展器控件用于始终在页面上显示某些控件（通常是一个面板）。始终可见的意思是，如果页面已垂直或水平滚动，扩展器将始终在视图区域中显示目标控件。它可以将控件水平地显示在屏幕的左侧、中央或右侧，也可以将控件垂直地显示在屏幕的顶部、中间和底部。这些方向可以使用其 HorizontalSide 和 VerticalSide 属性进行设置。

但是，在某些情况下，我们需要更新这些属性以为其他控件或任何其他目的腾出空间和视图区域。为此，最好在客户端更新/设置这些属性。此示例演示如何执行此操作。

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function SetPosition(value) {
            if (value == 1) {
                $find('pnlTestExtender').set_HorizontalSide(0);
            }
            else
                if (value == 2) {
                $find('pnlTestExtender').set_HorizontalSide(1);
            }
            else
                if (value == 3) {
                $find('pnlTestExtender').set_HorizontalSide(2);
            }
            else
                if (value == 4) {
                $find('pnlTestExtender').set_VerticalSide(0);
            }
            else
                if (value == 5) {
                $find('pnlTestExtender').set_VerticalSide(1);
            }
            else
                if (value == 6) {
                $find('pnlTestExtender').set_VerticalSide(2);
            }
            return false;
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <asp:DropDownList ID="DropDownList1" runat="server" onchange="SetPosition(this.value);">
        <asp:ListItem Text="Change Horizontal to Left" Value="1"></asp:ListItem>
        <asp:ListItem Text="Change Horizontal to Center" Value="2"></asp:ListItem>
        <asp:ListItem Text="Change Horizontal to Right" Value="3"></asp:ListItem>
        <asp:ListItem Text="Change Vertical to Top" Value="4"></asp:ListItem>
        <asp:ListItem Text="Change Vertical to Middle" Value="5"></asp:ListItem>
        <asp:ListItem Text="Change Vertical to Bottom" Value="6"></asp:ListItem>
    </asp:DropDownList>
    <asp:Panel runat="server" ID="pnlTest" Width="100px" Height="100px" BackColor="Red">
    </asp:Panel>
    <cc1:AlwaysVisibleControlExtender ID="pnlTestExtender" runat="server" TargetControlID="pnlTest"
        HorizontalSide="Center" VerticalSide=" Middle" BehaviorID="pnlTestExtender">
    </cc1:AlwaysVisibleControlExtender>
    </form>
</body>

更改下拉列表中的项目，将使面板更新其方向（水平和垂直侧面）