Cette page documente certains des composants JavaScript de Confluence que vous pouvez utiliser dans votre plugin.

Champs de saisie autocomplète

Confluence fournit un certain nombre de composants de saisie autocomplète pour divers types de contenu. Vous avez simplement besoin de la rightclass sur le champ de saisie. Vous pouvez également configurer l’autocomplétion avec certains attributs ‘data-‘ (voir les exemples dans le tableau plus loin sur cette page).Les événements sont déclenchés sur l’élément d’entrée via le système d’événements jQuery, de sorte que les clients peuvent écouter les événements documentés.

Nom de l’attribut

Description

data-modèle

Un modèle utilisé pour alimenter la valeur de l’entrée.

data-none-message

Un message à afficher lorsqu’aucun résultat n’est renvoyé.

data-max

Nombre maximal de résultats de recherche, 10 par défaut si non défini.

data-alignment

Alignement de la liste déroulante d’autocomplétion par rapport au champ de saisie. Par défaut, alignement « gauche ».

data-dropdown-target

Sélecteur d’élément cible dans lequel placer la liste déroulante d’autocomplétion.

  • Si aucun n’est spécifié, elle sera placée dans un div immédiatement après le champ de saisie.

data-target

Un sélecteur d’élément cible pour mettre à jour sa valeur avec la valeur fournie par data-template.

  • Ceci est typiquement utile lorsque vous voulez afficher le nom complet de l’utilisateur dans le champ de saisie mais soumettre le nom d’utilisateur au serveur, donc un autre élément de saisie doit être mis à jour.

Evénements lancés :

  • open.autocomplete-content
  • selected.autocomplete-content

Espace autocomplet 

1
<input class="autocomplete-space" data-max="10" data-none-message="No results" data-template="{name}">

.

Attachement autocomplet 

1
<input class="autocomplete-attachment" data-max="10" data-none-message="No results" data-template="{fileName}">

Page autocomplet 

1
<input class="autocomplete-page" data-max="10" data-none-message="No results" data-template="{title}">

.

Autocomplétion des pages et des billets de blogs 

1
<input class="autocomplete-blogpost" data-max="10" data-none-message="No results" data-template="{title}">

Page et billets de blog 

1
<input class="autocomplete-confluence-content" data-none-message="No results" data-template="{title}">

Automplétion de tout le contenu

Cela inclut les pages, les blogs, les espaces, les utilisateurs et les pièces jointes.

1
<input class="autocomplete-search" data-none-message="No results" data-template="{title}">

Autocomplétion de l’utilisateur

Ce composant lance des événements spécifiques à l’utilisateur :

  • open.autocomplete-user
  • selected.autocomplete-user
1
<input class="autocomplete-user" data-none-message="No users found" data-template="{username}">

Survol de l’utilisateur

Pour afficher plus d’informations sur l’utilisateur lors du survol du lien utilisateur, vous pouvez ajouter la classe confluence-userlink et un attribut data de data-username à votre balise de lien.

Evénements lancés :

  • hover-user.open
  • hover-user.follow
1
<a class="confluence-userlink" data-username="admin">A. D. Ministrator</a>

.