jQuery EasyUI Layout-Plugin -Layout

jQuery EasyUI 插件jQuery EasyUI Plugins

Überschreiben Sie die Standardeinstellungen über $.fn.layout.defaults.

Das Layout ist ein Container mit fünf Bereichen (Nord, Süd, Ost, West und Mitte). Das Panel des mittleren Bereichs ist erforderlich, während die Panels der Randbereiche optional sind. Jedes Panel eines Randbereichs kann durch Ziehen an seinem Rand in der Größe verändert werden und kann auch durch Klicken auf den Einklapp-Auslöser eingeklappt werden. Layouts können verschachtelt werden, sodass Benutzer komplexe Layouts erstellen können.

Abhängigkeiten

  • panel
  • resizable

Nutzung

Ein Layout erstellen

1. Erstellen Sie ein Layout über Markup.

Fügen Sie die Klasse 'easyui-layout' zu einem <div>-Tag hinzu.

<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. Erstellen Sie ein Layout auf der gesamten Seite.

<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. Erstellen Sie ein verschachteltes Layout.

Beachten Sie, dass das West-Bereichs-Panel des inneren Layouts eingeklappt ist.

<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. Laden Sie Inhalte über Ajax.

Das Layout wird basierend auf dem Panel erstellt. Jedes Bereichs-Panel bietet integrierte Unterstützung für das dynamische Laden von Inhalten von einer URL. Durch dynamisches Laden können Benutzer ihre Layoutseiten schneller anzeigen lassen.

<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>

Layout-Panel einklappen

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

Ein West-Bereichs-Panel mit einer Werkzeugschaltfläche hinzufügen

$('#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')}
    }]
});

Layout-Optionen

Name Type Beschreibung Standardwert
fit boolesch Wenn auf true gesetzt, wird die Größe des Layouts so festgelegt, dass sie in den übergeordneten Container passt. Wenn ein Layout im 'body'-Tag erstellt wird, wird es automatisch auf die volle Größe der gesamten Seite maximiert. false

Bereichs-Panel-Optionen

Bereichs-Panel-Optionen werden in der Panel-Komponente definiert. Die folgenden sind einige gängige und neue Eigenschaften:

Name Type Beschreibung Standardwert
title string Der Titeltext des Layout-Panels. null
region string Definiert die Position des Layout-Panels. Sein Wert ist einer der folgenden: north, south, east, west, center.
border boolesch Wenn auf true gesetzt, wird der Rahmen des Layout-Panels angezeigt. wahr
split boolesch Wenn auf true gesetzt, wird die Trennleiste angezeigt, mit der Benutzer die Größe des Panels ändern können. false
iconCls string Eine CSS-Klasse, die ein Symbol in der Kopfzeile des Panels anzeigt. null
href string Die URL zum Laden von Daten von einer entfernten Website. null
collapsible boolesch Definiert, ob die einklappbare Schaltfläche angezeigt wird. wahr
minWidth number Die Mindestbreite des Panels. 10
minHeight number Die Mindesthöhe des Panels. 10
maxWidth number Die maximale Breite des Panels. 10000
maxHeight number Die maximale Höhe des Panels. 10000

Methoden

Name Parameter Beschreibung
resize none Legt die Größe des Layouts fest.
panel region Gibt das angegebene Panel zurück. Mögliche Werte des Parameters 'region' sind: 'north', 'south', 'east', 'west', 'center'.
collapse region Klappt das angegebene Panel ein. Mögliche Werte des Parameters 'region' sind: 'north', 'south', 'east', 'west'.
expand region Klappt das angegebene Panel aus. Mögliche Werte des Parameters 'region' sind: 'north', 'south', 'east', 'west'.
hinzufügen options Fügt ein angegebenes Panel hinzu. Der Parameter options ist ein Konfigurationsobjekt. Weitere Details finden Sie in den Eigenschaften des Tab-Panels.
entfernen region Entfernt das angegebene Panel. Mögliche Werte des Parameters 'region' sind: 'north', 'south', 'east', 'west'.
jQuery EasyUI 插件jQuery EasyUI Plugins Weitere Erweiterungen