février 5, 2021

dialogue avec jQuery

contenu

  • 1 le code HTML
  • 2 Le code JavaScript
  • 3 autres options

avec jQuery Nous pouvons effectuer des fenêtres de dialogue ouvertes en appuyant sur un bouton, qui peut être glissé, redimensionnez et Ils ont leur bouton de fermeture dans le coin supérieur droit.

Le code HTML

Nous faisons d’abord le code HTML sur notre page. Quel sera le dialogue n’est rien de plus qu’un < div > à l’intérieur de la page. Nous pouvons le mettre n’importe où, car il ira caché et quand il sera affiché « float » sur le reste de la page.

<!doctype html><html> <head> <meta charset="utf-8"> <title>Demo</title> <link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> </head> <body> <div title="titulo"> <p>soy un dialogo</p> </div> <button>Abrir</button> <button>Cerrar</button> </body></html>

Nous avons mis sur la tête la feuille de style et la jQuery nécessaire. Le sujet du CSS est important pour le dialogue de ressembler à un dialogue. Vous pouvez vous télécharger sur place ou vous pouvez facilement faire votre propre sujet avec le thème de l’application Web.

Nous avons également mis la DIV qui sera le dialogue et une paire de boutons qui nous serviront Pour ouvrir et fermer le dialogue.

Le code JavaScript

Nous ne pouvons que donner une fonctionnalité informatique à l’aide des fonctions JavaScript / JQuery. Pour cela, nous mettons entre balises < script >, après le < Corps > par exemple

<body> <script> $(document).ready(function() { $("#dialogo").dialog({autoOpen:false}); $("#abrir").click(function(event) { // $("#dialogo").dialog('option','position',); $("#dialogo").dialog('open'); }); $("#cerrar").click(function() { $("#dialogo").dialog('close'); }); }); </script> ...

Nous disons simplement que lorsque le document est chargé, laissez le suivant:

  • $ (« # dialogue »). dialogue ({autoten: faux}); À l’élément avec (notre DIV), nous devons dialoguer (appel de dialogue appelant ()). En tant que paramètre, nous avons passé un {Selfopen: False} de sorte que la boîte de dialogue soit cachée jusqu’à ce que nous le visualisions d’une manière ou d’une autre. Si nous ne faisons pas ce dernier, la boîte de dialogue sera visible du début.
  • $ (« Open »). Cliquez sur (Fonction (Evénement) {à l’ID = Ouvrir le bouton, nous mettrons une fonction qui va Soyez exécuté lorsque vous cliquez dessus. Cette fonction affichera la boîte de dialogue $ («# dialogue»). Boîte de dialogue (‘Open’);
  • Nous avons été commentés // $ (« # Dialogue »). Dialogue (« option », « position »,); si nous décomentons, la boîte de dialogue s’affiche dans la position dans laquelle elle est cliquée avec la souris, c’est-à-dire sur le bouton. Sinon, il apparaîtra centrée.
  • $ (« #close »). Cliquez sur (Fonction () {à la touche ID = Fermer Nous mettons une fonction qui sera exécutée lorsque vous cliquez sur le bouton. Cette fonction fermera la boîte de dialogue $ ( » # Dialogue « ). Dialogue ( » ferme « );

Plus d’options

jQuery Les dialogues ont beaucoup plus d’options. Nous Peut ajouter des boutons comme « Accepter », « Annuler » ou ce que nous voulons, permettez-la ou ne faites pas glisser, redimensionner, définir des tailles, rendre visualisation ou masquer, etc., etc. NES TOUTES LES OPTIONS http://docs.jquery.com/UI/Dialog

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *