Réduction et développement d’un panneau à partir de JavaScript (C#)
par Christian Wenz
Le contrôle CollapsiblePanel dans le ASP.NET AJAX Control Toolkit étend un panneau et lui permet de réduire son contenu et de le développer à nouveau. Ces deux actions peuvent également être déclenchées à partir de code JavaScript personnalisé.
Vue d’ensemble
Le contrôle CollapsiblePanel dans le ASP.NET AJAX Control Toolkit étend un panneau et lui permet de réduire son contenu et de le développer à nouveau. Ces deux actions peuvent également être déclenchées à partir de code JavaScript personnalisé.
Étapes
Tout d’abord, créez une page ASP.NET et incluez le ScriptManager dans l’élément unique <form> . Cela charge la bibliothèque AJAX ASP.NET requise par control Toolkit :
<asp:ScriptManager ID="asm" runat="server" />
Ensuite, créez un panneau avec du texte afin que l’effet réduire/développer soit visible :
<asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
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>
Comme vous pouvez le voir, le panneau fait référence à une classe CSS qui est illustrée ici (et définit essentiellement une couleur d’arrière-plan et la largeur du panneau) :
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
Le CollapsiblePanelExtender contrôle nécessite l’attribut TargetControlID afin que le kit de ressources sache quel panneau réduire ou développer à la demande :
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
TargetControlID="Panel1" />
Malheureusement, l’extendeur n’expose actuellement pas d’API spécifique pour réduire ou développer le panneau, mais certaines méthodes non documentées le feront. Tout d’abord, ajoutez trois boutons HTML à la page, ce qui déclenchera ensuite la réduction ou le développement du contenu du panneau côté client :
<input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />
<input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />
<input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />
Dans le code JavaScript côté client (démarré par <script type="text/javascript">), la $find() méthode doit être utilisée pour accéder CollapsiblePanelExtenderau . $find("cpe") retourne une référence à celui-ci. À partir de là, des méthodes spécifiques résolvent la tâche en cours.
La méthode permettant d’ouvrir (développer) le panneau est appelée _doOpen(); le code suivant implémente la doOpen() fonction appelée lorsque vous cliquez sur le premier bouton :
function doOpen()
{
$find("cpe")._doOpen();
}
Pour fermer ou réduire le panneau, la _doClose() méthode doit être exécutée. Par conséquent, lorsque l’utilisateur clique sur le deuxième bouton, le code JavaScript suivant est appelé :
function doClose()
{
$find("cpe")._doClose();
}
Le troisième bouton bascule l’état du panneau : de réduit à développé, et vice versa. expose CollapsiblePanelExtender la toggle() méthode qui effectue exactement cela : inverse l’état du panneau. Toutefois, il existe également une autre approche (qui est utilisée en interne par la méthode) : la toggle()get_Collapsed() méthode du CollapsiblePanelExtender() indique si le panneau est réduit ou non. En fonction de la valeur de retour de cette fonction, la méthode du panneau est développée (_doOpen() méthode) ou réduite (_doClose()) :
function doToggle()
{
var cpe = $find("cpe");
//cpe._toggle();
if (cpe.get_Collapsed()) {
cpe._doOpen();
} else {
cpe._doClose();
}
}
Le troisième bouton modifie l’état du panneau : réduit à développé et arrière (cliquez pour afficher l’image en taille réelle)
