Diese Seite dokumentiert einige der Confluence-JavaScript-Komponenten, die Sie in Ihrem Plugin verwenden können.

Autovervollständigungs-Eingabefelder

Confluence bietet eine Reihe von Autovervollständigungs-Eingabekomponenten für verschiedene Inhaltstypen. Sie benötigen lediglich die Rightclass für das Eingabefeld. Sie können die Autovervollständigung auch mit einigen ‚data-‚-Attributen konfigurieren (siehe Beispiele in der Tabelle weiter unten auf dieser Seite) Ereignisse werden auf dem Eingabeelement über das jQuery-Ereignissystem abgefeuert, so dass Clients auf die dokumentierten Ereignisse hören können.

Attributname

Beschreibung

Daten-Vorlage

Eine Vorlage, die verwendet wird, um den Wert für die Eingabe aufzufüllen.

data-none-message

Eine Nachricht, die angezeigt wird, wenn keine Ergebnisse zurückgegeben werden.

data-max

Maximale Anzahl von Suchergebnissen, Standardwert ist 10, wenn nicht definiert.

data-alignment

Ausrichtung des Autovervollständigungs-Dropdowns relativ zum Eingabefeld. Standardmäßig ist die Ausrichtung „links“.

data-dropdown-target

Ein Zielelement-Selektor, in dem das Autocomplete-Dropdown platziert werden soll.

  • Wenn keines angegeben ist, wird es in einem div direkt nach dem Eingabefeld platziert.

data-target

Ein Target-Element-Selektor, um seinen Wert mit dem von data-template bereitgestellten Wert zu aktualisieren.

  • Dies ist typischerweise nützlich, wenn Sie den vollständigen Namen des Benutzers im Eingabefeld anzeigen, aber den Benutzernamen an den Server übermitteln möchten, so dass ein anderes Eingabeelement aktualisiert werden muss.

Ausgelöste Ereignisse:

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

Autovervollständigung 

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

Anhang automatisch vervollständigen 

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

Seite automatisch vervollständigen 

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

Blogbeitrag automatisch vervollständigen 

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

Seite und Blogposts automatisch vervollständigen 

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

Alle Inhalte automatisch vervollständigen

Das schließt Seiten, Blogs, Bereiche, Benutzer und Anhänge.

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

Benutzer-Autovervollständigung

Diese Komponente löst benutzerspezifische Ereignisse aus:

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

User hover

Um mehr Informationen über den Benutzer anzuzeigen, wenn man mit dem Mauszeiger über den Benutzerlink fährt, können Sie die Klasse confluence-userlink und ein Datenattribut data-username zu Ihrem Link-Tag hinzufügen.

Ereignisse werden ausgelöst:

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