jQuery EasyUI Window Plugin -Window

jQuery EasyUI 插件jQuery EasyUI Plugins

Erbt von $.fn.panel.defaults. Überschreiben Sie die Standardeinstellungen über $.fn.window.defaults.

Das Fenster ist ein schwebendes, verschiebbares Panel, das als Anwendungsfenster verwendet werden kann. Standardmäßig kann das Fenster verschoben, in der Größe geändert und geschlossen werden. Sein Inhalt kann über statisches HTML definiert oder dynamisch über AJAX geladen werden.

Abhängigkeiten

  • draggable
  • resizable
  • panel

Nutzung

Fenster erstellen

1. Erstellen Sie ein Fenster aus Markup.

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
    data-options="iconCls:'icon-save',modal:true">
    Window Content
</div>

2. Erstellen Sie ein Fenster mit JavaScript.

<div id="win"></div>

$('#win').window({
    width:600,
    height:400,
    modal:true
});

3. Erstellen Sie ein Fenster mit einem zusammengesetzten Layout.

Wie üblich können Sie das Fensterlayout definieren. Das folgende Beispiel zeigt, wie Sie den Fensterbereich in zwei Teile aufteilen: den nördlichen Bereich und den mittleren Bereich.

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
    data-options="iconCls:'icon-save',modal:true">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',split:true" style="height:100px"></div>
        <div data-options="region:'center'">
            The Content.
        </div>
    </div>
</div>

Fensteraktionen

Fenster öffnen und schließen.

$('#win').window('open'); // open a window
$('#win').window('close'); // close a window

Fensterinhalt über AJAX laden.

$('#win').window('refresh', 'get_content.php');

Eigenschaften

Diese Eigenschaften erweitern die aus dem Panel. Nachfolgend sind die Eigenschaften aufgeführt, die für das Fenster überschrieben und hinzugefügt werden.

Name Type Beschreibung Standardwert
title string Der Titeltext des Fensters. Neues Fenster
collapsible boolesch Legt fest, ob die Schaltfläche zum Einklappen angezeigt wird. wahr
minimizable boolesch Legt fest, ob die Schaltfläche zum Minimieren angezeigt wird. wahr
maximizable boolesch Legt fest, ob die Schaltfläche zum Maximieren angezeigt wird. wahr
closable boolesch Legt fest, ob die Schließen-Schaltfläche angezeigt wird. wahr
geschlossen boolesch Legt fest, ob das Fenster geschlossen werden soll. false
zIndex number Der z-index des Fensters, von dem aus die Erhöhung beginnen soll. 9000
draggable boolesch Legt fest, ob das Fenster gezogen werden kann. wahr
resizable boolesch Legt fest, ob die Größe des Fensters geändert werden kann. wahr
shadow boolesch Wenn auf true gesetzt, wird ein Schatten angezeigt, wenn das Fenster einen Schatten anzeigen kann. wahr
inline boolesch Definiert, wie das Fenster platziert wird. Wenn auf true gesetzt, wird es in seinem übergeordneten Container platziert; wenn auf false gesetzt, schwebt es über allen Elementen. false
modal boolesch Definiert, ob das Fenster ein modales Fenster ist. wahr

Ereignisse

Diese Ereignisse erweitern die des Panels.

Methoden

Diese Methoden erweitern die des Panels. Nachfolgend sind die für das Fenster hinzugefügten Methoden aufgeführt.

Name Parameter Beschreibung
window none Gibt das äußere Fensterobjekt zurück.
hcenter none Zentriert das Fenster horizontal. Diese Methode ist seit Version 1.3.1 verfügbar.
vcenter none Zentriert das Fenster vertikal. Diese Methode ist seit Version 1.3.1 verfügbar.
center none Zentriert das Fenster. Diese Methode ist seit Version 1.3.1 verfügbar.
jQuery EasyUI 插件jQuery EasyUI Plugins Weitere Erweiterungen