widget de jQuery EasyUI - Dialog Dialog
plugin de jQuery EasyUI Extendido desde $ .fn.window.defaults. Por $ .fn.dialog.defaults anulan los valores predeterminados por defecto.
De diálogo (diálogo) es un tipo especial de ventana que tiene una barra de herramientas en la parte superior, en la parte inferior hay una barra de botones. De forma predeterminada, el cuadro de diálogo (diálogo) es sólo una herramienta en el lado derecho de la cabeza para cerrar la pantalla. Los usuarios pueden configurar el comportamiento del cuadro de diálogo para mostrar las herramientas adicionales (tales como: minimizable plegable plegable, se puede minimizar, maximizar maximizable, etc.).
confiar
- ventana
- LinkButton
uso
Al marcar crea un cuadro de diálogo (diálogo) desde un nodo DOM existente. El siguiente ejemplo muestra un cuadro de diálogo modal con la característica de tamaño ajustable.
id = clase "dd" <div = "-easyui de diálogo" title = estilo "Mi diálogo" = "width: 400px; altura: 200px;"
datos-options = "iconCls: 'icono-SAVE', de tamaño variable: true, modales: true">
Contenido de diálogo.
</ Div>
Usar javascript para crear cuadros de diálogo (diálogo). Ahora vamos a crear un cuadro de diálogo modal, y luego llamar al método 'actualización' a través de ajax cargar su contenido.
<Div id = "dd"> Contenido de diálogo. </ Div>
$ ( '# DD'). Diálogo ({
Título: "Mi diálogo ',
anchura: 400,
altura: 200,
cerrado: falso,
cache: false,
href: 'get_content.php',
modal: true
});
. $ ( '# DD') de diálogo ( 'actualización', 'new_content.php');
propiedad
La propiedad se extiende desde la ventana (ventana) El siguiente es un cuadro de diálogo (diálogo) reescritura de propiedades.
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| 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 |
evento
El evento se extiende desde el panel (panel).
camino
Los métodos se extienden desde la ventana (ventana), el siguiente es un método para el cuadro de diálogo (diálogo) añadir.
| 名称 | 参数 | 描述 |
|---|---|---|
| dialog | none | 返回外部对话框（dialog）对象。 |
plugin de jQuery EasyUI