Ajaxman » Jquery http://www.ajaxman.net Ajax, Javascript, Xul, Internet, Recursos, Informatica ... Sat, 07 Jan 2012 23:15:44 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 [Javascript] simpleValidate Jquery Plugin http://www.ajaxman.net/javascript-simplevalidate-jquery-plugin.html http://www.ajaxman.net/javascript-simplevalidate-jquery-plugin.html#comments Sat, 30 Apr 2011 05:02:40 +0000 Ajaxman http://www.ajaxman.net/?p=2082 Pues les cuento un preámbulo

Una de las cosas que menos me gusta es estar repitiendo código (recordemos -DRY-) entonces, pues cuando deseaba validar un formulario siempre andaba buscando cual opción era la mejor, y hay muchas opciones y son excelentes en lo que hacen, sin embargo todas tenían un punto débil, por ejemplo que no soportaban ajax, es decir terminaban de validar y se seguían (enviaban el formulario), otros me mandaban mensajes de errores de validación en ciertos colores y en cierto lugar que si bien es correcto, a veces en muchos proyectos no va el estilo o simplemente quieren ponerle un alert o similar.

Bajo ese preámbulo y recordando que siempre quise hacer un validado de formularios con Javascript (hace años hice uno chafita con Javascript).

Entonces pensé por que no hacer uno que fuera muy simple de usar y que no fuera obtrusivo, y así fue como desarrolle simpleValidate que es un plugin el cual como su nombre lo dice solo es un validador de formularios y nada mas.

Les presento a:

simpleValidate – Jquery Plugin

A continuación pongo las características.

  • Fácil de usar
  • Extremadamente Ligero 2kb (minifed)
  • Compatible con Jquery 1.5.2
  • No requiere CSS especial
  • No obtrusivo
  • Posibilidad de inyectar algún tipo de alert especial mediante sus settings
  • Completamente personalizable
  • Soporta expresiones regulares
  • Y valida checkboxes

Su uso es muy simple, solo necesitamos de Jquery y del plugin

 <script src="jquery.1.5.2.min.js" type="text/javascript"></script>
 <script src="simpleValidate.1.6.min.js" type="text/javascript"></script>

Y ejecutamos el plugin donde indicamos el id del Formulario en cuestión


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="jquery.1.5.2.min.js" type="text/javascript"></script>
 <script src="simpleValidate.1.6.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function(){
    $("#testForm").simpleValidate();
 });

 </script>
 </head>
 <body>
 <form action="try.php" method="post" id="testForm">
 <label>Name</label>
 <input type="text" name="name" title="valid[Ingrese un nombre valido]" /><hr />
 <label>Ingrese una cantidad valida (tipo numero.decimal(2 digitos))</label>
 <input type="text" name="cantidad" title="valid[regex,Por favor ingrese un numero con o sin decimales únicamente]" data="^([0-9]+\.?[0-9]{0,2})$" /><hr />
 <label>Required</label><input type="checkbox"  name="condiciones" value="Required" title="valid[Debes de aceptar los terminos y condiciones]"/>
 <input type="submit" value="Guardar datos"/>
 </form>
 </body>
</html>

Y con esto ya tenemos funcionando el plugin ahora necesitamos indicarle cuales son los campos a validar lo haremos de la siguiente forma.

En cada input que necesitemos, vamos a agregar lo siguiente en el campo (input) que queramos validar

title=”valid[tipo_de_validacion,{params,}]“

Donde los tipos de validación son los siguientes:

  • valid[required,mensaje de error] ==> Solo verifica que el campo tenga algún valor y el segundo parametro es lo que mostrara cuando no pase la validación
  • valid[email,mensaje de error] => Valida que sea un email valido y si no muestra el mensaje del segundo parametro.
  • valid[zip,mensaje de error] => Valida que sea un código postal valido (5 caracteres numéricos) y si no muestra el mensaje del segundo parámetro.
  • valid[minlength,mensaje de error,numero_minimo] => Valida que el campo contenga un mínimo de caracteres indicado el el ultimo parámetro
  • valid[maxlength,mensaje de error,numero_maximo] => Valida que el campo contenga un máximo de caracteres indicado el el ultimo parámetro
  • valid[regex,mensaje de error] => Este forma de validación necesita un parámetro data dentro del input donde venga especificada la expresión regular a validar y si no pasa lanza el error.
  • valid[ensaje de error] =>Este solo es aplicable a los checkboxes y solo contiene como argumento el error que mostrara cuando el checkbox no este marcado

Los valores que se pueden personalizar dentro del plugin son los siguientes.


 $(document).ready(function(){

   $("#testForm").simpleValidate({
     text: Array("El campo"," es obligatorio"),
     email: "Ingrese un email valido",
     zip: "Ingrese un codigo postal valido",
     min: Array(5,"Ingrese al menos ", "caracteres"),
     max: Array(10,"Ingrese maximo", "caracteres"),
     checkmessage:'Es necesario marcar el campo',
     field: 'valid',
     msg: function(msg){
      alert(msg);
     }
   });

 });

Donde

  • text: Es un array que contiene dos textos que mostrara en el error cuando un campo sea required de la forma (texto1+ nombre_campo+texto2)
  • email: Es el error que mostrara cuando un email este invalido
  • zip: Error cuando el codigo postal este mal
  • min: array en donde viene el error a mostrar y el numero de elementos a validar por default
  • max: array en donde viene el error a mostrar y el numero de elementos a validar por default
  • checkmessage: Este es el mensaje que mostrara cuando se genere un error al no estar validado un checkbox
  • field: es la clave para validar los campos, es decir cuando buscamos title=”valid[etc]” valid es el contenido del title del campo si le ponemos otro, podemos usar dentro de title lo que le hayamos puesto en esta opcion evitando asi posibles colisiones de palabras que esten usando otros plugins.
  • msg: esta es una funcion, en donde solo estamos mandando un alert para mostrar el error, sin embargo si posees algun otro plugin como Sexyalertbox o similar puedes meterlos dentro de esta funcion asi cuando se lanza el error mostrara el cuadro de dialogo de la forma como deses (por ejemplo dentro de un Sexyalertbox).

Es importante recalcar que estos parámetros son cambiados por los mensajes establecidos dentro del propio input, así que casi nunca se cambian estos valores.

Además el plugin recibe un parámetro mas el cual es una función anónima (según yo seria un closoure ), la cual se ejecutara cuando termine la validación, es decir si al terminar tu validación deseas que en vez de enviar el formulario normalmente, lo envié por XMLHttpRequest(aka Ajax), esta función al estar agregada hace que tu tomes la decisión de que hacer una vez terminada la validación y pasada obviamente.

Ejemplo complejo, usando JAlert para mostrar los errores (http://www.anieto2k.com/2008/12/31/jquery-alert-dialogs-reemplazo-para-alert-prompt-y-confirm/)


 $(document).ready(function(){

   $("#testForm").simpleValidate(
     {
       msg: function(msg){
         jAlert(msg, 'Alert Dialog');
          }
     },
     function (){
       $.post('/account/',
              $(this).serialize(),
              function( Response ){
                 jAlert("Sus datos se han enviado via Ajax");
              });
     }
   );

 });

El ejemplo anterior, hace una validación pero los mensaje de error los muestra de una forma diferente usando otro plugin (JAlert en este caso) además de eso al terminar la validación envía todos los datos del formulario por post usando ajax y cuando recibe respuesta manda un alert.

Como vemos es muy fácil, poderoso y practico de usar.

No se si me explique bien pero estar posteando por la noche da bastante sueño, ojala y les haya gustado mi plugin y sobre todo ojala y les sea útil.

Para bajarlo y ver las actualizaciones aquí dejo la información:

simpleValidate Version 1.6 Beta

GitHub: https://github.com/Ajaxman/simpleValidate (Fork-ME =) )
Plugins Jquery: http://plugins.jquery.com/project/simpleValidate

Cualquier felicitación, duda, comentario, sugerencia, correción , Donación =), con gusto estoy para atenderla, la licencia es GPL =)

Hasta el próximo post

]]> http://www.ajaxman.net/javascript-simplevalidate-jquery-plugin.html/feed 2 [Javascript:Jquery] Plugin GoogleMaps http://www.ajaxman.net/javascriptjquery-plugin-googlemaps.html http://www.ajaxman.net/javascriptjquery-plugin-googlemaps.html#comments Wed, 06 Jan 2010 17:57:29 +0000 Ajaxman http://www.ajaxman.net/?p=1770 Me entero en Twitter, sobre un plugin de Jquery el cual nos permite trabajar comoda y apliamente con GoogleMaps de una manera muy facil.

Para usarlo primero nos bajamos el Jquery y despues el plugin

En nuestro HTMl agregamos ambos JS’s (El Jquery primero y despues el plugin Jquery.Googlemaps)

Y ahora a agregamos el siguiente script (Javascript)

$('selector').googleMaps();

Y listo con eso ya podemos ver como funciona

Aunque como hemos de suponer es mucho mas funcional usando algo mas de codigo, aqui algunos ejemplos.

Por ejemplo podemos indicar la latitud y la longitud

$(document).ready(function() {
    $('selector').googleMaps({
        latitude: 49.26063518364422,
        longitude: -123.15673828125
    });
});

O algo tan avanzado como una marca, personalizada en cierto punto del mapa.


$(document).ready(function() {
    $('selector').googleMaps({
        markers: {
            latitude:     37.4416,
            longitude: -122.1516,
            icon: {
                image: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
                shadow: 'http://chart.apis.google.com/chart?chst=d_map_pin_shadow',
                iconSize: '12, 20',
                shadowSize: '22, 20'
            }
        }
    });
});

Y con el ultimo ejemplo podriamos obtener algo como esto

Google Maps jQuery Plugin

Google Maps jQuery Plugin

Toda la documentacion y mas ejemplos en la pagina web del autor
Google Maps jQuery Plugin – Shawn Mayzes

]]> http://www.ajaxman.net/javascriptjquery-plugin-googlemaps.html/feed 0 [Jquery-Plugin]Sparklines, creado graficas con Jquery http://www.ajaxman.net/jquery-pluginsparklines-creado-graficas-con-jquery.html http://www.ajaxman.net/jquery-pluginsparklines-creado-graficas-con-jquery.html#comments Thu, 17 Jul 2008 18:55:32 +0000 Ajaxman http://www.ajaxman.net/?p=958 Leo una interesante entrada de Andrés Nieto sobre un plugin con el cual podemos crear pequeñas grafícas usando Javascript, obviamente apoyandonos de la librería Jquery.

jquery sparklines

Este importante plugin tiene varias opciones comunes como son

  • type – line (default), bar o tristate
  • width – Ancho de la gráfica, por defecto “auto”.
  • height – Altura de la gráfica, por defecto “auto”.
  • lineColor – Color de la línea
  • fillColor – Color del relleno

Esto lo recalco por que ademas de eso podemos usar muchas otras opciones, como son

Opciones de gráficas tipo línea:

  • spotColor – Oculta o muestra el color del valor final.
  • spotRadius – En pixels (default: 2)

Opciones de gráficas tipo Bar:

  • barColor – Color de los valores positivos
  • negBarColor – Color de los valores negativos
  • barWidth – Tamaño de cada barra, en pixels
  • barSpacing -Separación entre barras, en pixels.
  • zeroAxis – Centro del eje Y.

Opciones de gráficas tipo Tristate:

  • posBarColor – Colores valores positivos
  • negBarColor – Colores valores negativos
  • zeroBarColor – Colores para valores cero.
  • barSpacing – Separación entre barras, en pixels
  • zeroAxis – Centro del eje Y

Creo que Ajax, esta llegando hasta limites insospechados si ha esto le añadimos la próxima versión de HTML, el 5, tal ve pronto salgan juegos muy buenos creados con Javascript y hasta aplicaciones mas poderosas.

Para saber como pueden usarlo en su sitio web, pueden darse la vuelta por el Blog de Andrés donde viene la información completa.
Vía | jQuery Sparklines, gráficas sencillas con jQuery

]]> http://www.ajaxman.net/jquery-pluginsparklines-creado-graficas-con-jquery.html/feed 0 [Ajax] mcDropdown: Mejorando las listas desplegables con Jquery http://www.ajaxman.net/ajax-mcdropdown-mejorando-las-listas-desplegables-con-jquery.html http://www.ajaxman.net/ajax-mcdropdown-mejorando-las-listas-desplegables-con-jquery.html#comments Mon, 30 Jun 2008 16:44:50 +0000 Ajaxman http://www.ajaxman.net/?p=895 Después de varios días sin postear por tener mucho trabajo, vuelvo a escribir, y saben postear y trabajar es complicado, creo que debería dejar de trabajar y dedicarme ha escribir post’s :-) .

Vía Hotajax(un blog bastante interesante sobre Ajax), me acabo de enterar de un importante plugin para que podamos mejorar bastante nuestras listas desplegables.

Esta funcionalidad nos permite generar submenus desplegables desde un combobox, osea elegir y desde ahí volver a elegir otra opción, además de que todo esto lo guarda en un “historial” para saber donde andamos, les pongo una imagen para que vean a lo que me refiero.

mcdropdown_preview

Para hacer uso de este plugin vamos a necesitar descargarnos  mcdropdown, el cual ya trae todos los script necesarios para que funcione.

Codigo despues del salto


< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Giva Labs - mcDropdown jQuery Plug-in | Giva</title>
<!-- Llamamos a los scripts  que vamos a ocupar //-->
	<script type="text/javascript" src="./lib/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="./lib/jquery.mcdropdown.min.js"></script>
	<script type="text/javascript" src="./lib/jquery.bgiframe.js"></script>
<!--Tambien llamamos a el css que necesitaremos //-->
	<link type="text/css" href="./css/jquery.mcdropdown.min.css" rel="stylesheet" media="all" />

	<script type="text/javascript">
	<!--//
	// on DOM ready
       //este es el codigo que funcionara con jquery y mcdropdown
	$(document).ready(function (){
		$("#current_rev").html("v"+$.mcDropdown.version);
		$("#category").mcDropdown("#categorymenu");
	});
	//-->
	</script>
</head>

<body>

			<h3 id="example">Example</h3>
                      <!--// El codigo de ejemplo, es un iput y una lista //-->
			<p>

				Please select a category:<br />
				<input type="text" name="category" id="category" value="" />
			</p>		

			<ul id="categorymenu" class="mcdropdown_menu">
				<li rel="1">
					Arts &amp; Humanities
					<ul>
						<li rel="2">
							Photography
							<ul>
								<li rel="3">
									3D								</li>

								<li rel="4">
									Digital								</li>
							</ul>
						</li>
						<li rel="5">
							History						</li>
						<li rel="6">
							Literature						</li>

					</ul>
				</li>
				<li rel="7">
					Business &amp; Economy				</li>
				<li rel="8">
					Computers &amp; Internet				</li>

				<li rel="9">
					Education				</li>
				<li rel="11">
					Entertainment
					<ul>
						<li rel="12">
							Movies						</li>
						<li rel="13">

							TV Shows						</li>
						<li rel="14">
							Music						</li>
						<li rel="15">
							Humor						</li>
					</ul>
				</li>

				<li rel="10">
					Health				</li>
			</ul>
			<!--//Fin del codigo de ejemplo //-->

</body>

</html>

Vía | http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm
Y ejemplo vía | Example mcDropdown

]]> http://www.ajaxman.net/ajax-mcdropdown-mejorando-las-listas-desplegables-con-jquery.html/feed 0 [Javascript] Menú deslizante usando Jquery http://www.ajaxman.net/javascript-menu-deslizante-usando-jquery.html http://www.ajaxman.net/javascript-menu-deslizante-usando-jquery.html#comments Wed, 11 Jun 2008 15:35:19 +0000 Ajaxman http://www.ajaxman.net/?p=864 El seraphinux ultimamente le ha dado por escribir mas que de costumbre y gracias ha ello me he encontrado con un menú deslizante echo con Javascript.

Para que se den una idea de que les hablo aquí esta la imagen de menú normal

sliding-top-menu

Y aquí la imagen del menú pero ahora desplazado, o deslizado.

jquery-sliding-menu

Esto fue hecho gracias a la potencialidad y funcionalidad de Jquery, que es muy fácil de adaptarse a cualquier uso.

Veamos como se hizo, siguiendo el ejemplo de la fuente.

Primero necesitamos usar HTML,

[HTML]

Isn’t this nice?

[/HTML]

Ahora le aplicamos el siguiente CSS

[CSS]

[/CSS]

Y para hacerlo funcionar usamos Jquery de la siguiente forma

[JAVASCRIPT]

[/JAVASCRIPT]

Como ven es bastante simple, las imagenes usadas y el ejemplo de esto lo podrán encontrar en

http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/

Aunque ultimamente me ha estado atrayendo bastante Mootools, Jquery sigue teniendo muchisima utilidad.

Estoy planeando algo grande (después de que libere algo que tengo pendiente ups, solo me falta terminar la traducción y listo), que tendrá bastante Ajax y javascript, la pelea esta en que Framework utilizare, tal vez sera Jquery o Mootools, no lo se hagan sus apuestas.

Vía | Menu deslizante con jQuery
Surgio en | Sliding Top Menu With jQuery

]]> http://www.ajaxman.net/javascript-menu-deslizante-usando-jquery.html/feed 1 [Google-Ajax] Google Ajax Libraries API, La gran biblioteca de Librerias Ajax http://www.ajaxman.net/google-ajax-google-ajax-libraries-api-la-gran-biblioteca-de-librerias-ajax.html http://www.ajaxman.net/google-ajax-google-ajax-libraries-api-la-gran-biblioteca-de-librerias-ajax.html#comments Wed, 28 May 2008 17:36:03 +0000 Ajaxman http://www.ajaxman.net/?p=823 Leyendo el blog de Andrés Nieto veo una nueva iniciativa de Google, se llama:

Google Ajax Libraries API

Que viene siendo una especie de lugar donde se almacenaran librerías Ajax, (como Jquery, Mootools, Prototype, Etc..), y las cuales estarán accesibles a todo el publico.

Las librerias/Frameworks disponibles en este momento son

Las ultimas 4 no son Librerias JS, sin embargo tambien forman parte de este abanico de posibilidades.

Su implementación/uso es simple y de la siguiente forma:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Esto es para cargar Jquery, para cargar alguna de las otras librerías JS, debemos cambiar la ruta del script(SRc) por alguna de las siguientes:


//jQuery

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

// Prototype

http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js

//Script.aculo.us

http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js

//MooTools

http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js

//Dojo

http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js

También se pueden agregar dichas librerías usando funciones de la api de Google, para ello, necesitaremos cargar la api de google y llamar lo que deseemos como el siguiente ejemplo

<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript"><!--
// Load jQuery
google.load("jquery", "1");

// on page load complete, fire off a jQuery json-p query
// against Google web search
google.setOnLoadCallback(function() {
$.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&;v=1.0&;callback=?",

// on search completion, process the results
function (data) {
if (data.responseDate.results &&
data.responseDate.results.length>0) {
renderResults(data.responseDate.results);
}
});
});
// --></script>

Como pudimos ver la carga se realizo usando la función google.load, la cual funciona de la siguiente forma:


google.load(name, version, opt);

Como podemos observar se utilizan 3 parámetros, los cuales son, el nombre de la librería, la versión de dicha librería, y el ultimo parámetro, que es opcional es para indicar algunas opciones para personalizar mejor la carga de dicha librería, por ejemplo si la deseamos comprimida o no, entre otras opciones mas.

Ejemplo de carga

//con 2 parametros
google.load("jquery", "1.2.3");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

//con 3 parametros
google.load("mootools", "1.11", {uncompressed:true});

Andrés también comenta que el segundo parámetro tiene la opción de que si no indicas exactamente que versión utilizaras, es decir sin pones por ejemplo usar “scriptaculous con la version 1.8″, google automaticamente te mandara ultima versión que haya salido de dicha rama por ejemplo la “1.8.1″.

Google ahora esta explotando una parte que la tenia olvidada, que es, la potencialidad y la necesidad de usar librerías ajax, aunque yo preferiría tener alojadas las librerías que uso en mi propio server, yo creo que es una buena iniciativa de Google, aunque también no hay que depender siempre de Google.

Para completar este post pueden leer la fuente | Google Ajax Libraries API, ajax sobre la arquitectura Google

]]> http://www.ajaxman.net/google-ajax-google-ajax-libraries-api-la-gran-biblioteca-de-librerias-ajax.html/feed 0 [Javascript - Jquery] Jhon Resig: aprendiendo javascript, y jQuery http://www.ajaxman.net/javascript-jquery-jhon-resig-aprendiendo-javascript-y-jquery.html http://www.ajaxman.net/javascript-jquery-jhon-resig-aprendiendo-javascript-y-jquery.html#comments Tue, 01 Apr 2008 05:38:43 +0000 Ajaxman http://www.ajaxman.net/?p=667 Mientras siguo desarrollando el proyecto que me ha llevado mas tiempo de lo previsto, veo que los recursos para los desarrolladores web no paran de fluir.

El maestro Jhon Resig, que ya nos tiene acostumbrados a sus platicas, nos presenta un video en donde vemos el uso de Javascript, con algunos trucos que nos seran de gran utilidad.

Son consejos simples, en donde tambien vemos el uso/manejo del DOM, y por supuesto el manejo de Jquery, es en ingles, pero como muchos lo dominan bastante bien, se que no les sera dificil, les dejo el video a ver que les parece.

Javascript y Jquery

Pinche aquí para ver el vídeo

Y tambien les dejo el PDF de la presentacion para que puedan ver todo lo que se trato en el video

Descargar aqui PDF javascript y Jquery

Via | JavaScript Talk at Northeastern

]]> http://www.ajaxman.net/javascript-jquery-jhon-resig-aprendiendo-javascript-y-jquery.html/feed 0