jQuery EasyUI Widget - Dialog Dialog
jQuery Plugin EasyUI Erweiterte von $ .fn.window.defaults. Mit $ außer Kraft setzen .fn.dialog.defaults die Standardeinstellungen zurück.
Dialog (Dialog) ist eine spezielle Art von Fenster, die eine Symbolleiste am oberen Rand hat, an der Unterseite gibt es eine Buttonleiste ist. Standardmäßig ist das Dialogfeld (Dialog) nur ein Werkzeug in der rechten Seite des Kopfes um die Anzeige zu schließen. Benutzer können das Verhalten des Dialogfelds konfigurieren zusätzliche Tools anzuzeigen (wie zum Beispiel: Falten zusammenklappbar, kann minimiert minimizable werden, zu maximieren maximizable, etc.).
Verlassen Sie sich
- Fenster
- Linkbutton
Verwendung
Durch die Markierung erstellt ein Dialogfeld (Dialog) von einem vorhandenen DOM-Knoten. Das folgende Beispiel zeigt einen modalen Dialog mit der einstellbaren Größe Funktion.
<Div id = "dd" class = "easyui-Dialog" title = "My Dialog" style = "width: 400px; height: 200px;"
Daten-Optionen = "iconCls: 'Icon-save', resizable: true, Modal: true">
Dialog Inhalt.
</ Div>
Verwenden Sie Javascript, Dialogfelder zu erstellen (Dialog). Lassen Sie uns jetzt einen modalen Dialogfeld zu erstellen, und rufen Sie dann "Refresh" Methode über Ajax seinen Inhalt zu laden.
<Div id = "dd"> Dialog Inhalt. </ Div>
$ ( '# Dd'). Dialog ({
Titel: 'My Dialog',
Breite: 400,
Höhe: 200,
geschlossen: false,
Cache: false,
href: 'get_content.php',
modal: true
});
. $ ( '# Dd') Dialog ( "Refresh", "new_content.php ');
Immobilien
Das Anwesen erstreckt sich vom Fenster (Fenster) Das folgende ist ein Dialogfeld (Dialog) Umschreiben Eigenschaften.
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| title | string | 对话框的标题文本。 | New Dialog |
| collapsible | boolean | 定义是否显示折叠按钮。 | false |
| minimizable | boolean | 定义是否显示最小化按钮。 | false |
| maximizable | boolean | 定义是否显示最大化按钮。 | false |
| resizable | boolean | 定义对话框是否可调整尺寸。 | false |
| toolbar | array,selector | 对话框的顶部工具栏，可能的值： 1、数组，每个工具的选项都与链接按钮（linkbutton）一样。 2、选择器，指示工具栏。 对话框工具栏可以在 <div>标签中声明： <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="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a> </div>对话框工具栏也可以通过数组定义：
<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 | 对话框的底部按钮，可能的值： 1、数组，每个按钮的选项都与链接按钮（linkbutton）一样。 2、选择器，指示按钮栏。 按钮可以在 <div>标签中声明： <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="#" class="easyui-linkbutton">Save</a> <a href="#" class="easyui-linkbutton">Close</a> </div>按钮也可以通过数组定义：
<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 |
Ereignis
Die Veranstaltung erstreckt sich von der Platte (Platte).
Weg
Die Methoden reichen von Fenster (Fenster) die folgende ist ein Verfahren für das Dialogfeld (Dialog) hinzufügen.
| 名称 | 参数 | 描述 |
|---|---|---|
| dialog | none | 返回外部对话框（dialog）对象。 |
jQuery Plugin EasyUI