Buscar Texto con solo Seleccionarlo mediante jQuery 2
2 minuto(s)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.
También en las categorías, etiquetas, búsquedas y más.
En versiones anteriores, se veian con alto disparejo.
Seguimos trabajando en mejorar la comunidad.



Seguimos trabajando las 24 horas del día para brindarte la mejor experiencia en la comunidad.
Hemos corregido el problema y ahora la web no muestra esa barra horizontal y se ve en su tamaño natural.
Seguimos trabajando las 24 horas del día, para mejorar la comunidad.
Seguimos trabajando las 24 horas y 365 días del año para mejorar tu experiencia en la comunidad.

Seguimos trabajando para brindarte le mejor experiencia en Nube Colectiva.
Social
Redes Sociales (Developers)
Redes Sociales (Digital)