Questa pagina documenta alcuni componenti JavaScript di Confluence che puoi usare nel tuo plugin.

Campi di input a completamento automatico

Confluence fornisce una serie di componenti di input a completamento automatico per vari tipi di contenuto. Hai semplicemente bisogno della rightclass sul campo di input. Puoi anche configurare il completamento automatico con alcuni attributi ‘data-‘ (vedi esempi nella tabella più avanti in questa pagina).Gli eventi sono sparati sull’elemento di input tramite il sistema di eventi jQuery, quindi i client possono ascoltare gli eventi documentati.

Nome attributo

Descrizione

data-template

Un template usato per popolare il valore dell’input.

data-none-message

Un messaggio da visualizzare quando non vengono restituiti risultati.

data-max

Numero massimo di risultati di ricerca, predefinito a 10 se non definito.

data-alignment

Allineamento della tendina del completamento automatico rispetto al campo di input. Allineamento predefinito a “sinistra”.

data-dropdown-target

Un selettore di elemento di destinazione in cui posizionare la tendina di autocompletamento.

  • Se non è specificato, sarà posizionato in un div immediatamente dopo il campo di input.

data-target

Un selettore di elemento target per aggiornare il suo valore con quello fornito da data-template.

  • Questo è tipicamente utile quando si vuole visualizzare il nome completo dell’utente nel campo di input ma inviare il nome utente al server, quindi un altro elemento di input deve essere aggiornato.

Eventi lanciati:

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

Space autocomplete 

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

Completamento automatico dell’allegato 

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

Completamento automatico della pagina 

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

Completamento automatico dei post del blog 

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

Pagina e post del blog autocompletamento 

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

Tutti i contenuti autocompletamento

Questo include pagine, blog, spazi, utenti e allegati.

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

Completamento automatico dell’utente

Questo componente lancia eventi specifici dell’utente:

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

User hover

Per visualizzare maggiori informazioni sull’utente quando passa il mouse sul link utente, puoi aggiungere la classe confluence-userlink e un attributo dati di data-username al tuo tag link.

Eventi lanciati:

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