Dostosowywanie indeksu Z elementu DropShadow (VB)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka DropShadow w zestawie narzędzi AJAX Control Toolkit dodaje panelowi efekt cienia opadającego. Jednak ten cień czasami powoduje konflikt z innymi kontrolkami, na przykład kontrolką menu ASP.NET. Kiedy pojawi się wpis menu, ukazuje się za cieniem rzucanym.

Przegląd

Kontrolka DropShadow w zestawie narzędzi AJAX Control Toolkit dodaje panelowi efekt cienia opadającego. Jednak ten cień czasami powoduje konflikt z innymi kontrolkami, na przykład kontrolką menu ASP.NET. Kiedy pojawi się wpis menu, pojawia się za cieniem spadowym.

Kroki

Kod rozpoczyna się od samego panelu zawierającego wystarczającą ilość tekstu, aby panel zawierał wystarczającą ilość tekstu, aby efekt był widoczny:

<asp:Panel ID="panelShadow" runat="server" CssClass="panel" Width="300px">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

Inny panel jest umieszczony bezpośrednio przed panelem panelShadow . Zawiera menu z orientacją poziomą, tak aby pozycje menu pojawiały się nad (a raczej: pod) panelem dropShadow.

<asp:Panel ID="panelMenu" runat="server" CssClass="ForegroundStyle">
 <asp:Menu ID="menu1" runat="server" ForeColor="Red" Orientation="Horizontal">
 <Items>
 <asp:MenuItem Text="One">
 <asp:MenuItem Text="1.1" />
 <asp:MenuItem Text="1.2" />
 </asp:MenuItem>
 <asp:MenuItem Text="Two" />
 <asp:MenuItem Text="Three" />
 </Items>
 </asp:Menu><br />
</asp:Panel>

Następnie zostanie dodany element DropShadowExtender aby rozszerzyć panel panelShadow z efektem cienia:

<ajaxToolkit:DropShadowExtender ID="dse1" runat="server"
 TargetControlID="panelShadow"
 Opacity="0.5" Rounded="true" />

Na koniec kontrolka ASP.NET AJAX ScriptManager umożliwia działanie zestawu narzędzi Control Toolkit:

<asp:ScriptManager ID="asm" runat="server" />

Po uruchomieniu tego skryptu wpisy menu są wyświetlane pod panelem. Jednak menu używa klasy panel CSS, w której wystarczy zdefiniować dwie elementy, aby elementy pojawiały się przed drugim panelem:

• Pozycjonowanie względne
• Dodatni indeks z

<style type="text/css">
 .ForegroundStyle {z-index: 123; position: relative;}
 .panel {background-color: navy;}
</style>

Następnie kontrolka DropShadowExtender nie powoduje konfliktu z kontrolką Menu.

Przed: pozycja menu nie jest widoczna (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Po: zostanie wyświetlony wpis menu (Kliknij, aby wyświetlić obraz o pełnym rozmiarze)