Assurez-vous que le curseur se trouve à l'endroit sur la page où vous voulez insérer le widget.
Dernière mise à jour le
30 avr. 2026
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 d'interface utilisateur jQuery (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/
Annotation
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.
Choisissez Insérer > Interface utilisateur jQuery, puis choisissez le widget que vous souhaitez insérer.
Si vous utilisez le panneau Insertion, les widgets sont présents dans la section Interface utilisateur jQuery 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 En direct ou dans un navigateur qui prend en charge les widgets jQuery.
Modification de widgets jQuery
Sélectionnez le widget à modifier.
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 et cliquez sur + dans le panneau Propriétés.
Insertion de widgets jQuery Mobile
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.
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.
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.
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.
Annotation
Pour un affichage sur de petits écrans mobiles, pensez à rédiger un texte court et à insérer des images de petite taille.
Selon les besoins, ajoutez d’autres widgets jQuery Mobile.
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.
Enregistrez la page jQuery Mobile et tous les fichiers associés.
Les thèmes jQuery Mobile ne s’appliquent pas avec les versions plus récentes de jQuery
Problème
Les thèmes jQuery Mobile, y compris les échantillons et panneaux, ne s’appliquent pas lors de l’utilisation de versions plus récentes de jQuery, telles que jQuery 3.7.1. Par conséquent, les thèmes jQuery peuvent ne pas générer le rendu correctement ou se comporter comme prévu.
Cause
jQuery Mobile a été déprécié et n’est plus activement maintenu. Il ne prend pas en charge les versions jQuery 3.x, ce qui entraîne des problèmes de compatibilité avec les versions plus récentes.
Résolution/solution
Pour continuer à utiliser les fonctionnalités jQuery Mobile (thèmes, échantillons et panneaux), utilisez une version compatible et plus ancienne de jQuery.
Version recommandée : jQuery 1.11.1 (ou autres versions 1.x prises en charge)
Exemple
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
Ajoutez une version jQuery prise en charge. Par exemple, 1.11.1.
Assurez-vous que la bibliothèque jQuery Mobile est chargée après le script jQuery.
Chargez à nouveau la page et vérifiez que les thèmes, le nuancier et les panneaux s’affichent correctement.
Annotation
Étant donné que jQuery Mobile est déprécié et n’est plus mis à jour, continuez à utiliser une version jQuery hérité compatible pour les projets jQuery Mobile existants.
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
