Latest web development tutorials

jQuery UI API - composant de dialogue (Dialog Widget)

catégorie

Widgets (Widgets)

usage

Description: contenu Ouvrir dans une superposition interactif.

Nouvelle Version: 1.0

Dialog est une fenêtre flottante qui comprend une barre de titre et une zone de contenu. La fenêtre de dialogue peut être déplacé, redimensionné, par défaut en 'x' icône pour fermer.

Si la longueur du contenu dépasse la hauteur maximale, une barre de défilement apparaît automatiquement.

Une barre de boutons en bas, et un mode de recouvrement semi-transparent est commun d'ajouter des options.

foyer

Lorsque vous ouvrez une boîte de dialogue, l'accent se déplace automatiquement pour répondre aux critères ci-dessous le premier élément:

  1. Avec autofocus dialog premier élément dans les propriétés
  2. Le premier contenu de la boîte de dialogue à l' intérieur :tabbable élément
  3. Le premier panneau dans le bouton de dialogue :tabbable élément
  4. boîte de dialogue, le bouton Fermer
  5. La boîte de dialogue lui-même

Lorsqu'il est ouvert, les composants de dialogue (Dialog Widget) assurent les cases pour basculer le focus entre les éléments par onglet, la boîte de dialogue ne comprend pas les éléments en dehors. dialogue Modal empêche l'utilisateur clique sur les éléments de la souris en dehors de la boîte de dialogue.

Lors de la fermeture de la boîte de dialogue, l'accent retourne automatiquement à la boîte de dialogue précédente ouvre sur l'orientation de l'élément.

Masquer le bouton de fermeture

Dans certains cas, vous voudrez peut-être pour cacher le bouton de fermeture, par exemple, un panneau de bouton a un bouton pour fermer le cas. La meilleure solution est par CSS. A titre d'exemple, vous pouvez définir une règle simple, tels que: 

.no-close .ui-dialogue-titlebar-close {
  display: none;
}

Ensuite, vous pouvez ajouter no-close , classe à la boîte de dialogue arbitraire, utilisé pour cacher le bouton de fermeture: 

$ ( "#dialog") .dialog ({
  dialogClass: «non-close",
  boutons: [
    {
      texte: "OK",
      cliquez sur: function () {
        $ (Ce) .dialog ( "close");
      }
    }
  ]
});

theming

composants de dialogue (Dialog Widget) en utilisant le cadre UI CSS jQuery pour définir l'aspect et la convivialité de son style. Si vous avez besoin d'utiliser la boîte de dialogue pour spécifier le style, vous pouvez utiliser le nom de la classe CSS suivante:

  • ui-dialog : conteneur extérieur dialogue.
    • ui-dialog-titlebar : boîte de dialogue contient le titre et le bouton de fermeture de la barre de titre.
      • ui-dialog-title : le texte du titre de dialogue autour du récipient.
      • ui-dialog-titlebar-close : le bouton pour fermer la boîte de dialogue.
    • ui-dialog-content : contenu de dialogue autour du récipient. Cela fait également partie de l'élément est instancié.
    • ui-dialog-buttonpane : contient panneau de boutons de dialogue. Seulement lorsque le nombre de buttons lorsque les choix sont présentés.
      • ui-dialog-buttonset : boutons autour du conteneur.

En outre, lorsqu'il est réglé modal options de temps, avec un ui-widget-overlay nom de la classe de l' élément est ajouté à la balise <body> .

Fiez

informations complémentaires

  • La partie exige une certaine CSS fonctionnelle, sinon cela ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS widget spécifié comme un point de départ.

Exemples

Une simple jQuery UI Dialog (Dialogue). 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> Composants de dialogue (Dialog Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Bouton id = "Ouvre"> boîte de dialogue Ouvrir </ button>
<Div id = "dialogue" title = "dialogue Titre"> Je suis une boîte de dialogue </ div>
 
<Script>
$ ( "#dialog") .dialog ({AutoOpen: false});
$ ( "#opener") .cliquez (Function () {
  $ ( "#dialog") .dialog ( "Open");
});
</ Script>
 
</ Body>
</ Html>

la