jQuery EasyUI Fenster-Plugin -Dialog

jQuery EasyUI 插件jQuery EasyUI Plugin

Erweitert $.fn.window.defaults. Überschreiben Sie die Standardwerte mit $.fn.dialog.defaults.

Der Dialog ist eine spezielle Art von Fenster, das eine Symbolleiste oben und eine Schaltflächenleiste unten hat. Standardmäßig hat der Dialog nur ein Schließen-Werkzeug, das auf der rechten Seite der Kopfzeile angezeigt wird. Benutzer können das Dialogverhalten konfigurieren, um andere Werkzeuge anzuzeigen (wie: einklappbar, minimierbar, maximierbar usw.).

Abhängigkeiten

  • window
  • linkbutton

Nutzung

Erstellt einen Dialog aus einem vorhandenen DOM-Knoten mit Markup. Das folgende Beispiel zeigt einen modalen Dialog mit Größenänderungsfunktionen.

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
    data-options="iconCls:'icon-save',resizable:true,modal:true">
    Dialog Content.
</div>

Erstellt einen Dialog mit JavaScript. Jetzt erstellen wir einen modalen Dialog und rufen dann die Methode 'refresh' auf, um seinen Inhalt per Ajax zu laden.

<div id="dd">Dialog Content.</div>

$('#dd').dialog({
    title: 'My Dialog',
    width: 400,
    height: 200,
    closed: false,
    cache: false,
    href: 'get_content.php',
    modal: true
});
$('#dd').dialog('refresh', 'new_content.php');

Eigenschaften

Diese Eigenschaften erweitern window. Die folgenden sind für Dialog überschriebene Eigenschaften.

Name Type Beschreibung Standardwert
title string Der Titeltext des Dialogs. Neuer Dialog
collapsible boolesch Legt fest, ob die Schaltfläche zum Einklappen angezeigt werden soll. false
minimizable boolesch Legt fest, ob die Schaltfläche zum Minimieren angezeigt werden soll. false
maximizable boolesch Legt fest, ob die Schaltfläche zum Maximieren angezeigt werden soll. false
resizable boolesch Legt fest, ob der Dialog in der Größe veränderbar ist. false
toolbar array,selector Die obere Symbolleiste des Dialogs. Mögliche Werte:
1. Ein Array, die Optionen jedes Tools sind dieselben wie bei linkbutton.
2. Ein Selektor, der die Symbolleiste angibt.

Die Dialog-Symbolleiste kann in einem <div>-Tag deklariert werden:
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',toolbar:'#tb',modal:true">
    Dialog Content.
</div>
<div id="tb">
<a href="../index.html" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="../index.html" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>
Die Dialog-Symbolleiste kann auch über ein Array definiert werden:
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',modal:true,
            toolbar:[{
                text:'Edit',
                iconCls:'icon-edit',
                handler:function(){alert('edit')}
            },{
                text:'Help',
                iconCls:'icon-help',
                handler:function(){alert('help')}
            }]">
    Dialog Content.
</div>
null
buttons array,selector Die unteren Schaltflächen des Dialogs. Mögliche Werte:
1. Ein Array, die Optionen jeder Schaltfläche sind dieselben wie bei linkbutton.
2. Ein Selektor, der die Schaltflächenleiste angibt.

Die Schaltflächen können in einem <div>-Tag deklariert werden:
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',buttons:'#bb',modal:true">
    Dialog Content.
</div>
<div id="bb">
    <a href="../index.html" class="easyui-linkbutton">Save</a>
    <a href="../index.html" class="easyui-linkbutton">Close</a>
</div>
Die Schaltflächen können auch über ein Array definiert werden:
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',modal:true,
            buttons:[{
                text:'Save',
                handler:function(){...}
            },{
                text:'Close',
                handler:function(){...}
            }]">
    Dialog Content.
</div>
null

Ereignisse

Diese Ereignisse erben von panel.

Methoden

Diese Methoden erben von window. Die folgenden Methoden wurden für dialog hinzugefügt.

Name Parameters Beschreibung
dialog none Gibt das externe Dialogobjekt zurück.
jQuery EasyUI 插件jQuery EasyUI Plugin Weitere Erweiterungen