Plugin Window de jQuery EasyUI -Dialog

jQuery EasyUI 插件jQuery EasyUI Plugin

Hérite de $.fn.window.defaults. Surchargez les valeurs par défaut avec $.fn.dialog.defaults.

La boîte de dialogue est un type spécial de fenêtre qui possède une barre d'outils en haut et une barre de boutons en bas. Par défaut, la boîte de dialogue n'a qu'un seul outil de fermeture affiché sur le côté droit de l'en-tête. Les utilisateurs peuvent configurer le comportement de la boîte de dialogue pour afficher d'autres outils (tels que : repliable, minimisable, maximisable, etc.).

Dépendances

  • window
  • linkbutton

Utilisation

Créez une boîte de dialogue à partir d'un nœud DOM existant avec du balisage. L'exemple ci-dessous illustre une boîte de dialogue modale avec des fonctionnalités de redimensionnement.

<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>

Créez une boîte de dialogue en JavaScript. Maintenant, créons une boîte de dialogue modale, puis appelons la méthode 'refresh' pour charger son contenu via ajax.

<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');

Propriétés

Ces propriétés héritent de window. Les suivantes sont des propriétés surchargées pour la boîte de dialogue.

Name Type Description Valeur par défaut
title string Le texte du titre de la boîte de dialogue. Nouvelle boîte de dialogue
collapsible booléen Définit s'il faut afficher le bouton repliable. false
minimizable booléen Définit s'il faut afficher le bouton minimisable. false
maximizable booléen Définit s'il faut afficher le bouton maximisable. false
redimensionnable booléen Définit si la boîte de dialogue est redimensionnable. false
toolbar tableau, sélecteur La barre d'outils supérieure de la boîte de dialogue. Valeurs possibles :
1. Un tableau, les options de chaque outil sont les mêmes que celles de linkbutton.
2. Un sélecteur, indiquant la barre d'outils.

La barre d'outils du dialog peut être déclarée dans une balise <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="../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>
La barre d'outils du dialog peut aussi être définie via un tableau :
<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 tableau, sélecteur Les boutons inférieurs du dialog. Valeurs possibles :
1. Un tableau, les options de chaque bouton sont les mêmes que celles de linkbutton.
2. Un sélecteur, indiquant la barre de boutons.

Les boutons peuvent être déclarés dans une balise <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="../index.html" class="easyui-linkbutton">Save</a>
    <a href="../index.html" class="easyui-linkbutton">Close</a>
</div>
Les boutons peuvent aussi être définis via un tableau :
<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énements

Ces événements héritent de panel.

Méthodes

Ces méthodes héritent de window. Les suivantes sont des méthodes ajoutées pour dialog.

Name Parameters Description
dialog none Renvoie l'objet de dialogue externe.
jQuery EasyUI 插件jQuery EasyUI Plugin Autres extensions