jQuery UI LibraryDialogue


Syntaxe

  • $ (".selector") .dialog ("option", "disabled"); // Option Getter, spécifique
  • $ (".selector") .dialog ("option"); // Option Getter tous
  • $ (".selector") .dialog ("option", "disabled", true); // Option Setter, spécifique
  • $ (".selector") .dialog ("option", {disabled: true}); // Option Setter, multiple
  • $ (".selector") .dialog ("close"); // Les déclencheurs se ferment
  • $ (".selector") .dialog ({close: function () {}}); // Fermer la surcharge
  • $ (".selector") .on ("dialogclose", function (event, ui) {}); // Fermer la surcharge

Paramètres

Paramètre La description
Les options
ajouter à (Sélecteur) [Par défaut: "body" ] Quel élément le dialogue (et la superposition, si modale) doivent être ajoutés.
autoOpen (Booléen) [Valeur par défaut: true ] Si défini sur true, la boîte de dialogue s’ouvrira automatiquement lors de l’initialisation. Si la valeur est false, la boîte de dialogue reste masquée jusqu'à ce que la méthode open () soit appelée.
boutons (Object / Array) Spécifie les boutons à afficher dans la boîte de dialogue. Le contexte du rappel est l'élément de dialogue; Si vous avez besoin d'accéder au bouton, il est disponible en tant que cible de l'objet événement.
fermerenvironnement (Booléen) [Valeur par défaut: true ] Spécifie si la boîte de dialogue doit se fermer lorsqu'elle a le focus et que l'utilisateur appuie sur la touche Échap (ÉCHAP).
closeText (String) [Valeur par défaut: "close" ] Spécifie le texte du bouton de fermeture. Notez que le texte de fermeture est visiblement masqué lors de l'utilisation d'un thème standard.
dialogClass (String) Le ou les noms de classe spécifiés seront ajoutés à la boîte de dialogue, pour un thème supplémentaire.
draggable (Booléen) [Défaut: true ] Si défini sur true , la boîte de dialogue sera déplaçable par la barre de titre. Nécessite le widget Draggable de l'interface utilisateur jQuery pour être inclus.
la taille (Number / String) [Valeur par défaut: "auto" ] Hauteur de la boîte de dialogue.
cacher (Bool / Num / Str / Obj) Si et comment animer le masquage de la boîte de dialogue.
hauteur maximum (Number) [Default: false ] Hauteur maximale à laquelle la boîte de dialogue peut être redimensionnée, en pixels.
largeur maximale (Number) [Valeur par défaut: false ] Largeur maximale à laquelle la boîte de dialogue peut être redimensionnée, en pixels.
minHeight (Nombre) [Défaut: 150 ] Hauteur minimale à laquelle la boîte de dialogue peut être redimensionnée, en pixels.
minWidth (Nombre) [Défaut: 150 ] La largeur minimale à laquelle la boîte de dialogue peut être redimensionnée, en pixels.
modal (Booléen) [Par défaut: false ] Si défini sur true, le dialogue aura un comportement modal; les autres éléments de la page seront désactivés, c’est-à-dire qu’ils ne pourront pas interagir avec. Les boîtes de dialogue modales créent une superposition sous la boîte de dialogue, mais au-dessus des autres éléments de la page.
position (Object) [Valeur par défaut: { my: "center", at: "center", of: window } ] Spécifie où la boîte de dialogue doit être affichée lorsqu'elle est ouverte. La boîte de dialogue gérera les collisions de manière à ce que la plus grande partie de la boîte de dialogue soit visible.
redimensionnable (Booléen) [Valeur par défaut: true ] Si défini sur true, la boîte de dialogue sera redimensionnable. Nécessite le widget jQuery UI Resizable pour être inclus.
montrer (Bool / Num / Str / Obj) Si et comment animer l'affichage de la boîte de dialogue.
Titre (String) Spécifie le titre de la boîte de dialogue. Si la valeur est null, l'attribut title de l'élément source de la boîte de dialogue sera utilisé.
largeur (Number) [Default: 300 ] La largeur de la boîte de dialogue, en pixels.
Les méthodes
Fermer Ferme la boîte de dialogue.
détruire Supprime complètement la fonctionnalité de dialogue. Cela ramènera l'élément à son état pré-initial.
exemple Récupère l'objet d'instance de la boîte de dialogue. Si l'élément n'a pas d'instance associée, undefined est renvoyé.
est ouvert Si la boîte de dialogue est actuellement ouverte.
moveToTop Déplace la boîte de dialogue en haut de la pile de boîtes de dialogue.
ouvrir Ouvre la boîte de dialogue.
option Obtient la valeur actuellement associée à l' optionName spécifiée.
option Obtient un objet contenant des paires clé / valeur représentant les options de la boîte de dialogue en cours.
option Définit une ou plusieurs options pour la boîte de dialogue.
widget Renvoie un objet jQuery contenant le wrapper généré.
Points d'extension
_allowInteraction (event) Les boîtes de dialogue modales n'autorisent pas les utilisateurs à interagir avec les éléments situés derrière la boîte de dialogue. Cela peut être problématique pour les éléments qui ne sont pas des enfants du dialogue, mais qui sont absolument positionnés pour apparaître comme s'ils étaient. La méthode _allowInteraction() détermine si l'utilisateur doit être autorisé à interagir avec un élément cible donné; par conséquent, il peut être utilisé pour mettre en liste blanche des éléments qui ne sont pas des enfants du dialogue, mais que vous souhaitez que les utilisateurs puissent utiliser.
Événements
avantFermer (event, ui) Déclenché lorsqu'une boîte de dialogue est sur le point de se fermer. En cas d'annulation, la boîte de dialogue ne se ferme pas.
Fermer (événement, ui) Déclenché lorsque la boîte de dialogue est fermée.
créer (événement, ui) Déclenché lorsque la boîte de dialogue est créée.
traîne (événement, ui {position, offset}) Déclenché pendant le glissement de la boîte de dialogue.
dragStart (event, ui {position, offset}) Déclenché lorsque l'utilisateur commence à faire glisser la boîte de dialogue.
dragStop (événement, ui {position, offset}) Déclenché après le déplacement de la boîte de dialogue.
concentrer (événement, ui) Déclenché lorsque la boîte de dialogue gagne du focus.
ouvrir (événement, ui) Déclenché lorsque la boîte de dialogue est ouverte.
redimensionner (event, ui {originalPosition, position, originalSize, size}) Déclenché pendant le redimensionnement de la boîte de dialogue.
redimensionnerStart (event, ui {originalPosition, position, originalSize, size}) Déclenché pendant le redimensionnement de la boîte de dialogue.
resizeStop (event, ui {originalPosition, position, originalSize, size}) Déclenché pendant le redimensionnement de la boîte de dialogue.

Remarques

Source de paramètre: http://api.jqueryui.com/dialog/

Dialogue Exemples Liés