jQuery EasyUI-Erweiterungen -Portal (Erstellen von Diagrammen, Listen, Kugeldiagrammen usw.)
jQuery EasyUI Erweiterungen
Nutzung
Schritt 1: Eine HTML-Seite erstellen
<div id="pp" style="width:800px;height:500px;"> <div style="width:33%"></div> <div style="width:33%"></div> <div style="width:33%"></div> </div>
Schritt 2: Portal erstellen
$('#pp').portal(options);
Schritt 3: Panel-Widgets zum Portal hinzufügen
// create the panel
var p = $('<div></div>').appendTo('body');
p.panel({
title: 'My Title',
height:150,
closable: true,
collapsible: true
});
// add the panel to portal
$('#pp').portal('add', {
panel: p,
columnIndex: 0
});
Eigenschaften
| Name | Type | Beschreibung | Standardwert |
|---|---|---|---|
| width | number | Die Breite des Portals. | auto |
| height | number | Die Höhe des Portals. | auto |
| border | boolesch | Legt fest, ob der Rahmen des Portals angezeigt wird. | false |
| fit | boolesch | Wenn auf true gesetzt, wird die Größe des Portals an den übergeordneten Container angepasst. | false |
Ereignisse
| Name | Parameters | Beschreibung |
|---|---|---|
| onStateChange | none | Ausgelöst, wenn der Benutzer ein Panel zieht und ablegt. |
| onResize | width,height | Ausgelöst, wenn sich die Größe des Portals ändert. |
Methoden
| Name | Parameters | Beschreibung |
|---|---|---|
| options | none | Gibt das Optionsobjekt zurück. |
| resize | param | Legt die Größe des Portals fest. Der Parameter 'param' enthält folgende Eigenschaften: width: die neue Breite des Portals. height: die neue Höhe des Portals. |
| getPanels | columnIndex | Ruft das angegebene Spaltenpanel ab. Wenn der Parameter columnIndex nicht angegeben ist, werden alle Panels zurückgegeben. |
| hinzufügen | param | Fügt ein neues Panel hinzu. Der Parameter 'param' enthält folgende Eigenschaften: panel: das Panel-Objekt, das hinzugefügt werden soll. columnIndex: der Spaltenindex, der eingefügt werden soll. |
| entfernen | panel | Entfernt und zerstört das angegebene Panel. |
| disableDragging | panel | Deaktiviert die Drag-and-Drop-Funktionalität des Panels. |
| enableDragging | panel | Aktiviert die Drag-and-Drop-Funktionalität des Panels. |
jQuery EasyUI-Beispiele herunterladen
jquery-easyui-portal.zip
jQuery EasyUI Erweiterungen Weitere Erweiterungen