Construire une message box avec jQuery
Bonjour, dans cet article nous allons voir comment construire son propre objet de message box avec jQuery et jQuery-UI.
Vous pouvez vous procurer jQuery sur son site officiel, tout comme jQuery UI. L’ UI permet d’utiliser la bibliothèque javascript pour créer différents effets, animations, et d’intégrer quelques widgets.
Pour faire apparaitre notre message, nous appellerons notre message box de cette manière:
messageBox.show('titre', 'message');
Preparons le div qui va être transformé dans notre page html:
<div id="messagebox"></div>
Ensuite construisons notre objet:
var messageBox = {
modal: true,
resizable: true,
init: function(){
$('#messagebox').dialog({ autoOpen: false, resizable: messageBox.resizable, modal: messageBox.modal});
},
show: function(title, message){
$('#messagebox').dialog('option', 'title', title).html(message).dialog('option', 'buttons', { "Ok": function(){$('#messagebox').dialog('close');}}).dialog('open');
}
};
Notez: vous pouvez rendre la box modale ou non en changeant simplement les attributs à false ou à true au début de la déclaration de l’objet.
Ensuite, il nous faut initialiser notre message box. Pour ce faire, ajouter ceci dans votre balise <script> à la fin de votre <head>:
messageBox.init();
Pour appeler notre messageBox, il ne nous reste plus alors qu’à faire:
messageBox.show('Mon beau titre', 'Un super message qui va plaire à l'utilisateur !');
pourquoi pas:)
j aime pas du tout le systeme de messagebox de jquery ui, bcp mais alors bcp trop complexe pour rien.
la plupart des api de gui meme en c++ (qt, mfc) permettent de faire ca en une ligne mais avec jqui il te faut faire un div , mettre 5 lignes de js et un appel
tres lourd
On peut égallement le faire en une ligne, avec
$(« #selector »).html(« message »).dialog(‘open’);
mais l’idée ici c’était d’avoir un système un peu plus personnalisable en faisant un appel plus court