widget de jQuery EasyUI - Dialog Dialog
jQuery EasyUI plug - in Extended de .fn.window.defaults de $. Par $ .fn.dialog.defaults remplacent les valeurs par défaut par défaut.
Dialog (boîte de dialogue) est un type spécial de fenêtre qui a une barre d'outils en haut, en bas il y a une barre de boutons. Par défaut, la boîte de dialogue (de dialogue) est seulement un outil dans le côté droit de la tête pour fermer l'écran. Les utilisateurs peuvent configurer le comportement de la boîte de dialogue pour afficher les outils supplémentaires (tels que: minimizable pliage pliable, peut être minimisée, afin de maximiser maximizable, etc.).
Fiez
- fenêtre
- linkbutton
usage
En marquant crée une boîte de dialogue (de dialogue) à partir d'un noeud DOM existant. L'exemple suivant illustre un dialogue modal avec la fonction réglable de taille.
<Div id = classe "dd" = "easyui-dialogue" title = Style "My Dialog" = "width: 400px; height: 200px;"
données-options = "iconCls:« icon-save ', redimensionnables: true, modales: true ">
Contenu de dialogue.
</ Div>
Utilisez javascript pour créer des boîtes de dialogue (de dialogue). Maintenant, nous allons créer une boîte de dialogue modale, puis appeler la méthode 'refresh' via ajax chargement de son contenu.
<Div id = "dd"> Contenu de dialogue. </ Div>
$ ( '# Dd'). Dialog ({
titre: «Mon dialogue»,
largeur: 400,
hauteur: 200,
fermé: false,
cache: false,
href: 'get_content.php',
modal: true
});
. $ ( '# Dd') dialogue ( 'refresh', 'new_content.php');
propriété
La propriété s'étend à partir de la fenêtre (fenêtre) Ce qui suit est une boîte de dialogue (de dialogue) réécriture des propriétés.
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| 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 |
événement
L'événement se prolonge à partir du panneau (panneau).
manière
Les méthodes étendent à partir de la fenêtre (fenêtre), ce qui suit est un procédé pour la boîte de dialogue (de dialogue) ajouter.
| 名称 | 参数 | 描述 |
|---|---|---|
| dialog | none | 返回外部对话框（dialog）对象。 |
jQuery EasyUI plug - in