Ajout de jQuery à un thème

La bibliothèque jQuery est une bibliothèque JavaScript. HCL Digital Experience Portal includes a jQuery module for the jQuery core so you can use jQuery in a theme.

Pourquoi et quand exécuter cette tâche

Ce module Query n'est pas activé par défaut. jQuery est un framework ouvert et n'est pas pris en charge par HCL. Le module accélère et facilite l'utilisation de jQuery et tous ses plug-ins dans un thème.

Procédure

Pour activer jQuery, copiez le fichier de définition de module jquery1.10.2.json dans le dossier de contributions de votre thème dans WebDAV fs-type1. Ce fichier jquery1.10.2.json se trouve dans PortalServer\theme\wp.theme.jquery\installedApps\wp.theme.jquery.ear\wp.theme.jquery.war\v1.10.2.
Facultatif : Pour activer les plug-ins avec jQuery de base, téléchargez le plug-in jQuery à partir du site Web de jQuery. Pour plus d'informations, consultez la rubrique Téléchargement du plug-in jQuery dans les liens connexes. Dans cet exemple, utilisez le plug-in PowerTip. Fichier jquery.powertip-1.2.0.zip. Pour télécharger le plug-in, consultez Téléchargement du plug-in jQuery PowerTip dans les liens connexes.
1. Extrayez le contenu de votre fichier de plug-in à n'importe quel emplacement.
2. Créez un sous-dossier dans le dossier de modules de votre thème pour le plug-in, par exemple jquery_powertip dans ce cas.
3. Le plug-in PowerTip comprend deux fichiers qui doivent être des contributions Head de votre module ; vous devez donc créer un sous-dossier Head dans votre dossier jquery_powertip.
4. Copiez les fichiers de ressources nécessaires de l'emplacement du plug-in extrait vers votre dossier Head. Les fichiers de ressources nécessaires dans ce cas sont les suivants :
```
jquery.powertip.min.js
jquery.powertip.js
jquery.powertip.min.css
jquery.powertip.css
```
5. Copiez l'édition et la version des fichiers. L'édition est utilisée automatiquement par défaut pour les performances et la version est utilisée automatiquement lorsque le mode de débogage est activé.
6. Cet exemple utilise le schéma de couleurs par défaut pour les infobulles. Mais, PowerTip est fourni avec plusieurs schémas de couleurs tels qu'ils sont définis dans des fichiers css distincts dans ce dossier CSS. Vous pouvez sélectionner un autre schéma de couleurs ou créer le vôtre en plaçant les différents fichiers css dans le dossier Head.
  Par exemple, pour obtenir le schéma de couleurs claires, vous pouvez copier les fichiers css dans le dossier Head.
```
jquery.powertip-light.min.css
jquery.powertip-light.css
```
7. Votre module jquery_powertip prereqs le module jQuery et vous devez créer un fichier intitulé prereqs.properties dans votre dossier modules\jquery_powertip avec le contenu suivant :
```
jquery
```
8. Si vous disposez de plusieurs plug-ins, vous pouvez définir des dossiers similaires de définitions de module pour ces plug-ins dans le dossier de modules de votre thème. Pour chaque définition de module, attribuez au module un nom de dossier commençant par jquery_, tel que jquery_powertip dans cet exemple. Définissez le module jquery comme prérequis.
Ajoutez le module jquery aux listes de module dans l'un des profils de votre thème. Au lieu de modifier l'un des fichiers de profil existants, il est préférable de copier l'un d'eux et de modifier la copie. Copiez le fichier de profil de base qui est la source de la copie, par exemple profile_deferred.json, renommez-le par exemple profile_jquery_deferred.json et ajoutez le module jquery. Lorsque vous créez un fichier de profil, ajustez les titres et les descriptions afin que votre profil ait un titre et une description uniques et reconnaissables.
Par exemple, remplacez les titres et les descriptions par
```
"titles": [
      {
         "value": "jQuery Deferred",
         "lang": "en"
      }
   ],
   "descriptions": [
      {
         "value": "This profile has jQuery plus the full set of modules for the theme, but defers loading most of these modules unless actually needed.  This profile balances function and performance.",
         "lang": "en"
      }
   ]
```
Facultatif : Ajoutez les modules de plug-in aux listes de modules dans votre profil, par exemple, ajoutez le module jquery_powertip dans cet exemple.
Invalidez le cache pour que les modifications du profil et du module soient extraites par le serveur Portal. Click the Administration menu icon. Then, click Portal Analysis > Theme Analyzer. Cliquez ensuite sur Utilitaires > Centre de contrôle > Invalider le cache > Cliquez pour invalider. L'invalidation automatique reconnaît automatiquement les modifications apportées aux thèmes basés sur WebDAV. Aucune autre action n'est requise. Pour plus d'informations, voir Utilitaires.
Appliquez le profil à une page. Dans Editer les propriétés de la page > Avancé, sélectionnez votre profil : jQuery Deferred.
Pour vérifier que jQuery est chargé dans la page et de quelle version il s'agit, vous pouvez exécutez $().jquery dans la console des outils de développement de votre navigateur.
Cette fonction renvoie le numéro de version de jQuery.

Résultats

A présent, la base jQuery et les plug-ins sont prêts et disponibles pour utilisation. Pour en savoir plus sur l'utilisation de la base jQuery, voir Concepts de base jQuery. Vous pouvez découvrir l'utilisation de vos plug-ins sur le site où vous avez téléchargé le plug-in. Pour plus d'informations, voir Téléchargement de PowerTip.