Plugin de mise en page jQuery EasyUI -Layout

jQuery EasyUI 插件Plugins jQuery EasyUI

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

La mise en page est un conteneur avec cinq régions (nord, sud, est, ouest et centre). Le panneau de la région centrale est requis, tandis que les panneaux des régions de bord sont facultatifs. Chaque panneau de région de bord peut être redimensionné en faisant glisser sa bordure, et peut également être réduit en cliquant sur le déclencheur de réduction. Les mises en page peuvent être imbriquées, ce qui permet aux utilisateurs de créer des mises en page complexes.

Dépendances

  • panel
  • redimensionnable

Utilisation

Créer une mise en page

1. Créer une mise en page via le balisage.

Ajoutez la classe 'easyui-layout' à une balise <div>.

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>

2. Créer une mise en page sur toute la page.

<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>

3. Créer une mise en page imbriquée.

Notez que le panneau de la région ouest de la mise en page interne est réduit.

<body class="easyui-layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'center'">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',collapsed:true" style="width:180px"></div>
            <div data-options="region:'center'"></div>
        </div>
    </div>
</body>

4. Charger le contenu via ajax.

La mise en page est créée en fonction du panneau. Chaque panneau de région offre une prise en charge intégrée pour le chargement dynamique de contenu à partir d'une URL. En utilisant le chargement dynamique, les utilisateurs peuvent afficher leurs pages de mise en page plus rapidement.

<body class="easyui-layout">
    <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
    <div data-options="region:'center',href:'center_content.php'" ></div>
</body>

Réduire le panneau de mise en page

$('#cc').layout();
// collapse the west panel
$('#cc').layout('collapse','west');

Ajouter un panneau de région ouest avec un bouton d'outil

$('#cc').layout('add',{
    region: 'west',
    width: 180,
    title: 'West Title',
    split: true,
    tools: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },{
        iconCls:'icon-remove',
        handler:function(){alert('remove')}
    }]
});

Options de mise en page

Name Type Description Valeur par défaut
fit booléen Lorsqu'il est défini sur true, la taille de la mise en page est définie pour s'adapter à son conteneur parent. Lors de la création d'une mise en page sur la balise 'body', elle sera automatiquement maximisée à la taille totale de la page entière. false

Options du panneau de région

Les options du panneau de région sont définies dans le composant panneau. Voici quelques propriétés courantes et nouvelles :

Name Type Description Valeur par défaut
title string Le texte du titre du panneau de mise en page. null
region string Définit la position du panneau de mise en page. Sa valeur est l'une des suivantes : north, south, east, west, center.
border booléen Lorsqu'il est défini sur true, la bordure du panneau de mise en page est affichée. vrai
split booléen Lorsqu'il est défini sur true, la barre de fractionnement est affichée, que les utilisateurs peuvent utiliser pour modifier la taille du panneau. false
iconCls string Une classe CSS qui affiche une icône dans l'en-tête du panneau. null
href string L'URL pour charger les données depuis un site distant. null
collapsible booléen Définit si le bouton réductible est affiché. vrai
minWidth nombre La largeur minimale du panneau. 10
minHeight nombre La hauteur minimale du panneau. 10
maxWidth nombre La largeur maximale du panneau. 10000
maxHeight nombre La hauteur maximale du panneau. 10000

Méthodes

Name Paramètre Description
resize none Définit la taille de la mise en page.
panel region Renvoie le panneau spécifié. Les valeurs possibles du paramètre 'region' sont : 'north', 'south', 'east', 'west', 'center'.
collapse region Réduit le panneau spécifié. Les valeurs possibles du paramètre 'region' sont : 'north', 'south', 'east', 'west'.
expand region Développe le panneau spécifié. Les valeurs possibles du paramètre 'region' sont : 'north', 'south', 'east', 'west'.
ajoutez options Ajoute un panneau spécifié. Le paramètre options est un objet de configuration. Pour plus de détails, reportez-vous aux propriétés du panneau d'onglets.
supprimer region Retire le panneau spécifié. Les valeurs possibles du paramètre 'region' sont : 'north', 'south', 'east', 'west'.
jQuery EasyUI 插件Plugins jQuery EasyUI Autres extensions