Comment créer une boîte de dialogue personnalisée à Ajax pour HTML5 et CSS3 programmation

AJAX permet de HTML5 et CSS3 programmeurs de faire des boîtes de dialogue personnalisées. javascript fournit quelques boîtes de dialogue (l'alerte et de boîtes de dialogue d'invite), mais ceux-ci sont assez laid et relativement inflexible. Le jQuery UI comprend une technique pour transformer toute div dans une boîte de dialogue virtuel. La boîte de dialogue suit le thème et est redimensionnable et mobile.

image0.jpg

Construire la boîte de dialogue est pas difficile, mais vous devez être capable de tourner sur et en dehors avec le code, ou ne sera pas agir comme une boîte de dialogue appropriée (qui imite une fenêtre dans le système d'exploitation):

  1. Créez le div vous avez l'intention d'utiliser comme une boîte de dialogue.

    Créer un div et de lui donner une pièce d'identité de sorte que vous pouvez le transformer en un nœud de boîte de dialogue. Ajouter le titre attribut, et le titre apparaît dans la barre de titre de la boîte de dialogue.

    La classe de dialogue vous permet d'avoir, une boîte de dialogue sizablecustomized mobile compatible avec le thème de installedpage.

  2. Tournez la div dans une boîte de dialogue.




    Utilisez le dialogue () méthode pour tourner la div dans un nœud de boîte de dialogue dans le jQuery init () fonction:

     $ ("# dialogue") dialogue (). -
  3. Cacher la boîte de dialogue par défaut.

    Habituellement, vous ne voulez pas la boîte de dialogue visible jusqu'à une sorte d'événement se produit. Dans cet exemple particulier, vous voudrez peut-être pas la boîte de dialogue d'apparaître jusqu'à ce que l'utilisateur clique sur un bouton. Vous pouvez mettre un peu de code pour fermer la boîte de dialogue dans le init () fonction de sorte que la boîte de dialogue ne sera pas apparaître jusqu'à ce qu'il soit convoqué.

  4. Fermez la boîte de dialogue.

    Pour fermer une boîte de dialogue, reportez-vous au nœud de boîte de dialogue et appeler le dialogue () méthode sur elle à nouveau. Cette fois, envoyer la valeur unique N ° 147, à proximité ” comme paramètre, et la boîte de dialogue à proximité immédiate:

     // initialement proche de dialogue $ ("# dialogue") de dialogue ("close"). -
  5. En cliquant sur le X se ferme automatiquement la boîte de dialogue.

    La boîte de dialogue a un petit X qui ressemble à la fenêtre icône Fermer sur la plupart des systèmes de fenêtrage. L'utilisateur peut fermer la boîte de dialogue en cliquant sur cette icône.

  6. Vous pouvez ouvrir et fermer la boîte de dialogue avec le code.

    Mon dialogue Ouvrir et fermer les boutons de dialogue appellent des fonctions qui contrôlent le comportement de la boîte de dialogue. Par exemple, voici la fonction attachée à la touche de dialogue Ouvrir:

     openDialog fonction () {$ ("# dialogue") de dialogue («ouvert») -.} // fin openDialog


» » » » Comment créer une boîte de dialogue personnalisée à Ajax pour HTML5 et CSS3 programmation