Réduction et développement d’un panneau à partir de JavaScript (VB)
par Christian Wenz
Le contrôle CollapsiblePanel dans le ASP.NET AJAX Control Toolkit étend un panneau et lui donne la possibilité 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 donne la possibilité 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 l’ASP.NET bibliothèque AJAX 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 présenté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 une 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éclenche ensuite la réduction ou le développement du contenu du panneau par javascript 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é avec <script type="text/javascript">), la $find() méthode doit être utilisée pour accéder au CollapsiblePanelExtender. $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 l’utilisateur clique 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. Ainsi, 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 : réduit à développé, et vice versa. expose CollapsiblePanelExtender la toggle() méthode qui fait exactement cela : inverse l’état du panneau. Toutefois, il existe également une autre approche (qui est utilisée en interne par la toggle() méthode) : la get_Collapsed() méthode du CollapsiblePanelExtender() indique si le panneau est réduit ou non. Selon la valeur de retour de cette fonction, le panneau est alors développé (_doOpen() méthode) ou réduit (_doClose()) méthode :
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 : de réduit à développé et à retour (cliquez pour afficher l’image en taille réelle)
