메인 패널과 팝업 패널을 만들고, 이 두 패널을 어떻게 메인 패널과 팝업 패널로 정의하고, 스타일은 어떻게 적용하며, 애니메이션 효과는 또 어떻게 주는지 다음의 예제로 확인해보자.
<style type="text/css">
.hoverBorder
{
border: solid 3px Red;
}
.popupPanel
{
border:solid 1px #000000;
visibility:hidden;
background-color:#F5F7F8;
}
.basicPanel
{
padding:3px;
width:300px;
height:200px;
}
.basicBorder
{
border: solid 3px Gray;
}
</style>
<asp:Panel ID="mainPanel"
runat="server"
CssClass="basicPanel
basicBorder">
여기는 패널영역입니다.
</asp:Panel>
<asp:Panel ID="popupPanel"
runat="server"
CssClass="popupPanel">
여기는 팝업영역입니다.
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1"
runat="server"
TargetControlID="mainPanel"
PopupControlID="popupPanel"
HoverCssClass="basicPanel hoverBorder"
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>
이번장에서 설명할 전체 소스다.
4개의 CSS class를 정의하였고, mainPanel, popupPanel 패널 두개를 생성하였다. HoverMenuExtender의 속성을 정의하여 패널에 팝업기능을 부여하였다.
OffsetX="5"
OffsetY="-5"
OffsetX/OffsetY는 popupPanel이 표시될 위치를 정의하게 되며 기본위치에서 상하좌우로 정의할 수 있다. OffsetX="5"는 오른쪽으로 5픽셀만큰 이동시킨것이며, OffsetY="-5"는 위로 5픽셀 올린것이다.
<OnShow>
<Sequence>
<HideAction Visible="True" />
<FadeIn Duration=".5" />
</Sequence>
또한, 애니메이션 효과를 적용하려면 반드시 <HideAction Visible="True" />를 적용해야 한다. <FadeIn Duration=".5" />를 작성하지 않으면 popupPanel을 표시되지 않는다.
<FadeIn Duration=".5" />은 popupPanel이 0.5초동안 서서히 표시되는 효과를 준다.
<OnHide>
<FadeOut Duration=".5" />
<FadeOut Duration=".5" />은 <FadeIn>과는 반대로 popupPanel이 사라질 때 적용되는 효과로써 0.5초동안 서서히 사라지게 된다.
애니메이션에 대한 보다 자세한 내용은 다음의 링크를 통해서 학습하기 바란다.
AnimationExtender 바로가기
브라우저로 실행해보자
마우스 올리기 전
마우스 올린 후
popupPanel이 표시되고 사라질 때 애니메이션 효과가 적용되어 보다 부드러운 느낌을 준다.
HoverMenuExtender 속성