Управление относительным положением элемента

Каскадные таблицы стилей (CSS) позволяют позиционировать HTML-элементы в любом месте страницы с помощью координат x и y. Однако положение элемента управления может изменяться при прокрутке страницы пользователем. Добавив немного программного кода JavaScript, можно обеспечить неизменное положение элемента в окне броузера, независимо от того, в какую сторону пользователь выполняет прокрутку.

Как вы наверное и ожидали, ASP.NET AJAX Control Toolkit предлагает свое решение этой задачи – элемент управления AlwaysVisibleControlExtender. Этот расширитель может быть подключен к любому элементу управления, чтобы обеспечить ему неизменность положения относительно границ окна броузера. Например, свойство HorizontalSide расширителя может принимать значения Center, Left и Right, а свойство VerticalSide – значения Top, Middle или Bottom. Имеется также возможность указать величину смещения относительно левой и верхней границы окна броузера с помощью свойств HorizontalOffset и VerticalOffset. Ниже приводится пример разметки расширителя, который позиционирует элемент HTML в верхнем левом углу окна броузера:

runat="server" TargetControlID="banner" HorizontalSide="Left"
VerticalSide="Top" />

В примере 12.2 содержится полный исходный код, а результат его работы приводится на рис.


12.2. На рисунке видно, что баннер остается в верхнем левом углу окна и при прокрутке страницы.
Пример 12.2. Использование AlwaysVisibleControlExtender AlwaysVisible.aspx
<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd"> ASP.NET AJAX

(body)
(asp:ScriptManager ID="ScriptManager1" runat="server" /)

TargetControlID="banner" HorizontalSide="Left" VerticalSide="Top" />

Welcome to the ASP.NET AJAX Control Toolkit sample website.


Welcome to the ASP.NET AJAX Control Toolkit sample website.


Welcome to the ASP.NET AJAX Control Toolkit sample website.



Welcome to the ASP.NET AJAX Control Toolkit sample website.


Welcome to the ASP.NET AJAX Control Toolkit sample website.


Welcome to the ASP.NET AJAX Control Toolkit sample website.


Welcome to the ASP.NET AJAX Control Toolkit sample website.


Welcome to the ASP.NET AJAX Control Toolkit sample website.


Welcome to the ASP.NET AJAX Control Toolkit sample website.


Welcome to the ASP.NET AJAX Control Toolkit sample website.



(/body)


Оцените статью: (0 голосов)
0 5 0

Статьи из раздела ASP.NET AJAX на эту тему:
Борьба со спамом в блогах и других формах ввода информации
Динамическая свертка единственной панели
Добавление функции автодополнения к элементу управления TextBox
Отображение всплывающего окна на странице
Присоединение календаря к текстовому полю