En este tutorial, vamos a crear un mini sistema de ayuda con jQuery. Este será un pequeño widget que mostrará un texto de ayuda o una guía para los usuarios de su aplicación web. El contenido del widget se podrá buscar en tiempo real y se resaltarán todos los términos coincidentes.
La idea
Para que este ejemplo funcione, esto es lo que tenemos que hacer:
- Tenemos que escuchar la entrada evento en el cuadro de texto. Prefiero esto a presionar una tecla, ya que la entrada detecta eventos como cortar/pegar y deshacer/rehacer. Sin embargo, no es compatible con navegadores más antiguos (
- Escribiremos un complemento de jQuery, acertadamente llamado "resaltar", que reemplazará el texto coincidente con
<span>elementos; - Usaremos el complemento jQuery.scrollTo para desplazar suavemente el
<span>elementos a la vista.
El HTML
El primer paso es establecer el HTML de la página en la que trabajaremos:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mini Help System with jQuery | Tutorialzine </title>
<!-- Our stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body>
<div id="widget">
<div id="header">
<input type="text" id="search" placeholder="Search in the text" />
</div>
<div id="content">
<!-- Your help text goes here -->
</div>
</div>
<!-- JavaScript Includes -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="assets/js/highlight.jquery.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html> Aquí no hay nada fuera de lo común:incluimos una hoja de estilo en el encabezado (es posible que desee echarle un vistazo, no la presentaré en este tutorial), jQuery y el complemento scrollTo en la parte inferior, junto con dos archivos js más que discutiremos a continuación. El widget tiene un campo de texto (dentro de un #header div) y el #content poseedor. Dentro de este último, debe colocar la guía de ayuda para su aplicación.
El código jQuery
Ahora vamos a escribir un complemento de jQuery que busque palabras específicas en el #content y reemplaza las ocurrencias con elementos de intervalo. Por ejemplo, buscando javascript en el texto javascript is awesome produciría <span class="match">javascript</span> is awesome . Más tarde aplicaremos estilo al .match se extiende con un fondo naranja para que sean fácilmente distinguibles.
El complemento tomará dos argumentos:un término de búsqueda (como una cadena) y una función de devolución de llamada opcional que se ejecutará cuando se complete el proceso de búsqueda/reemplazo. Como verá más adelante, usaremos la devolución de llamada para conectar el complemento scrollTo y desplazar el div #content para revelar las coincidencias.
Antes de comenzar a leer este código, tenga en cuenta que no puede simplemente obtener el html interno del div y llamar a replace() para reemplazar las ocurrencias de búsqueda con elementos de intervalo, ya que de esta manera romperá su marcado. Si alguien ingresó "div " como término de búsqueda, esto causaría todos sus <div> elementos a ser reemplazados con <<span class="match">div</span>> , la bruja solo busca problemas.
La solución es un poco más compleja (pero no es difícil una vez que tenga la idea):usaremos el método jQuery de contenido () para obtener todos los elementos secundarios del elemento y reemplazar () el texto solo en los nodos de texto (están garantizados que no contenga ningún html). A continuación, recorreremos recursivamente todos los elementos secundarios que no sean nodos de texto y repetiremos los pasos.
activos/js/highlight.jquery.js
(function($) {
var termPattern;
$.fn.highlight = function(term, callback) {
return this.each(function() {
var elem = $(this);
if (!elem.data('highlight-original')) {
// Save the original element content
elem.data('highlight-original', elem.html());
} else {
// restore the original content
elem.highlightRestore();
}
termPattern = new RegExp('(' + term + ')', 'ig');
// Search the element's contents
walk(elem);
// Trigger the callback
callback && callback(elem.find('.match'));
});
};
$.fn.highlightRestore = function() {
return this.each(function() {
var elem = $(this);
elem.html(elem.data('highlight-original'));
});
};
function walk(elem) {
elem.contents().each(function() {
if (this.nodeType == 3) { // text node
if (termPattern.test(this.nodeValue)) {
// wrap the match in a span:
$(this).replaceWith(this.nodeValue.replace(termPattern, '<span class="match">$1</span>'));
}
} else {
// recursively call the function on this element
walk($(this));
}
});
}
})(jQuery); ¡Y listo, nuestro texto está lleno de bonitos aspectos destacados! No se preocupe si no entiende bien cómo funciona esto:está empaquetado como un complemento jQuery fácil de usar, por lo que puede colocarlo en su proyecto sin pensarlo mucho.
Aquí se explica cómo usar el complemento:
activos/js/script.js
$(function() {
var search = $('#search'),
content = $('#content'),
matches = $(), index = 0;
// Listen for the text input event
search.on('input', function(e) {
// Only search for strings 2 characters or more
if (search.val().length >= 2) {
// Use the highlight plugin
content.highlight(search.val(), function(found) {
matches = found;
if(matches.length && content.is(':not(:animated)')){
scroll(0);
}
});
} else {
content.highlightRestore();
}
});
search.on('keypress', function(e) {
if(e.keyCode == 13){ // The enter key
scrollNext();
}
});
function scroll(i){
index = i;
// Trigger the scrollTo plugin. Limit it
// to the y axis (vertical scroll only)
content.scrollTo(matches.eq(i), 800, { axis:'y' } );
}
function scrollNext(){
matches.length && scroll( (index + 1) % matches.length );
}
});
En la devolución de llamada, activo el scroll(0) función. Esto anima el #content div para que muestre el primer partido de la serie. Hay otra función para desplazarse:scrollNext, que se llama cuando presiona la tecla de retorno mientras escribe. Esto hará que el titular revele la siguiente coincidencia.
¡Con esto nuestro mini sistema de ayuda está completo!
Conclusión
Puede usar este ejemplo para mejorar sus páginas de ayuda. También puede hacer un buen uso del complemento destacado que creamos aquí y crear una mejor funcionalidad de búsqueda, mejorar su aplicación móvil o mucho más. ¡Me encantaría escuchar tus ideas en los comentarios!