Nous allons voir comment créer une boîte de dialogue basique avec la bibliothèque jQuery UI. Nombreux d’entre vous on dû se rendre compte qu’avec l’exemple donné sur le site de jQuery UI, la boîte de dialogue ne s’affiche qu’une seule fois.

Tout d’abord, il faut télécharger la librairie avec le thème qui vous convient par ici.

On insère les librairies dans le <head></head> :

?View Code JAVASCRIPT
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

On initialise la boîte de dialogue :

?View Code JAVASCRIPT
var maBoiteDeDialogue = $('#dialog') .html('<p>Ma boîte de dialogue</p>')
                                                          .dialog({ autoOpen: false, title: "dialog", width: 460 });
 
$('#open').click(function() { maBoiteDeDialogue.dialog('open'); });

Ensuite, il manque plus qu’un élément pour déclencher la boîte de dialogue (un lien hypertexte par exemple) :

<a id="open">Ouvrir la boîte de dialogue</a>

Commentaires


huit − = 2