Op deze pagina vindt u een aantal Confluence JavaScript-componenten die u in uw plugin kunt gebruiken.

Autocomplete invoervelden

Confluence biedt een aantal autocomplete-invoervelden voor verschillende contenttypen. U hoeft alleen maar de rightclass op het invoerveld te zetten. U kunt de autocomplete ook configureren met een aantal ‘data-‘ attributen (zie voorbeelden in de tabel verderop op deze pagina).Events worden afgevuurd op het input element via jQuery event system, zodat clients kunnen luisteren naar de gedocumenteerde events.

Attribuutnaam

Beschrijving

data-sjabloon

Een sjabloon dat wordt gebruikt om de waarde voor de invoer te vullen.

data-none-message

Een bericht dat wordt weergegeven wanneer geen resultaten worden geretourneerd.

data-max

Maximaal aantal zoekresultaten, standaard ingesteld op 10 indien niet gedefinieerd.

data-alignment

Aflijning van de vervolgkeuzelijst voor autoaanvullen ten opzichte van het invoerveld. Standaard “links” uitgelijnd.

data-dropdown-target

Een element-doel-selector om de autocomplete drop-down in te plaatsen.

  • Als er geen is opgegeven, wordt deze in een div direct na het invoerveld geplaatst.

data-target

Een selector voor het doelelement om de waarde ervan bij te werken met de waarde die door data-template wordt geleverd.

  • Dit is typisch nuttig wanneer u de volledige naam van de gebruiker in het invoerveld wilt weergeven, maar de gebruikersnaam naar de server wilt verzenden, zodat een ander invoerelement moet worden bijgewerkt.

Events thrown:

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

Spatie autocomplete 

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

Attachment autocomplete 

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

Page autocomplete 

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

Blogpost autoaanvullen 

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

Pagina en blog post autocomplete 

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

Alle inhoud autocomplete

Dit omvat pagina’s, blogs, ruimtes, gebruikers, en bijlagen.

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

Gebruikersautocomplete

Deze component werpt gebruikersspecifieke gebeurtenissen:

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

Gebruiker hover

Om meer informatie over de gebruiker weer te geven wanneer met de muis over de gebruikerslink wordt bewogen, kunt u de class confluence-userlink en een data-attribuut van data-username aan uw link-tag toevoegen.

Gegooide gebeurtenissen:

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