Mostrar un mensaje de sugerencia al usuario con jQuery

Hola como están en esta vez voy a enseñar a mostrar de una forma sencilla un mensaje de sugerencia para el lector de nuestras webs con un botón .Y con la ayuda de jQuery vamos a hacer que nuestro mensaje aparezca y desaparezca dando clic en el botón de mostrar sugerencia..

Les voy a dejar la demo para que puedan ver su efecto y espero les guste y lo puedan utilizar en algún proyecto.

Este ejemplo serviría mucho para aquellas blogueros que desean mostrar alguna sugerencia en sus páginas web y mostrarla cuando el usuario la desee ver alguna sugerencia al respecto.

Vamos a ver los archivos a utilizar :

index.html

estilo.css

efecto.js

jquery.js

Pues bién recordemos colocar nuestros archivos de forma ordenada en nuestro hosting de modo que los podamos identificar con facilidad separadas por carpetas…

Comencemos con el index.html

Recordemos que dentro de <head> y </head> debemos colocar las rutas que hacen referencia al estilo y a las librerías jQuery dejándolas de la siguiente manera

        <head>
        <link rel="stylesheet" type="text/css" href="ruta al estilo.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
        <script type="text/javascript" src="ruta al efecto.js"></script>
        </head>

Dentro del body y el lugar donde vamos a colocar el efecto será de la siguiente manera se podría utilizar estos archivos de muchísimas formas por el momento vamos a realizarlo de esta manera…

      <h1>Mostrar sugerencia jQuery</h1>
      <p id="sugerencia1">Esta es la sugerencia 1 para esta p demuestrese como esta el estilo</p>
      <input id="sugerencia1" type="button" value="sugerencia1" /> <br/>
      <p id="sugerencia2">Esta es la sugerencia 2 para esta p demuestrese como esta el estilo</p>
      <input id="sugerencia2" type="button" value="sugerencia2" />

En este efecto vamos a hacer que cuando demos clic en el input lo que se encuentre en <p> con la capa sugerencia1 se despliegue mostrando la sugerencia y lo mismo pasaría con el segundo efecto , le e puesto diferente colores al css para que se diferencie.

Este es el estilo.css que dará el efecto a como se muestre..

	
/*
 * Mostrar un mensaje de sugerencia al usuario con jQuery:
 * css jQuery,
 * Copyright 2015 bloguero-ec.
 * Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)
*/
p#sugerencia1{
	border:1px solid #000;
	color:#333;
	background-color:#CCC;
	display:none;
	padding:10px;
	}
	
p#sugerencia2{
	border:1px solid #0F6;
	color:#333;
	background-color:#099;
	display:none;
	padding:10px;
	}
input{
	margin:10px;
	padding:10px;}

Podríamos haber usado esto de muchas formas pero yo lo e dejado así…

El archivo efecto.js lo he llamado así ustedes podrán llamarlo como sea siempre y cuando dentro del index coloquen el nombre a utilizar mas su respectiva ruta

// Mostrar un mensaje de sugerencia al usuario con jQuery y javascript:
// Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)
// JavaScript Document
$(document).ready(function(){
	
	$('input#sugerencia1').click(function(){
		$('p#sugerencia1').slideToggle(1000);
	});

	$('input#sugerencia2').click(function(){
		$('p#sugerencia2').slideToggle(1000);
	});
	
	
});

Como ya dije anteriormente este efecto logrará realizarse cuando se dé clic en el input con su respectiva capa….slideToggle(1000); se encargará de realizar el efecto en 1000 milisegundos…

La librería jQuery la puedes descargar directamente desde su página web jquery.com En otro caso un número de empresas grandes proporcionan copias de jQuery alojado en los actuales CDN redes que están disponibles para uso público.

Versiones de navegadores probado en:

Mozilla Firefox

Google chrome

Internet explorer

Opera

Espero les sirva en algún proyecto suerte y hasta la próxima

demostración

Relacionado