Buscar Texto con solo Seleccionarlo mediante jQuery 2
En esta página:
Demo Github
Uno de los principios de una Buena UX/UI es que tu aplicación o website sea muy fácil de usar.
Puede pasar que un visitante esta leyendo un articulo de una pagina web tuya y encuentra un Personaje, texto o nombre raro que no sabe su significado. Entonces el va a proceder a abrir una nueva Pestaña o Ventana del navegador para buscarlo. Pero es un poco tedioso a veces, entonces esta aplicación puede ayudar a que las búsquedas sean mas practicas y rápidas.
A continuación usare jQuery para realizar una búsqueda con solo seleccionar el texto. Vamos por ello !
Creamos un archivo llamado script.js el cual contendrá nuestra función jquery que va realizar la función de busqueda con solo seleccionar el texto.
script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function(){ $(document.body).bind('mouseup', function(e){ var selection; if (window.getSelection) { selection = window.getSelection(); } else if (document.selection) { selection = document.selection.createRange(); } selection.toString() !== '' && window.open("https://www.google.com/search?q= "+ selection +" "); }); }); |
Ahora para nuestra vista:
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="row"> <div class="col-md-4"> <div class="texto"> <h3>Visión de conjunto</h3> <p>La realidad siempre esta en plena transformación y requiere un enfoque dinámico; la publicidad “tradicional” hace ya tiempo que ha dejado de ser la única solución. Los medios de comunicación se mezclan dando lugar a nuevas formas de comunicación y la atención se centra cada vez más en proyectos articulados y complejos.</p> </div> </div> <div class="col-md-4"> <div class="texto"> <h3>Experiencia</h3> <p>Contamos con mas de 6 años en el mercado, siempre innovando, utilizando y promoviendo las Nuevas tecnologias que aparecen. Siempre estamos ayudando a las empresas a lograr sus metas y objetivos, somos conscientes que estos son muy importantes para su empresa.</p> <p>Disfrutamos mucho hacer crecer su empresa gracias a la pasión y entusiasmo que ponemos a nuestro trabajo.</p> </div> </div> <div class="col-md-4"> <div class="texto"> <h3>Nuestra Meta</h3> <p>Ser la Consultora N°1 en Marketing y Publicidad del País y de Latinoamérica, en ayudar a lograr los objetivos de las Empresas, obteniendo siempre buenos resultados, que acompañen a mejorar las ventas e ingresos de la empresa y que esta se desarrolle mas de lo esperado.</p> </div> </div> <div class="row"> <div class="col-md-12"> <h4>La Magia en Internet existe. A diferencia de la vida real, en la Internet podemos soñar, viajar, leer, pensar sin costo alguno. Internet nos dio la oportunidad de ser Felices.</h4> </div> </div> </div> |
Listo !
Espero les sirva de mucho el Tutorial.
Sígueme en Twitter: @pepoflex
Hasta nuestro siguiente artículo !
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.
- jQuery Tutoriales
- 19-06-2015
- 21-10-2019
- Crear un Post - Eventos Devs - Foro
Social
Redes Sociales (Developers)
Redes Sociales (Digital)