jQuery EasyUI Layout-Plugin -Panel

jQuery EasyUI 插件jQuery EasyUI Plugins

Überschreiben Sie die Standardwerte über $.fn.panel.defaults.

Das Panel wird als Container für andere Inhalte verwendet. Es ist die grundlegende Komponente zum Aufbau anderer Komponenten (wie Layout, Tabs, Accordion und so weiter). Es bietet außerdem integrierte Funktionen zum Einklappen, Schließen, Maximieren und Minimieren sowie andere benutzerdefinierte Verhaltensweisen. Ein Panel kann problemlos an beliebiger Stelle auf einer Webseite eingebettet werden.

Nutzung

Erstellen Sie ein Panel

1. Ein Panel über Markup erstellen

Es ist einfacher, ein Panel aus Markup zu erstellen. Fügen Sie dem <div>-Tag die Klasse 'easyui-panel' hinzu.

<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. Ein Panel programmgesteuert erstellen

Erstellen wir ein Panel mit einer Symbolleiste oben rechts.

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

Das Panel verschieben

Rufen Sie die Methode 'move' auf, um das Panel an eine neue Position zu verschieben.

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

Inhalt laden

Laden wir den Panel-Inhalt per ajax und zeigen einige Informationen an, wenn das Laden erfolgreich ist.

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

Eigenschaften

Name Type Beschreibung Standardwert
id string Das id-Attribut des Panels. null
title string Der im Panel-Header angezeigte Titeltext. null
iconCls string Eine CSS-Klasse, die ein 16x16-Symbol im Panel anzeigt. null
width number Legen Sie die Breite des Panels fest. auto
height number Legt die Höhe des Panels fest. auto
left number Legt die linke Position des Panels fest. null
top number Legt die obere Position des Panels fest. null
cls string Fügt dem Panel eine CSS-Klasse hinzu. null
headerCls string Fügt dem Panel-Header eine CSS-Klasse hinzu. null
bodyCls string Fügt dem Panel-Body eine CSS-Klasse hinzu. null
style Objekt Fügt dem Panel Stile mit benutzerdefinierter Formatierung hinzu.
Codebeispiel zum Ändern der Panel-Rahmenbreite:
<div class="easyui-panel" style="width:200px;height:100px"
        data-options="style:{borderWidth:2}">
</div>
{}
fit boolesch Wenn auf true gesetzt, passt sich die Größe des Panels an den übergeordneten Container an. Das folgende Beispiel zeigt ein Panel, das automatisch auf die maximale Innengröße seines übergeordneten Containers angepasst wird.
<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 boolesch Legt fest, ob der Rahmen des Panels angezeigt werden soll. wahr
doSize boolesch Wenn auf true gesetzt, wird die Größe des Panels angepasst und es wird beim Erstellen angeordnet. wahr
noheader boolesch Wenn auf true gesetzt, wird die Kopfzeile des Panels nicht erstellt. false
content string Der Inhaltsbereich des Panels. null
collapsible boolesch Legt fest, ob die Schaltfläche zum Einklappen angezeigt wird. false
minimizable boolesch Legt fest, ob die Schaltfläche zum Minimieren angezeigt wird. false
maximizable boolesch Legt fest, ob die Schaltfläche zum Maximieren angezeigt wird. false
closable boolesch Legt fest, ob die Schließen-Schaltfläche angezeigt wird. false
tools array,selector Benutzerdefinierte Tools, mögliche Werte:
1. Array, jedes Element enthält zwei Eigenschaften: iconCls und handler.
2. Selektor, der die Tools angibt.

Die Panel-Tools können über ein vorhandenes <div>-Tag deklariert werden:
<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>
Die Panel-Tools können über ein Array definiert werden:
<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 boolesch Legt fest, ob das Panel anfänglich eingeklappt ist. false
minimized boolesch Legt fest, ob das Panel anfänglich minimiert ist. false
maximized boolesch Legt fest, ob das Panel anfänglich maximiert ist. false
geschlossen boolesch Legt fest, ob das Panel anfänglich geschlossen ist. false
href string Eine URL, die zum Laden von Remote-Daten und zu deren Anzeige im Panel verwendet wird. Beachten Sie, dass der Inhalt erst geladen wird, wenn das Panel geöffnet wird. Dies ist nützlich, um ein verzögert geladenes Panel zu erstellen:
<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 boolesch Auf true setzen, um den von href geladenen Panel-Inhalt zwischenzuspeichern. wahr
loadingMessage string Zeigt eine Nachricht im Panel an, während Remote-Daten geladen werden. Wird geladen…
extractor Funktion Legt fest, wie Inhalt aus der Ajax-Antwort extrahiert wird, und gibt die extrahierten Daten zurück.
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;
    }
}

Ereignisse

Name Parameters Beschreibung
onLoad none Wird ausgelöst, wenn Remote-Daten geladen werden.
onBeforeOpen none Wird ausgelöst, bevor das Panel geöffnet wird; geben Sie false zurück, um das Öffnen zu verhindern.
onOpen none Wird ausgelöst, nachdem das Panel geöffnet wurde.
onBeforeClose none Wird ausgelöst, bevor das Panel geschlossen wird; geben Sie false zurück, um das Schließen abzubrechen. Das unten deklarierte Panel wird nicht geschlossen.
<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 Wird ausgelöst, nachdem das Panel geschlossen wurde.
onBeforeDestroy none Wird ausgelöst, bevor das Panel zerstört wird; geben Sie false zurück, um die Zerstörung abzubrechen.
onDestroy none Wird ausgelöst, nachdem das Panel zerstört wurde.
onBeforeCollapse none Wird ausgelöst, bevor das Panel eingeklappt wird; geben Sie false zurück, um das Einklappen zu stoppen.
onCollapse none Wird ausgelöst, nachdem das Panel eingeklappt wurde.
onBeforeExpand none Wird ausgelöst, bevor das Panel ausgeklappt wird; geben Sie false zurück, um das Ausklappen zu stoppen.
onExpand none Wird ausgelöst, nachdem das Panel erweitert wurde.
onResize width, height Wird ausgelöst, nachdem die Größe des Panels geändert wurde.
width: die neue äußere Breite
height: die neue äußere Höhe
onMove left,top Wird ausgelöst, nachdem das Panel verschoben wurde.
left: die neue linke Position
top: die neue obere Position
onMaximize none Wird ausgelöst, nachdem das Fenster maximiert wurde.
onRestore none Wird ausgelöst, nachdem das Fenster auf seine ursprüngliche Größe wiederhergestellt wurde.
onMinimize none Wird ausgelöst, nachdem das Fenster minimiert wurde.

Methoden

Name Parameters Beschreibung
options none Gibt die Eigenschaft options zurück.
panel none Gibt das äußere Panel-Objekt zurück.
header none Gibt das Header-Objekt des Panels zurück.
body none Gibt das Body-Objekt des Panels zurück.
setTitle title Legt den Titeltext des Headers fest.
open forceOpen Wenn der Parameter forceOpen auf true gesetzt ist, öffnen Sie das Panel unter Umgehung der onBeforeOpen-Callback-Funktion.
close forceClose Wenn der Parameter forceClose auf true gesetzt ist, schließen Sie das Panel unter Umgehung der onBeforeClose-Callback-Funktion.
destroy forceDestroy Wenn der Parameter forceDestroy auf true gesetzt ist, wird das Panel zerstört, wobei die Callback-Funktion onBeforeDestroy umgangen wird.
refresh href Aktualisiere das Panel, um Remote-Daten zu laden. Wenn ein Parameter 'href' zugewiesen wird, überschreibt er die alte Eigenschaft 'href'.
Codebeispiel:
// 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 Legt die Panelgröße fest und führt das Layout aus. Das Objekt Options enthält die folgenden Eigenschaften:
width: die neue Panelbreite
height: die neue Panelhöhe
left: die neue linke Position des Panels
top: die neue obere Position des Panels

Codebeispiel:
$('#pp').panel('resize',{
    width: 600,
    height: 400
});
move options Verschiebt das Panel an eine neue Position. Das Objekt Options enthält die folgenden Eigenschaften:
left: die neue linke Position des Panels
top: die neue obere Position des Panels
maximize none Das Panel passt sich an die Größe seines Containers an.
minimize none Das Panel minimieren.
wiederherstellen none Das maximierte Panel auf seine ursprüngliche Größe und Position wiederherstellen.
collapse animate Den Panel-Inhalt einklappen.
expand animate Den Panel-Inhalt ausklappen.
jQuery EasyUI 插件jQuery EasyUI Plugins Weitere Erweiterungen