Partager via

Ajustement de l’index-Z d’un DropShadow (VB)

  • Article

par Christian Wenz

Télécharger le PDF

Le contrôle DropShadow dans ajax Control Toolkit étend un panneau avec une ombre portée. Toutefois, cette ombre est parfois en conflit avec d’autres contrôles, pour instance le contrôle menu ASP.NET. Lorsqu’une entrée de menu s’affiche, elle apparaît derrière l’ombre portée.

Vue d’ensemble

Le contrôle DropShadow dans ajax Control Toolkit étend un panneau avec une ombre portée. Toutefois, cette ombre est parfois en conflit avec d’autres contrôles, pour instance le contrôle menu ASP.NET. Lorsqu’une entrée de menu s’affiche, elle apparaît derrière l’ombre portée.

Étapes

Le code commence par le panneau lui-même, qui contient suffisamment de texte pour que le panneau contienne suffisamment de texte pour que l’effet soit visible :

<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>

Un autre panneau est placé directement avant le panelShadow panneau. Il contient un menu avec une orientation horizontale de sorte que les entrées de menu apparaissent sur (ou plutôt : sous) le dropShadow panneau) :

<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>

Ensuite, est DropShadowExtender ajouté pour étendre le panelShadow panneau avec un effet d’ombre portée :

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

Enfin, le contrôle AJAX ScriptManager ASP.NET permet au kit de ressources Control de fonctionner :

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

Lorsque vous exécutez ce script, les entrées de menu s’affichent sous le panneau. Toutefois, le menu utilise la classe panel CSS où il vous suffit de définir deux éléments pour que les éléments apparaissent devant l’autre panneau :

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

Ensuite, le DropShadowExtender contrôle n’entre plus en conflit avec le contrôle Menu.

Avant : l’entrée de menu n’est pas visible

Avant : l’entrée de menu n’est pas visible (cliquez pour afficher l’image en taille réelle)

Après : l’entrée de menu s’affiche

Après : l’entrée de menu s’affiche (Cliquez pour afficher l’image en taille réelle)

PrécédentSuivant