HoverMenuExtender는 ASP.NET의 어떠한 웹컨트롤에도 추가될 수 있고, 연계된 컨트롤에 팝업 패널로 추가적인 콘텐트를 표시할 수 있다. 팝업 패널은 메인 컨트롤의 상하좌우 어디에도 위치할 수 있으며 FadeIn, FadeOut과 같은 애니메이션 효과도 적용 할 수 있다.
HoverMenuExtender 속성
TargetControlID - 마우스가 올라가면 팝업 패널을 출력할 메인 컨트롤
PopupControlID - 메인 컨트롤에 마우스가 올라가면 표시될 팝업 컨트롤
HoverCssClass - 메인 컨트롤에 마우스가 올라가면 메인 컨트롤에 적용될 CSS Class
PopupPosition - 메인 컨트롤에 마우스가 올라갔을때 표시될 팝업 패널의 위치. 기본값은 Left이며, Right, Bottom, Top, Center 등으로 설정 가능
OffsetX/OffsetY - 팝업 패널의 기본 위치에서 이동할 픽셀단위의 숫자로써, 왼쪽으로 '5'픽셀을 이동시키려면 5를 입력하고, 윗쪽으로 5픽셀을 이동하려면 '-5'를 입력
PopDelay - 1/1000초단위의 시간을 나타내며, 메인 컨트롤에서 마우스가 벗어났을 때, 팝업 패널이 사라지는데 걸리는 시간. 기본값은 100
Animations - 팝업 매뉴에 적용될 애니메이션 효과 선언
- OnShow - 팝업 패널이 나타날 때 적용될 애니메이션 효과, <HideAction Visible="True" />가 반드시 적용되어야 한다.
- OnHide - 팝업 패널이 사라질 때 적용될 애니메이션 효과
다음장에서는 예제로써 사용방법을 알아보도록 하겠다.
HoverMenuExtender 속성
<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1"
runat="server"
TargetControlID="Panel1"
PopupControlID="Panel2"
HoverCssClass="hoverPanel"
PopupPosition="Bottom"
OffsetX="5"
OffsetY="-5"
PopDelay="500">
<Animations>
<OnShow>
<Sequence>
<HideAction Visible="True"
/>
<FadeIn Duration=".5"
/>
</Sequence>
</OnShow>
<OnHide>
<FadeOut Duration=".5" />
</OnHide>
</Animations>
TargetControlID - 마우스가 올라가면 팝업 패널을 출력할 메인 컨트롤
PopupControlID - 메인 컨트롤에 마우스가 올라가면 표시될 팝업 컨트롤
HoverCssClass - 메인 컨트롤에 마우스가 올라가면 메인 컨트롤에 적용될 CSS Class
PopupPosition - 메인 컨트롤에 마우스가 올라갔을때 표시될 팝업 패널의 위치. 기본값은 Left이며, Right, Bottom, Top, Center 등으로 설정 가능
OffsetX/OffsetY - 팝업 패널의 기본 위치에서 이동할 픽셀단위의 숫자로써, 왼쪽으로 '5'픽셀을 이동시키려면 5를 입력하고, 윗쪽으로 5픽셀을 이동하려면 '-5'를 입력
PopDelay - 1/1000초단위의 시간을 나타내며, 메인 컨트롤에서 마우스가 벗어났을 때, 팝업 패널이 사라지는데 걸리는 시간. 기본값은 100
Animations - 팝업 매뉴에 적용될 애니메이션 효과 선언
- OnShow - 팝업 패널이 나타날 때 적용될 애니메이션 효과, <HideAction Visible="True" />가 반드시 적용되어야 한다.
- OnHide - 팝업 패널이 사라질 때 적용될 애니메이션 효과
다음장에서는 예제로써 사용방법을 알아보도록 하겠다.
Prev
Rss Feed