Ta strona dokumentuje niektóre z komponentów JavaScript Confluence, które możesz wykorzystać w swojej wtyczce.

Autocomplete input fields

Confluence dostarcza wiele komponentów autocomplete input dla różnych typów zawartości. Po prostu potrzebujesz rightclass na polu wejściowym. Możesz również skonfigurować autocomplete za pomocą niektórych atrybutów 'data-’ (zobacz przykłady w tabeli w dalszej części tej strony).Zdarzenia są uruchamiane na elemencie wejściowym poprzez system zdarzeń jQuery, więc klienci mogą nasłuchiwać udokumentowanych zdarzeń.

Nazwa atrybutu

Opis

data-.szablon

Szablon używany do wypełnienia wartości dla danych wejściowych.

data-none-message

Wiadomość wyświetlana, gdy nie zwrócono żadnych wyników.

data-max

Maksymalna liczba wyników wyszukiwania, domyślnie 10, jeśli nie jest zdefiniowana.

data-alignment

Wyrównanie listy rozwijanej autocomplete względem pola wejściowego. Domyślnie wyrównanie do „lewej”.

data-dropdown-target

Elektor elementu docelowego, w którym ma zostać umieszczone rozwijane autocomplete.

  • Jeżeli nie zostanie określony, zostanie umieszczony w div bezpośrednio za polem wejściowym.

data-target

Selektor elementu docelowego, aby zaktualizować jego wartość o wartość dostarczoną przez data-template.

  • Jest to typowo użyteczne, gdy chcesz wyświetlić pełną nazwę użytkownika w polu wejściowym, ale przesłać nazwę użytkownika do serwera, więc inny element wejściowy wymaga aktualizacji.

Zdarzenia rzucone:

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

Space 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}">

.

Autocomplete blog post 

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

Page i post na blogu autouzupełnianie 

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

Autouzupełnianie całej zawartości

Obejmuje to strony, blogi, przestrzenie, użytkowników i załączniki.

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

User autocomplete

Ten komponent rzuca zdarzeniami specyficznymi dla użytkownika:

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

User hover

Aby wyświetlić więcej informacji o użytkowniku po najechaniu na link użytkownika, możesz dodać klasę confluence-userlink i atrybut danych data-username do swojego znacznika łącza.

Zdarzenia rzucone:

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

.