Menyesuaikan Indeks-Z dari DropShadow (C#)

oleh Christian Wenz

Unduh PDF

Kontrol DropShadow di Toolkit Kontrol AJAX memperluas panel dengan bayangan jatuh. Namun bayangan ini terkadang bertentangan dengan kontrol lain, misalnya kontrol Menu ASP.NET. Saat entri menu muncul, entri tersebut muncul di belakang bayangan jatuh.

Gambaran Umum

Kontrol DropShadow di Toolkit Kontrol AJAX memperluas panel dengan bayangan jatuh. Namun bayangan ini terkadang bertentangan dengan kontrol lain, misalnya kontrol Menu ASP.NET. Saat entri menu muncul, entri tersebut muncul di belakang bayangan jatuh.

Langkah-langkah

Kode dimulai dengan Panel itu sendiri, berisi teks yang cukup sehingga panel berisi teks yang cukup agar efeknya terlihat:

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

Panel lain ditempatkan langsung sebelum panel panelShadow . Ini berisi menu dengan orientasi horizontal sehingga entri menu muncul di atas (atau lebih tepatnya dropShadow : di bawah) panel):

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

Kemudian, DropShadowExtender ditambahkan untuk memperluas panelShadow panel dengan efek bayangan jatuh:

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

Terakhir, kontrol AJAX ScriptManager ASP.NET memungkinkan Control Toolkit berfungsi:

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

Saat Anda menjalankan skrip ini, entri menu muncul di bawah panel. Namun menu menggunakan kelas panel CSS di mana Anda hanya perlu menentukan dua hal untuk membuat elemen muncul di depan panel lain:

• Penempatan relatif
• Indeks z positif

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

Kemudian, DropShadowExtender kontrol tidak berkonflik lagi dengan kontrol Menu.

Sebelum: Entri menu tidak terlihat (Klik untuk melihat gambar ukuran penuh)

Setelah: Entri menu muncul (Klik untuk melihat gambar ukuran penuh)

Berikutnya