Esta página documenta algunos de los componentes JavaScript de Confluence que puede utilizar en su plugin.

Campos de entrada de autocompletar

Confluence proporciona una serie de componentes de entrada de autocompletar para varios tipos de contenido. Simplemente necesita la clase rightclass en el campo de entrada. También puede configurar el autocompletado con algunos atributos ‘data-‘ (ver ejemplos en la tabla más adelante en esta página).Los eventos se disparan en el elemento de entrada a través del sistema de eventos jQuery, por lo que los clientes pueden escuchar los eventos documentados.

Nombre del atributo

Descripción

data-template

Una plantilla utilizada para rellenar el valor de la entrada.

data-none-message

Mensaje que se muestra cuando no se obtienen resultados.

data-max

Número máximo de resultados de búsqueda, por defecto 10 si no se define.

data-alignment

Alineación del desplegable de autocompletar con respecto al campo de entrada. Por defecto, la alineación es «izquierda».

data-dropdown-target

Un selector de elemento destino para colocar el desplegable de autocompletar.

  • Si no se especifica ninguno se colocará en un div inmediatamente después del campo de entrada.

data-target

Un selector de elemento target para actualizar su valor con el valor proporcionado por data-template.

  • Esto suele ser útil cuando se quiere mostrar el nombre completo del usuario en el campo de entrada pero enviar el nombre de usuario al servidor, por lo que hay que actualizar otro elemento de entrada.

Eventos lanzados:

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

Espacio autocompletado 

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

Autocompletar entradas de blog 

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

Página y blog post autocompletar 

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

Todo el contenido autocompletar

Esto incluye páginas, blogs, espacios, usuarios y archivos adjuntos.

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

Autocompletar usuario

Este componente lanza eventos específicos de usuario:

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

User hover

Para mostrar más información sobre el usuario al pasar el ratón sobre el enlace de usuario, puede añadir la clase confluence-userlink y el atributo data de data-username a su etiqueta de enlace.

Eventos lanzados:

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