Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
par Christian Wenz
Le Contrôle DropShadow dans l'AJAX Control Toolkit étend un panneau avec une ombre portée. Les propriétés de cet extendeur peuvent également être modifiées à l’aide du code JavaScript client.
Aperçu
Le Contrôle DropShadow dans l'AJAX Control Toolkit étend un panneau avec une ombre portée. Les propriétés de cet extendeur peuvent également être modifiées à l’aide du code JavaScript client.
Étapes
Le code commence par un panneau contenant des lignes de texte :
<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>
La classe CSS associée donne au panneau une couleur d’arrière-plan agréable :
<style type="text/css">
.panel {background-color: navy;}
</style>
L'élément DropShadowExtender est ajouté pour étendre le panneau avec un effet d’ombre portée, l’opacité définie sur 50%:
<ajaxToolkit:DropShadowExtender ID="dse1" runat="server"
TargetControlID="panelShadow"
Opacity="0.5" Rounded="true" />
Ensuite, le contrôle ASP.NET AJAX ScriptManager permet au Kit de Contrôle de fonctionner :
<asp:ScriptManager ID="asm" runat="server" />
Un autre panneau contient deux liens JavaScript pour définir l’opacité de l’ombre déroulante : le lien moins diminue l’opacité de l’ombre, le lien plus l’augmente.
<asp:Panel ID="panelControl" runat="server">
<br />
<label id="txtOpacity" runat="server">0.5</label>
<a href="#" onclick="changeOpacity(-0.1); return false;">-</a>
<a href="#" onclick="changeOpacity(+0.1); return false;">+</a>
</asp:Panel>
La fonction JavaScript changeOpacity() doit ensuite rechercher l'élément de contrôle DropShadowExtender sur la page. ASP.NET AJAX définit la $find() méthode pour cette tâche exactement. La méthode get_Opacity() récupère ensuite l’opacité actuelle, et la méthode set_Opacity() la définit. Le code JavaScript place ensuite la valeur d’opacité actuelle dans l’élément <label> :
<script type="text/javascript">
function changeOpacity(delta)
{
var dse = $find("dse1");
var o = dse.get_Opacity();
o += delta;
o = Math.round(10 * o) / 10;
if (o <= 1.0 && o >= 0.0)
{
dse.set_Opacity(o);
$get("txtOpacity").firstChild.nodeValue = o;
}
}
</script>
L’opacité est modifiée côté client (cliquez pour afficher l’image de taille complète)
