jquery.msgBox.js est une API basée sur JQuery qui permet l'affichage de messages ainsi que de boites de dialogue.
Le pré-requis étant l'utilisation de JQuery.
Dans un premier temps, déclarons JQuery et jquery.msgBox.js :
<link rel="stylesheet" type="text/css"
href="css/jquery-ui-x.x.x.custom.css" />
<script type="text/javascript" src="js/jquery-x.x.x.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-x.x.x.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.msgBox.js"></script>
"x" représente la version de JQuery.
Exemple 1 : affichage d'un message simple
$.msgBox({
title: "Message",
content: "votre message",
type: "info",
showButtons: false,
opacity: 0.1,
timeOut: 3000,
autoClose:true
});
setTimeout(function(){ suite(); }, 3000);
Ce type de message s'affiche pendant quelques secondes (dans notre exemple 3 secondes) puis disparaît.
Plusieurs types de message existe (pour cet exemple c'est un message de type "info").
A noter l'utilisation de la fonction Javascript setTimeout() pour continuer le traitement après affichage du message.
Exemple 2 : affichage d'une boite de dialogue de confirmation
$.msgBox({
title: "Confirmation",
content: "message de confirmation",
type: "confirm",
buttons: [{ value: "Oui" }, { value: "Annuler"}],
success: function (result) {
if (result == "Oui")
suite();
}
});
Une action de la part de l'utilisateur est requise.
Exemple 3 : affichage d'une boite de dialogue avec saisie informations
function message() {
$.msgBox({
type: "prompt",
title: "Saisie des Informations",
inputs: [
{ header: "Votre Nom", type: "text", name: "nom" },
{ header: "Votre prénom", type: "text", name: "prenom" }],
buttons: [
{ value: "Valider" }, {value:"Annuler"}],
success: function (result, values) {
if (result == "Valider") {
var nom = "";
var prenom = "";
$(values).each(function (index, input) {
if (input.name == "nom")
nom = input.value ;
if (input.name == "prenom")
prenom = input.value ;
});
if (nom == "" || prenom == "")
{
$.msgBox({
title: "Message",
content: "Vous devez saisir toutes les informations !",
type: "error",
showButtons: false,
opacity: 0.1,
timeOut: 3000,
autoClose:true
});
setTimeout(function(){ message(); }, 3000);
}
else {
mon_traitement();
}
}
}
});
}
Vous noterez l'astuce dans le cas où les informations n'ont pas été saisies.
Aucun commentaire:
Enregistrer un commentaire