Plugin de mise en page jQuery EasyUI -Accordion

jQuery EasyUI 插件Plugins jQuery EasyUI

Remplacez les valeurs par défaut via $.fn.accordion.defaults.

L'accordéon vous permet de fournir plusieurs panneaux et d'en afficher un ou plusieurs en même temps. Chaque panneau dispose d'une prise en charge intégrée pour le développement et la réduction. Cliquer sur l'en-tête d'un panneau développe ou réduit le corps du panneau. Le contenu du panneau peut être chargé via ajax en spécifiant l'attribut 'href'. L'utilisateur peut définir le panneau sélectionné. S'il n'est pas spécifié, le premier panneau est sélectionné par défaut.

Dépendances

  • panel

Utilisation

Créer un accordéon

Créer un accordéon à partir du balisage en ajoutant la classe 'easyui-accordion' à la balise <div>.

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery.
        It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>

Nous pouvons modifier certaines fonctionnalités après avoir modifié ou reconstruit l'accordéon.

$('#aa').accordion({
    animate:false
});

Actualiser le contenu du panneau d'accordéon

Appelez la méthode 'getSelected' pour obtenir le panneau actuel, puis nous pouvons appeler la méthode 'refresh' du panneau pour charger le nouveau contenu.

var pp = $('#aa').accordion('getSelected'); // 获取选中的面板（panel）
if (pp){
    pp.panel('refresh','new_content.php'); // 调用 'refresh' 方法加载新内容
}

Options du conteneur

Name Type Description Valeur par défaut
width nombre La largeur du conteneur de l'accordéon. auto
height nombre La hauteur du conteneur de l'accordéon. auto
fit booléen Définissez sur true pour que la taille du conteneur de l'accordéon s'adapte à son conteneur parent. false
border booléen Définit s'il faut afficher la bordure. vrai
animer booléen Définit s'il faut afficher des effets d'animation lors du déploiement ou du repli d'un panneau. vrai
multiple booléen Définissez sur true pour autoriser le déploiement simultané de plusieurs panneaux. Cette propriété est disponible depuis la version 1.3.5. false
selected nombre L'index du panneau sélectionné initialement. Cette propriété est disponible depuis la version 1.3.5. 0

Options du panneau

Les options de panneau de l'accordéon héritent de celles du panneau. Voici les propriétés supplémentaires :

Name Type Description Valeur par défaut
selected booléen Définir sur true pour développer le panneau. false
collapsible booléen Définit s'il faut afficher le bouton de repli. Si défini sur false, le panneau ne peut pas être développé/replié en cliquant. vrai

Événements

Name Parameters Description
onSelect title,index Déclenché lorsqu'un panneau est sélectionné.
onUnselect title,index Déclenché lorsqu'un panneau est désélectionné. Cet événement est disponible depuis la version 1.3.5.
onAdd title,index Déclenché lorsqu'un nouveau panneau est ajouté.
onBeforeRemove title,index Déclenché avant la suppression d'un panneau. Retournez false pour annuler l'action de suppression.
onRemove title,index Déclenché lorsqu'un panneau est supprimé.

Méthodes

Name Parameters Description
options none Retourne les options de l'accordéon.
panels none Obtient tous les panneaux.
resize none Redimensionne l'accordéon.
getSelected none Obtient le premier panneau sélectionné.
getSelections none Obtient tous les panneaux sélectionnés. Cette méthode est disponible depuis la version 1.3.5.
getPanel which Obtient le panneau spécifié. Le paramètre 'which' peut être le titre ou l'index du panneau.
getPanelIndex panel Obtient l'index du panneau spécifié. Cette méthode est disponible depuis la version 1.3.
L'exemple ci-dessous montre comment obtenir l'index du panneau sélectionné.
var p = $('#aa').accordion('getSelected');
if (p){
    var index = $('#aa').accordion('getPanelIndex', p);
    alert(index);
}
select which Sélectionne le panneau spécifié. Le paramètre 'which' peut être le titre ou l'index du panneau.
unselect which Désélectionne le panneau spécifié. Le paramètre 'which' peut être le titre ou l'index du panneau. Cette méthode est disponible depuis la version 1.3.5.
ajoutez options Ajoute un nouveau panneau. Par défaut, le nouveau panneau ajouté sera sélectionné. Pour ajouter un nouveau panneau qui n'est pas sélectionné, passez la propriété 'selected' et définissez-la sur false.
Exemple de code :
$('#aa').accordion('add', {
    title: 'New Title',
    content: 'New Content',
    selected: false
});
supprimer which Supprime le panneau spécifié. Le paramètre 'which' peut être le titre ou l'index du panneau.
jQuery EasyUI 插件Plugins jQuery EasyUI Autres extensions