Biblioteca de JavaScript para resaltar/navegar a través de elementos DOM-highlighter. js

Vista prévia

Descripción

highlighter. js es una pequeña biblioteca de JavaScript que se utiliza para resaltar, navegar a través de los elementos DOM de su documento al igual que un recorrido por el sitio.

¿Cómo funciona?

Cargue el núcleo JavaScript highlighter. js en su documento.

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

Cree una nueva instancia de resaltador.

var Highlighter = new window.Highlighter();

Opciones.

var Highlighter = new window.Highlighter({



// Automatically scroll to the underlined element

'scroll':true,


 // Scrolling speed

'scrollDuration': 500

 });

Api.

// Select next element starting from the current selected element (by default is the first DOM element)
Highlighter.next();

// Select previous element starting from the current selected element ( by default is the first DOM element)
Highlighter.previous();

// Skip a bunch of next elements starting from the current selected element

Highlighter.skipNext(50);

// Skip a bunch of previous elements starting from the current selected element
Highlighter.skipPrev(35);

// Highlight the current selected element
Highlighter.underline();

// Remove highlighting from the current selected element
Highlighter.erase();

// Select next element (by ID) starting from the current selected element (by default is the first DOM element)
Highlighter.next('#test');

// Select next element (by class/classes) starting from the current selected element (by default is the first DOM element)
Highlighter.next('.class .class-2');

// Select next element (by < tag > name) starting from the current selected element (by default is the first DOM element)
Highlighter.next('<span>');

// Select previous element (by ID) starting from the current selected element (by default is the first DOM element)
Highlighter.previous('#test');

// Select previous element (by class/classes) starting from the current selected element (by default is the first DOM element)
Highlighter.previous('.class .class-2');

// Select previous element (by < tag > name) starting from the current selected element (by default is the first DOM element)
Highlighter.previous('<span>');

// Select first element in the DOM by ID
Highlighter.select('#id');

// Select first element in the DOM by class or classes
Highlighter.select('.class .class2');

// Select first element in the DOM by < tag > name
Highlighter.select('<span>');

Detector de eventos.

window.addEventListener('Highlighter:selected', function (evt) {
 console.log('This element has been selected', evt.eventData);
});

window.addEventListener('Highlighter:underlined', function (evt) {
 console.log('This element has been underlined', evt.eventData);
});

window.addEventListener('Highlighter:erased', function (evt) {
 console.log('This element has been erased', evt.eventData);
});

window.addEventListener('Highlighter:skipped', function () {
 console.log('Elements were skipped');
});

window.addEventListener('Highlighter:scrolled', function (evt) {
 console.log('Scrolled to this element', evt.eventData);
});

window.addEventListener('Highlighter:restart', function () {
 console.log('Highlighter restarted from the first DOM element');
});