Définition d'infobulles avec PowerTip

Une fois le module PowerTip actif vous pouvez ajouter une ou plusieurs infobulles à vos pages via un emplacement de contenu dynamique, ou une sous-contribution de type de marquage config dans un module.

Pourquoi et quand exécuter cette tâche

PowerTip offre un positionnement d'aide flexible aux points cardinaux. Vous pouvez positionner l'aide de sorte qu'elle ne soit jamais retirée du bord de la vue. Ainsi, l'aide reste visible lorsqu'elle est survolée par le pointeur de la souris afin que l'utilisateur puisse interagir avec son contenu. Voici un exemple de code d'utilisation PowerTip pour ces options :

<script type="text/javascript">
	$(function() {
		$('#myelement').data('powertiptarget', 'mytip');
		$('#myelement).powerTip({ placement: 's', mouseOnToPopup: true, smartPlacement: true });
	});
</script>
<div id="mytip" style="display:none">
	<input type="text" />
	<input type="button" value="Search" />
</div>

Dans cet exemple, myelement doit être remplacé par l'ID de l'élément dans la page à laquelle vous voulez ajouter l'aide. mytip est l'identificateur de div qui représente l'aide même, et qui est défini par le bloc div dans l'exemple. Notez que la valeur initiale du conseil div est display:none. PowerTip l'affiche lorsque l'utilisateur survole l'élément myelement.

Vous pouvez définir plusieurs infobulles en copiant les données et les lignes PowerTip pour chaque infobulle et en copiant le bloc div pour chaque infobulle. Modifiez les identificateurs pour chaque infobulle.

Vous pouvez placer l'exemple de code n'importe où dans la page. Vous pouvez ajouter l'infobulle à une zone de contenu dynamique pour ajouter le code à la page. Vous pouvez également ajouter le code à une sous-contribution de type de marquage Config d'un module.

Si votre marquage est visible et doit être injecté à un point donné sur une page, utilisez une zone de contenu dynamique. Si le marquage n'est pas visible initialement et peut être injecté n'importe où dans une page, utilisez la méthode de sous-contribution. Le code de l'infobulle peut se trouver n'importe où sur la page, donc utilisez la méthode de sous-contribution et effectuez les étapes suivantes.

Procédure

  1. Créez un sous-dossier theme_powertips dans votre dossier de modules de thème.
  2. Votre module theme_powertips requiert le module jquery_powertip et vous devez créer un fichier intitulé prereqs.properties dans votre dossier theme_powertips avec le contenu suivant :
    jquery_powertip
  3. Créez un sous-dossier de configuration dans votre dossier theme_powertips.
  4. Créez le fichier de marquage theme_powertips.html dans votre dossier config. Vous pouvez copier et coller le code suivant comme exemple : 
    <script type="text/javascript">
	$(function() {
		$('#wpthemeHelp img').data('powertiptarget', 'wpthemeHelpTip');
		$('#wpthemeHelp img').powerTip({ placement: 's', mouseOnToPopup: true, smartPlacement: true });
	});
</script>
<div id="wpthemeHelpTip" style="display:none">
	<form method="get" action="http://www-10.lotus.com/ldd/portalwiki.nsf/xpSearch.xsp" target="wiki">
		<input type="text" name="searchValue" />
		<input type="submit" value="Search" />
	</form>
</div>

    Dans cet exemple il est supposé que votre thème a un élément d'aide avec un ID wpthemeHelp similaire au thème par défaut. Si le thème ne contient pas d'élément avec l'identificateur wpthemeHelp, remplacez les deux instances de '#wpthemeHelp img' par un sélecteur qui identifie l'un des éléments dans votre thème, et renommez les deux instances de 'wpthemeHelpTip'.

    Cet exemple utilise un simple formulaire dans l'infobulle qui recherche la documentation wiki HCL Digital Experience Portal. Vous pouvez modifier intégralement le marquage dans votre infobulle div par ce que vous voulez afficher dans cette dernière.

  5. Ajoutez le module theme_powertips aux listes de modules dans votre fichier de profil jQuery.
  6. Invalidez le cache pour que le serveur de portail inclue les modifications de profil et de module. Click the Administration menu icon. Then, click Portal Analysis > Theme Analyzer. Cliquez ensuite sur Utilitaires > Centre de contrôle > Invalider le cache. 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.

Résultats

Accédez à la page à laquelle est appliqué le profil jQuery, placez le curseur de la souris sur l'icône d'aide, ou sur l'élément de thème que vous avez indiqué à l'étape 4, et l'aide apparaît.

Si cela ne fonctionne pas comme prévu, vous pouvez identifier et résoudre les incidents liés à vos modules. Click the Administration menu icon. Then, click Portal Analysis > Theme Analyzer. Ensuite, cliquez sur Examiner les modules par profil. Développez votre thème dans l'arborescence et sélectionnez votre profil jQuery, par exemple jQuery Deferred, dans l'arborescence et examinez le profil. Cliquez deux fois sur votre profil jQuery dans l'arborescence. Développez le dossier Modules dans l'arborescence et sélectionnez un par un les différents modules jQuery, jquery, jquery_powertip et theme_powertips. Pour chacun, examinez les détails afin de déterminer si tout est correct (en particulier les prérequis et les contributions). Si vous détectez et résolvez un incident, vous devez ensuite invalider le cache pour que le serveur de portail extraie la modification.