Découvrez comment ajouter une fonctionnalité de type application à vos projets web Dreamweaver à l’aide de widgets jQuery UI et Mobile. Insérez des accordéons, onglets, curseurs et zones de saisie automatique sans écrire de code.

Les widgets sont de petites applications web écrites dans des langages comme DHTML et JavaScript et qui peuvent être insérés et exécutés dans une page web. Les widgets web fournissent notamment un moyen d’imiter une expérience d’ordinateur de bureau sur une page web.

Les widgets jQuery UI (par exemple, accordéon, onglets, sélecteur de date, glissière et saisie automatique) offrent une expérience d’ordinateur de bureau sur le web.

Par exemple, le widget Onglets peut être utilisé pour répliquer la fonctionnalité d’onglet des boîtes de dialogue d’applications de bureau.

Dreamweaver comprend également un ensemble de widgets jQuery Mobile que vous pouvez utiliser pour créer des éléments de formulaire et d’autres fonctions couramment utilisées dans des applications web mobiles. Vous pouvez, par exemple, utiliser le widget jQuery Mobile pour ajouter des éléments de formulaire adaptés aux périphériques mobiles, tels que des zones de texte et des cases à cocher.

Insertion d’un widget jQuery

Lorsque vous insérez un widget jQuery, les éléments suivants sont automatiquement ajoutés au code :

  • Références à tous les fichiers dépendants.
  • Balise de script contenant l’API jQuery pour le widget. Les widgets supplémentaires sont ajoutés à la même balise de script.

Pour plus d’informations sur les widgets jQuery, consultez la page http://jqueryui.com/demos/.

Remarque :

pour les effets jQuery, aucune référence externe à jquery-1.8.24.min.js n’est ajoutée, car ce fichier est automatiquement inclus lorsque vous ajoutez un effet.

  1. Assurez-vous que le curseur se trouve à l’endroit sur la page où vous souhaitez insérer le widget.

  2. Choisissez Insérer > jQuery UI, puis sélectionnez le widget à insérer.

    Si vous utilisez le panneau Insertion, les widgets sont présents dans la section jQuery UI du panneau Insertion.

Lorsque vous sélectionnez un widget jQuery, ses propriétés s’affichent dans le panneau Propriétés.

Vous pouvez prévisualiser les widgets jQuery dans le mode Affichage en direct ou dans un navigateur qui prend en charge les widgets jQuery.

Modification de widgets jQuery

  1. Sélectionnez le widget à modifier.

  2. Dans le panneau Propriétés, modifiez les propriétés.

    Par exemple, pour ajouter un onglet supplémentaire au widget Onglets, sélectionnez le widget, puis cliquez sur + dans le panneau Propriétés.

Insertion de widgets jQuery Mobile

  1. Avant de pouvoir utiliser des widgets jQuery Mobile, vous devez d’abord définir une page jQuery Mobile en sélectionnant la commande Insertion > jQuery Mobile > Page.

    La boîte de dialogue Fichiers jQuery Mobile s’ouvre.

    Boîte de dialogue Fichiers jQuery Mobile
    Boîte de dialogue Fichiers jQuery Mobile

  2. Modifiez les paramètres par défaut de la boîte de dialogue Fichiers jQuery Mobile ou laissez-les définis sur les chemins d’accès par défaut, puis cliquez sur OK.

  3. Dans la boîte de dialogue de page qui s’ouvre, entrez un nom dans le champ ID, puis sélectionnez ou désélectionnez les cases à cocher des zones d’en-tête et de pied de page selon que vous souhaitez des sections correspondantes dans votre page mobile.

    Boîte de dialogue de page
    Boîte de dialogue de page

  4. Dans la page qui s’ouvre dans Dreamweaver, remplacez le texte d’en-tête, de contenu et de pied de page par le texte, les images et autres éléments souhaités dans votre page mobile.

    Remarque :

    Pour un affichage sur de petits écrans mobiles, pensez à rédiger un texte court et à insérer des images de petite taille.

  5. Selon les besoins, ajoutez d’autres widgets jQuery Mobile.

  6. Affichez un aperçu de la page sur un appareil.

    Pour plus d’informations, consultez la section Aperçu de pages web Dreamweaver sur plusieurs appareils.

  7. Enregistrez la page jQuery Mobile et tous les fichiers associés.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne