Widget jQuery EasyUI - Dialog Dialog
jQuery EasyUI plug-in Prorrogado a partir de $ .fn.window.defaults. Por $ .fn.dialog.defaults substituir os padrões predefinidos.
Diálogo (diálogo) é um tipo especial de janela que possui uma barra de ferramentas na parte superior, na parte inferior, há uma barra de botões. Por padrão, a caixa de diálogo (de diálogo) é apenas uma ferramenta no lado direito da cabeça para fechar a tela. Os usuários podem configurar o comportamento da caixa de diálogo para exibir ferramentas adicionais (tais como: minimizable dobrável dobrável, pode ser minimizado, para maximizar maximizable, etc.).
depender
- janela
- linkbutton
uso
Ao marcar cria uma caixa de diálogo (de diálogo) a partir de um nó DOM existente. O exemplo a seguir demonstra um diálogo modal com o recurso de tamanho ajustável.
<Div id = class "dd" = título "-de diálogo easyui" = "My Dialog" style = "width: 400px; height: 200px;"
-opções de dados = "iconCls: 'icon-save', redimensionáveis: true, modal: true">
Conteúdo de diálogo.
</ Div>
Usar javascript para criar caixas de diálogo (de diálogo). Agora vamos criar uma caixa de diálogo modal, e, em seguida, chamar o método 'refresh' via ajax carregar o seu conteúdo.
<Div id = "dd"> Conteúdo de diálogo. </ Div>
$ ( "# Dd). Dialog ({
Título: 'Meu diálogo',
width: 400,
height: 200,
fechada: false,
de cache: false,
href: 'get_content.php',
modal: true
});
. $ ( '# Dd') de diálogo ( "refresh", "new_content.php ');
propriedade
A propriedade se estende a partir da janela (janela) a O seguinte é uma caixa de diálogo (de diálogo) reescrevendo propriedades.
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| 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
O evento estende-se desde o painel (o painel).
caminho
Os métodos de estender a partir da janela (janela), o seguinte é um método para a caixa de diálogo (de diálogo) adicionar.
| 名称 | 参数 | 描述 |
|---|---|---|
| dialog | none | 返回外部对话框（dialog）对象。 |
jQuery EasyUI plug-in