Definiciones de palabras dinámicas en JavaScript-underlinedef. js

Tiempo de ejecución: 30 minutos. Empezar

Autor: ckkz-it
Views Total: 386
Sitio oficial: Ir a la web
Actualizado: June 22, 2018
Licencia: MIT

Vista prévia

Definiciones de palabras dinámicas en JavaScript-underlinedef. js

Descripción

Esta es la versión de JavaScript puro de jQuery definiciones subrayadas plugin que agrega subrayados automáticamente a palabras coincidentes dentro del documento y muestra definiciones predefinidas en una información sobre herramientas cuando el mouse pasa el ratón.

Funcionamiento

Importe la versión minimizada de la biblioteca underlinedef. js al documento HTML.

<script src="js/underlinedef.min.js"></script>

Prepare sus propias palabras y sus definiciones en el JavaScript como estas:

let words = ["JavaScript", "AJAX"],


definitions = ["JavaScript is a high-level, interpreted programming language.", "Ajax is a set of Web development techniques using many Web technologies on the client side to create asynchronous Web applications."];

Inicialice el underlinedef. js en el contenedor de texto de destino y listo.

underlineDef(".text", {

words: words,

definitions: definitions
});

Especifique el motor de búsqueda que desea utilizar. Motores de búsqueda disponibles: Google, wiki, Yandex.

underlineDef(".text", {

words: words,

definitions: definitions,

search: 'google'
});

La clase CSS predeterminada que se adjuntará a las palabras coincidentes en el texto.

underlineDef(".text", {

words: words,

definitions: definitions,

underlineClass: 'underline-definitions'
});

El nombre de etiqueta predeterminado para las palabras coincidentes.

underlineDef(".text", {

words: words,

definitions: definitions,

tagName: 'span'
});

Especifique el atributo que desea contener las definiciones.

underlineDef(".text", {

words: words,

definitions: definitions,

attr: 'title'
});

Decida si desea evitar el evento predeterminado del elemento.

underlineDef(".text", {

words: words,

definitions: definitions,

preventDefault: true
});

Te puede interesar: