exemple jQuery UI - Dialog (Dialogue)

Précédent: exemple jQuery UI - le sélecteur de date (Datepicker)

Suivant: jQuery UI par exemple - menu (Menu)

contenu Ouvrir dans une superposition interactif.

Pour plus de détails sur les composants de dialogue, consultez la documentation de l' API de dialogue des composants (boîte de dialogue Widget) .

La fonction par défaut

La fenêtre de dialogue de base est positionné dans une zone d'observation dans la couche de couverture, par une teneur en iframe et page séparée (comme sélectionner des éléments). Il se compose d'une barre de titre et une composition de zone de contenu, et peut être déplacé, redimensionné, par défaut en 'x' icône pour fermer.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI Dialog (Dialogue) - La fonction par défaut </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#dialog") .dialog ();
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "dialogue" title = "dialogue de base»>
  <P> Ceci est la boîte de dialogue par défaut pour l'affichage des informations. La fenêtre de dialogue peut être déplacé, redimensionné, par défaut en 'x' icône pour fermer. </ P>
</ Div>
 
 
</ Body>
</ Html>

animation

Vous pouvez spécifier d'effets spéciaux afficher / cacher la propriété d'animation pour afficher la boîte de dialogue. Vous devez vous référer à un fichier séparé pour l'effet que vous souhaitez utiliser des effets spéciaux.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI Dialog (Dialogue) - Anime </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#dialog") .dialog ({
      AutoOpen: false,
      show: {
        effet: «aveugle»,
        durée: 1000
      },
      cacher: {
        effet: «exploser»,
        durée: 1000
      }
    });
 
    $ ( "#opener") .cliquez (Function () {
      $ ( "#dialog") .dialog ( "Open");
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "dialogue" title = "dialogue Basic">
  <P> Ceci est un affichage animé de la boîte de dialogue, pour afficher des informations. La fenêtre de dialogue peut être déplacé, redimensionné, par défaut en 'x' icône pour fermer. </ P>
</ Div>
 
<Bouton id = "Ouvre"> boîte de dialogue Ouvrir </ button>
 
 
</ Body>
</ Html>

Le mode de base

Modal reste de dialogue de la page pour empêcher les utilisateurs en dehors de la boîte de dialogue pour interagir jusqu'à ce que la boîte de dialogue est fermée.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI Dialog (Dialogue) - modal base </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "# Dialog-modal") .dialog ({
      hauteur: 140,
      modal: true
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "dialog-modal" title = "boîtes de dialogue modales de base">
  <P> Add-modal écran de superposition, faire le look de dialogue plus important car il obscurcit laisser d'autres contenus sur la page. </ P>
</ Div>
 
<P> Sed vel diam id libero <a href="http://www.w3cschool.cc"> rutrum convallis </a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros un lectus. </ p>
 
 
</ Body>
</ Html>

confirmation Modal

Confirmer une action destructrice peut être aussi le sens possible. Réglage modal option pour vrai, et par buttons pour assigner primaires et secondaires utilisateur actions options.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI Dialog (Dialogue) - confirmation modale </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "Dialog-confirmation #") .dialog ({
      redimensionnable: false,
      hauteur: 140,
      modal: true,
      boutons: {
        "Supprimer tous les éléments": function () {
          $ (Ce) .dialog ( "close");
        },
        Annuler: function () {
          $ (Ce) .dialog ( "close");
        }
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "dialog-confirmation" title = "Vider la corbeille?">
  <P> <span class = "ui-icon ui-icon-alerte" style = "float: left; margin: 0 7px 20px 0;"> </ span> Ces éléments seront définitivement supprimés et ne peuvent pas être récupérés. Etes-vous sûr? </ P>
</ Div>
 
<P> Sed vel diam id libero <a href="http://www.w3cschool.cc"> rutrum convallis </a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros un lectus. </ p>
 
 
</ Body>
</ Html>

Formulaire Modal

boîte de dialogue Modal pour demander à l'utilisateur d'entrer des données dans un processus en plusieurs étapes. Intégré dans le contenu sous forme de zone tag définir modal option pour vrai, et par buttons pour assigner primaires et secondaires utilisateur actions options.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI Dialog (Dialogue) - Modal Forms </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
    body {font-size: 62,5%;}
    étiquette, entrée {display: block;}
    input.text {margin-bottom: 12px; largeur: 95%; padding: .4em;}
    fieldset {padding: 0; border: 0; margin-top: 25px;}
    h1 {font-size: 1.2em; margin: .6em 0;}
    div # utilisateurs contiennent {width: 350px; margin: 20px 0;}
    div # utilisateurs contiennent table {margin: 1em 0; border-collapse: collapse; width: 100%;}
    div # utilisateurs contiennent la table td, div # tableau th utilisateurs contiennent {border: 1px solid #EEE; padding: 10px .6em; text-align: left;}
    .ui-dialogue .ui-état-erreur {padding: .3em;}
    .validateTips {border: 1px solid transparent; padding: 0.3em;}
  </ Style>
  <Script>
  $ (Function () {
    var name = $ ( "#name"),
      email = $ ( "#email"),
      password = $ ( "#Password"),
      Tous champs = $ ([]) .add (nom) .add (e-mail) .add (mot de passe),
      conseils = $ ( ".validateTips");
 
    updateTips de fonction (t) {
      conseils
        .text (t)
        .addClass ( "ui-state-highlight");
      setTimeout (function () {
        tips.removeClass ( "ui-state-highlight", 1500);
      }, 500);
    }
 
    checkLength fonction (o, n, min, max) {
      if (o.val (). length> max || o.val (). length <min) {
        o.addClass ( "ui-état-erreur");
        updateTips ( "" + n + "doit être sous" +
          min + "entre". "et" + max +);
        return false;
      } Else {
        return true;
      }
    }
 
    fonction checkRegexp (o, regexp, n) {
      if (! (RegExp.test (o.val ()))) {
        o.addClass ( "ui-état-erreur");
        updateTips (n);
        return false;
      } Else {
        return true;
      }
    }
 
    $ ( "Dialog-forme #") .dialog ({
      AutoOpen: false,
      hauteur: 300,
      largeur: 350,
      modal: true,
      boutons: {
        "Créer un compte": function () {
          var bValid = true;
          allFields.removeClass ( "ui-état-erreur");
 
          bValid = bValid && checkLength (nom, "username", 3, 16);
          bValid = bValid && checkLength (email, "email", 6, 80);
          bValid = bValid && checkLength (mot de passe, "password", 5, 16);
 
          bValid = bValid && checkRegexp (nom, / ^ [az] ([0-9a-z _]) + $ / i », le nom d'utilisateur doit être az, 0-9, soulignement, et doit commencer par une lettre.");
          // De jquery.validate.js (par joern), ont contribué par Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
          bValid = bValid && checkRegexp (email, / ^ ((([az] | \ d | [# \ $% & '\ * \ + \ - \ / = \ \ ^ _ `{\ |} ~ !?] | . [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) + (\ ([az] | \ d | [# \ $% & '\ * \ + \ - \ / = \ \!? ^ _` {\ |} ~] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) +) *) | ((\ x22) ((((\ x20 | \ x09) * ( \ x0d \ x0a)) (\ x20 |? \ x09) +) (([\ x01- \ x08 \ X0B \ x0c \ x0e- \ x1f \ x7f] |? \ x21 | [\ x23- \ X5b] | [ \ x5d- \ x7E] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (\\ ([\ x01- \ x09 \ X0B \ x0c \ x0d- \ x7f] | [\ u00A0 ? - \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF])))) * (((\ x20 | \ x09) * (\ x0d \ x0a)) (\ x20 | \ x09) +) (\ x22? ))) @ ((([az] | \ d | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (([az] | \ d | [\ u00A0- \ uD7FF \ uF900 - \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ d | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] | \ d | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \) + (([az] |. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF ]) | (([az] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ d | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] |.?. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) $ \ / i, "par exemple ui @ jquery.com ");
          bValid = bValid && checkRegexp (mot de passe, / ^ ([0-9a-zA-Z]) + $ /, "champ de mot de passe uniquement autorisés: az 0-9");
 
          if (bValid) {
            $ ( "Le nombre d'utilisateurs tbody") .append ( "<tr>" +
              "<Td>" + name.val () + "</ td>" +
              "<Td>" + email.val () + "</ td>" +
              "<Td>" + password.val () + "</ td>" +
            "</ Tr>");
            $ (Ce) .dialog ( "close");
          }
        },
        Annuler: function () {
          $ (Ce) .dialog ( "close");
        }
      },
      à proximité: function () {
        allFields.val ( "") .removeClass ( "ui-état-erreur");
      }
    });
 
    $ ( "# Créer utilisateur")
      .button ()
      .cliquez (function () {
        $ ( "# Dialog-forme") .dialog ( «ouvert»);
      });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "dialog-forme" title = "Créer un nouvel utilisateur">
  <P class = "validateTips"> tous les champs du formulaire sont nécessaires. </ P>
 
  <Form>
  <Fieldset>
    <Label for = "nom"> nom </ label>
    <Input type = "text" name = "name" id = "nom" class = "text ui-widget-content ui-coin-all">
    <Label for = "email"> boîte aux lettres </ label>
    <Input type = "text" name = "email" id = valeur "e-mail" = "" class = "text ui-widget-content ui-coin-all">
    <Label for = "password"> Mot de passe </ label>
    <Input type = name = id = valeur "mot de passe" "mot de passe" "mot de passe" = "" class = "text ui-widget-content ui-coin-all">
  </ Fieldset>
  </ Form>
</ Div>
 
 
<Div id = "utilisateurs contiennent" class = "ui-widget">
  <H1> utilisateur existant: </ h1>
  <Table id = "utilisateurs" class = "ui-widget ui-widget-content">
    <Thead>
      <Class = Tr "ui-widget-tête">
        <Th> Nom </ th>
        <Th> boîte aux lettres </ th>
        <Th> password </ th>
      </ Tr>
    </ Thead>
    <TBODY>
      <Tr>
        <Td> John Doe </ td>
        <Td> [email protected] </ td>
        <Td> johndoe1 </ td>
      </ Tr>
    </ Tbody>
  </ Table>
</ Div>
<Bouton id = "create-user"> Créer un nouvel utilisateur </ button>
 
 
</ Body>
</ Html>

un message Modal

boîte de dialogue Modal pour confirmer l'information et de l'action avant l'action suivante est exécutée. Réglage modal option pour vrai, et par les buttons pour spécifier les principales options d'action (Ok).

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI Dialog (Dialogue) - un message modal </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "Dialog-message #") .dialog ({
      modal: true,
      boutons: {
        Ok: function () {
          $ (Ce) .dialog ( "close");
        }
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "dialogue message" title = "télécharger complète">
  <P>
    <Span class = "ui-icon ui-icon-circle-vérifier" style = "float: left; margin: 0 7px 50px 0;"> </ span>
    Votre fichier a été téléchargé avec succès dans le dossier.
  </ P>
  <P>
    L'utilisation actuelle de l'espace de stockage <b> 36% </ b>.
  </ P>
</ Div>
 
<P> Sed vel diam id libero <a href="http://www.w3cschool.cc"> rutrum convallis </a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros un lectus. </ p>
 
 
</ Body>
</ Html>

Précédent: exemple jQuery UI - le sélecteur de date (Datepicker)

Suivant: jQuery UI par exemple - menu (Menu)

jQuery UI cours

jQuery UI thème

jQuery UI Bibliothèque de composants

jQuery UI Manuel de référence