jQuery EasyUI Layout Plugin -Panneau

jQuery EasyUI 插件Plugins jQuery EasyUI

Surchargez les valeurs par défaut via $.fn.panel.defaults.

Le panneau est utilisé comme conteneur pour d'autres contenus. Il est le composant fondamental pour construire d'autres composants (tels que Layout, Tabs, Accordion, etc.). Il fournit également des comportements intégrés tels que la réduction, la fermeture, la maximisation et la minimisation, ainsi que d'autres comportements personnalisés. Un panneau peut être facilement intégré n'importe où sur une page web.

Utilisation

Créer un panneau

1. Créer un panneau via le balisage

Il est plus facile de créer un panneau à partir du balisage. Ajoutez la classe 'easyui-panel' à la balise <div>.

<div id="p" class="easyui-panel" title="My Panel"
    style="width:500px;height:150px;padding:10px;background:#FAFAFA;"
    data-options="iconCls:'icon-save',closable:true,
    collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p>
    <p>panel content.</p>
</div>

2. Créer un panneau par programmation

Créons un panneau avec une barre d'outils en haut à droite.

<div id="p" style="padding:10px;">
    <p>panel content.</p>
    <p>panel content.</p>
</div>
$('#p').panel({
    width:500,
    height:150,
    title:'My Panel',
    tools:[{
    iconCls:'icon-add',
    handler:function(){alert('new')}
    },{
    iconCls:'icon-save',
    handler:function(){alert('save')}
    }]
});

Déplacer le panneau

Appelez la méthode 'move' pour déplacer le panneau vers une nouvelle position.

$('#p').panel('move',{
    left:100,
    top:100
});

Charger le contenu

Chargeons le contenu du panneau via ajax et affichons des informations lorsque le chargement réussit.

$('#p').panel({
    href:'content_url.php',
    onLoad:function(){
        alert('loaded successfully');
    }
});

Propriétés

Name Type Description Valeur par défaut
id string L'attribut id du panneau. null
title string Le texte du titre affiché dans l'en-tête du panneau. null
iconCls string Une classe CSS qui affiche une icône 16x16 dans le panneau. null
width nombre Définir la largeur du panneau. auto
height nombre Définir la hauteur du panneau. auto
left nombre Définir la position à gauche du panneau. null
top nombre Définir la position en haut du panneau. null
cls string Ajouter une classe CSS au panneau. null
headerCls string Ajouter une classe CSS à l'en-tête du panneau. null
bodyCls string Ajouter une classe CSS au corps du panneau. null
style objet Ajouter des styles personnalisés au panneau.
Exemple de code pour modifier la largeur de bordure du panneau :
<div class="easyui-panel" style="width:200px;height:100px"
        data-options="style:{borderWidth:2}">
</div>
{}
fit booléen Lorsqu'il est défini sur true, la taille du panneau s'adapte à son conteneur parent. L'exemple suivant montre un panneau qui se redimensionne automatiquement à la taille interne maximale de son conteneur parent.
<div style="width:200px;height:100px;padding:5px">
    <div class="easyui-panel" style="width:200px;height:100px"
            data-options="fit:true,border:false">
        Embedded Panel
    </div>
</div>
false
border booléen Définit s'il faut afficher la bordure du panneau. vrai
doSize booléen Si défini sur true, le panneau sera redimensionné et mis en page lors de sa création. vrai
noheader booléen Si défini sur true, l'en-tête du panneau ne sera pas créé. false
content string Le contenu du corps du panneau. null
collapsible booléen Définit s'il faut afficher le bouton de réduction. false
minimizable booléen Définit s'il faut afficher le bouton de minimisation. false
maximizable booléen Définit s'il faut afficher le bouton d'agrandissement. false
closable booléen Définit s'il faut afficher le bouton de fermeture. false
tools tableau, sélecteur Outils personnalisés, valeurs possibles :
1. Tableau, chaque élément contient deux propriétés : iconCls et handler.
2. Sélecteur, indiquant les outils.

Les outils du panneau peuvent être déclarés via une balise <div> existante :
<div class="easyui-panel" style="width:300px;height:200px"
        title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">
</div>
<div id="tt">
    <a href="../index.html" class="icon-add" onclick="javascript:alert('add')"></a>
    <a href="../index.html" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>
Les outils du panneau peuvent être définis via un tableau :
<div class="easyui-panel" style="width:300px;height:200px"
        title="My Panel" data-options="iconCls:'icon-ok',tools:[
                {
                    iconCls:'icon-add',
                    handler:function(){alert('add')}
                },{
                    iconCls:'icon-edit',
                    handler:function(){alert('edit')}
                }]">
</div>
[]
collapsed booléen Définit si le panneau est initialement réduit. false
minimized booléen Définit si le panneau est initialement minimisé. false
maximized booléen Définit si le panneau est initialement maximisé. false
closed booléen Définit si le panneau est initialement fermé. false
href string Une URL utilisée pour charger des données distantes et les afficher dans le panneau. Notez que le contenu ne sera pas chargé tant que le panneau n'est pas ouvert. Cela est utile pour créer un panneau à chargement différé :
<div id="pp" class="easyui-panel" style="width:300px;height:200px"
        data-options="href='get_content.php.html',closed:true">
</div>
<a href="../index.html" onclick="javascript:$('#pp').panel('open')">Open</a>
null
cache booléen Défini sur true pour mettre en cache le contenu du panneau chargé depuis href. vrai
loadingMessage string Affiche un message dans le panneau lors du chargement de données distantes. Chargement…
extractor fonction Définit comment extraire le contenu de la réponse ajax, en renvoyant les données extraites.
extractor: function(data){
    var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
    var matches = pattern.exec(data);
    if (matches){
        return matches[1];    // only extract body content
    } else {
        return data;
    }
}

Événements

Name Parameters Description
onLoad none Se déclenche lorsque des données distantes sont chargées.
onBeforeOpen none Se déclenche avant l'ouverture du panneau ; renvoyez false pour l'empêcher de s'ouvrir.
onOpen none Se déclenche après l'ouverture du panneau.
onBeforeClose none Se déclenche avant la fermeture du panneau ; retournez false pour annuler la fermeture. Le panneau déclaré ci-dessous ne se fermera pas.
<div class="easyui-panel" style="width:300px;height:200px;"
        title="My Panel" data-options="onBeforeClose:function(){return false}">
    The panel cannot be closed.
</div>
onClose none Se déclenche après la fermeture du panneau.
onBeforeDestroy none Se déclenche avant la destruction du panneau ; retournez false pour annuler la destruction.
onDestroy none Se déclenche après la destruction du panneau.
onBeforeCollapse none Se déclenche avant le repli du panneau ; retournez false pour arrêter le repli.
onCollapse none Se déclenche après le repli du panneau.
onBeforeExpand none Se déclenche avant le déploiement du panneau ; retournez false pour arrêter le déploiement.
onExpand none Se déclenche après l'expansion du panneau.
onResize width, height Se déclenche après le redimensionnement du panneau.
width: la nouvelle largeur extérieure
height: la nouvelle hauteur extérieure
onMove left,top Se déclenche après le déplacement du panneau.
left: la nouvelle position à gauche
top: la nouvelle position en haut
onMaximize none Se déclenche après la maximisation de la fenêtre.
onRestore none Se déclenche après la restauration de la fenêtre à sa taille d'origine.
onMinimize none Se déclenche après la réduction de la fenêtre.

Méthodes

Name Parameters Description
options none Renvoie la propriété options.
panel none Retourne l'objet du panneau extérieur.
header none Retourne l'objet d'en-tête du panneau.
body none Retourne l'objet du corps du panneau.
setTitle title Définit le texte du titre de l'en-tête.
open forceOpen Lorsque le paramètre forceOpen est défini sur true, ouvrez le panneau en contournant la fonction de rappel onBeforeOpen.
close forceClose Lorsque le paramètre forceClose est défini sur true, fermez le panneau en contournant la fonction de rappel onBeforeClose.
destroy forceDestroy Lorsque le paramètre forceDestroy est défini sur true, détruisez le panneau en contournant la fonction de rappel onBeforeDestroy.
refresh href Actualisez le panneau pour charger des données distantes. Si un paramètre 'href' est assigné, il remplacera l'ancienne propriété 'href'.
Exemple de code :
// open a panel and then refresh its contents.
$('#pp').panel('open').panel('refresh');
// refresh contents with a new URL.
$('#pp').panel('open').panel('refresh','new_content.php');
resize options Définissez la taille du panneau et effectuez la mise en page. L'objet Options contient les propriétés suivantes :
width: la nouvelle largeur du panneau
height: la nouvelle hauteur du panneau
left: la nouvelle position gauche du panneau
top: la nouvelle position supérieure du panneau

Exemple de code :
$('#pp').panel('resize',{
    width: 600,
    height: 400
});
move options Déplacez le panneau vers une nouvelle position. L'objet Options contient les propriétés suivantes :
left: la nouvelle position gauche du panneau
top: la nouvelle position supérieure du panneau
maximize none Le panneau s'adapte à la taille de son conteneur.
minimize none Réduire le panneau.
restaurer none Restaurer le panneau agrandi à sa taille et à sa position d'origine.
collapse animer Replier le corps du panneau.
expand animer Déplier le corps du panneau.
jQuery EasyUI 插件Plugins jQuery EasyUI Autres extensions