Y a-t-il une boîte de dialogue dans jquery ?

Il existe une boîte de dialogue dans jquery ; la boîte de dialogue est un composant d'interface utilisateur de la bibliothèque jQuery UI. L'avantage de l'utilisation de ce composant est que vous n'avez pas besoin d'actualiser la page Web. Vous pouvez directement afficher une couche div pour permettre aux utilisateurs de le faire. informations d'entrée.Lors de l'utilisation de ce composant, vous devez non seulement introduire jquery, mais également introduire les fichiers js et css associés de jQueryUI.

L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.2.1, ordinateur Dell G3.

Y a-t-il une boîte de dialogue dans jquery ?

Dialog est un composant d'interface utilisateur de la bibliothèque jQuery UI, donc lorsque vous utilisez la boîte de dialogue, vous devez non seulement introduire jQuery.js (car il ne s'agit que d'un framework de base léger), mais également besoin d'introduire les js et js de jQueryUI. Fichiers CSS associés

L'avantage de l'utilisation de la boîte de dialogue est qu'il n'est pas nécessaire d'actualiser la page Web et qu'une couche div apparaît directement pour permettre à l'utilisateur de saisir des informations. Il est également plus pratique à utiliser.

jquery ui-dialog est encore largement utilisé dans le développement Web. L'exemple le plus courant est l'implémentation de la fonction de connexion.

L'exemple est le suivant :

L'implémentation la plus simple consiste à configurer une boîte de dialogue dans la méthode ready de jquery. Tels que :

 $("#dialogDiv").dialog();

Mais cela ne répond pas à nos exigences, nous devons donc comprendre ses propriétés et méthodes communes. C'est la configuration dans ma démo. Comme suit :

$("#dialogDiv").dialog({
autoOpen : false,   // 是否自动弹出窗口
modal : true,    // 设置为模态对话框
resizable : true,
width : 410,   //弹出框宽度
height : 240,   //弹出框高度
title : "用户登录",  //弹出框标题
position : "center",  //窗口显示的位置
buttons:{
'确定':function(){
//调用登录的方法
},
'取消':function(){
$(this).dialog("close");
}
}
});

Remarque : "dialogDiv" représente l'identifiant de l'élément.

Attributs communs

autoOpen : Lorsque cet attribut est vrai, la fenêtre de dialogue s'ouvrira automatiquement lors de l'appel de la boîte de dialogue. Lorsque l'attribut est faux, la fenêtre est initialement masquée et la fenêtre de dialogue apparaît lorsque dialog("open") est appelé. Par défaut : vrai.

position : la position d'affichage de la boîte de dialogue : elle peut être 'centre', 'gauche', 'droite', 'haut', 'bas', elle peut également être le décalage du haut et de la gauche, ou elle peut être un tableau de chaînes tel que [ 'right', 'top'].

title : Le titre de la boîte de dialogue, vide par défaut.

modal : s'il faut utiliser une fenêtre modale. Une fois la fenêtre modale ouverte, les autres éléments de la page ne seront pas cliquables tant que la fenêtre modale n'est pas fermée. La valeur par défaut est false pour ne pas modaler la fenêtre.

closeOnEscape : lorsque vrai, cliquez sur la touche ESC du clavier pour fermer la boîte de dialogue. La valeur par défaut est true.

draggable : Indique si le draggable peut utiliser l'en-tête du titre pour le glisser. La valeur par défaut est vraie et le glisser est possible.

resizing : le redimensionnement peut modifier la taille de la boîte de dialogue. La valeur par défaut est vraie et la taille peut être modifiée.

Méthodes courantes

open : Ouvrez la boîte de dialogue avec une phrase $("#id").dialog("open").

close : Fermez la boîte de dialogue, une phrase $("#id").dialog("close").

disable : définissez la boîte de dialogue pour qu'elle soit désactivée.

activer : définissez la boîte de dialogue pour qu'elle soit disponible.

isOpen : détermine si la boîte de dialogue est ouverte. Si elle est ouverte, renvoie true.

destroy : Détruisez la boîte de dialogue.

moveToTop : déplacez la boîte de dialogue vers le haut.

option : utilisé pour définir et supprimer la valeur de la boîte de dialogue. Par exemple, nous définissons le titre de la boîte de dialogue : $("#dialogDiv").dialog("option", "title", "login").

Regardez la mienne Démo, appelez simplement la méthode open. Vous pouvez essayer d'autres méthodes vous-même. Pour plus d'attributs et de méthodes, veuillez vous rendre sur le site officiel pour voir l'API, adresse : http://api.jqueryui.com/dialog/. Ceci est ma page de connexion. Méthode d'appel :

 $("#dialogDiv").dialog("open");

L'effet est comme indiqué :

Voici le code de la page, comme suit :

La page est très épurée, le style peut être personnalisé par vous-même. Dialog est simple et pratique à utiliser et est recommandé à tout le monde.

Tutoriels vidéo associés recommandés : Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!