Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más » jquery.plugin http://www.masquewordpress.com Tutoriales y recursos web sobre JQuery , PHP, Wordpress , twitter. Aprende diseño web y programación Mon, 06 Feb 2012 15:02:11 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Plugin jQuery para limitar caracteres en un campo de texto http://www.masquewordpress.com/plugin-jquery-para-limitar-caracteres-en-un-campo-de-texto/ http://www.masquewordpress.com/plugin-jquery-para-limitar-caracteres-en-un-campo-de-texto/#comments Thu, 06 Oct 2011 15:36:02 +0000 Damian http://masquewordpress.com/?p=811

[offtopic] Antes de empezar este artículo quiero dar mis condolencias a la Familia Jobs. Para mi Steve Jobs siempre fue un grande , incluso antes de enamorarme de sus productos y SO. Siempre recomiendo ver un discurso dado por el para los alumnos de Standford Bridge. Lo pueden encontrar en http://www.youtube.com/watch?feature=player_embedded&v=14v3kV47oZU [/offtopic]

Hoy les voy a enseñar 2 cosas. Como limitar los caracteres de un campo de texto ya sea un textarea o un input y como crear un plugin de Jquery.

Lo primero que necesitamos en un nuevo formulario dentro de una página HTML y le vamos a agregar un etiqueta span que será donde mostremos los caracteres que nos quedan con id=”counter”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script  type="text/javascript">
        $(document).ready(function() {
        //Nuestras funciones jQuery
        });
    </script>
</head>
<body>
    <form  id="formulario"  method="POST" action="?">
    <textarea  id="text"></textarea>
    <span  id="counter"></span>
    <input type="submit"  value="submit">
</form>
</body>
</html>

Ahora escribamos nuestra función para mostrar cuantos caracteres nos quedan.

1
2

var caracteres= 100;
$("#counter").html("Te quedan <strong>"+ caracteres+"</strong> caracteres");

Creamos una función que en el evento keyup que compruebe que la cantidad de caracteres escritos no es mayor que el limite que establecimos anteriormente. En caso contrario borra el valor de campo que excede dicho limite:

1
2
3
4

$("#text").keyup(function(){
    if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
}

Explicando un poco esta función vemos que cada vez que se levanta el dedo de un tecla obtenemos el length(cantidad) de caracteres del valor(val) de nuestro campo de texto y lo comparamos con la cantidad estipulada anteriormente.
Si es mayor el valor del campo es sustituido por el valor actual menos el limite estipulado. Es decir, con la función substr recortamos la cadena de texto desde el caracter 0 hasta 100 y el resultado sustituye el valor del campo de texto.

Ahora cambiemos la frase de nuestro counter.

1
2

var  quedan = caracteres - $(this).val().length;
$("#counter").html("Te quedan <strong>"+ quedan+"</strong> caracteres.");

Aquí solamente restamos el limite establecido menos la cantidad de caracteres de nuestro campo.

Y si queremos agregarle un toque de color podemos hacer lo siguiente:

1
2
3
4
5
6
7
8

if(quedan <= 10)
{
    $("#counter").css("color","red");
}
else
{
    $("#counter").css("color","black");
}

Si nos quedan menos de diez caracteres , nuestro mensaje se volvera rojo!

El script entero entonces queda de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(document).ready(function()  {
    var caracteres = 220;
    $("#counter").html("Te quedan <strong>"+  caracteres+"</strong> caracteres.");
    $("#text").keyup(function(){
        if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
        }
    var quedan = caracteres -  $(this).val().length;
    $("#counter").html("Te quedan <strong>"+  quedan+"</strong> caracteres.");
    if(quedan <= 10)
    {
        $("#counter").css("color","red");
    }
    else
    {
        $("#counter").css("color","black");
    }
    });
});

Pueden ver el ejemplo funcionando en http://jsfiddle.net/sa4HH/

Crear un Plugin jQuery para delimitar los campos de texto

Por lo general vamos a necesitar este código en más de una ocasión y para varios campos de texto, por lo que repetir todo una y otra vez no es aceptable. En este caso nos conviene crear un simple plugin de jQuery que será facil de aplicar.
Para ello siguiendo la lógica de jQuery vamos a crear la base de nuestro plugin que lo vamos a llamar “limitar”:
¡

1
2
3
4
5
6
7
8

(function($){
    $.fn.limitar = function(options) {
      defaults = {
        limite: 200,
        id_counter: false,
        clase_alert: false
     }
   var options = $.extend(defaults,  options);

Al declarar nuestro plugin limitar hemos creado unos valores por defecto que paso a explicar.

  • limite: Es el límite por defecto. En este caso 200 caracteres.
  • id_counter: Es el id del campo donde mostraremos el mensaje de caracteres faltantes. Por defecto es false, por lo que no mostraríamos ningún mensaje.
  • clase_alert: En lugar de cambiar el color si los caracteres son menos que diez vamos a asignarle un clase para así dar más libertad a la hora de aplicar estilo a este mensaje de alerta. Por defecto no se asigna ninguna clase ya que es false.

Ahora debemos terminar la función de nuestro plugin:

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

return this.each(function() {
    var caracteres = options.limite;
    if(options.id_counter != false)
    {
        $("#"+options.id_counter).html("Te quedan <strong>"+ caracteres +"</strong> caracteres.");
    }
    $(this).keyup(function(){
        if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
        }
        if(options.id_counter != false)
        {
            var quedan =  caracteres - $(this).val().length;
            $("#"+options.id_counter).html("Te quedan <strong>"+ quedan +"</strong> caracteres");
            if(quedan <= 10)
            {
                $("#"+options.id_counter).addClass(options.clase_alert);
            }
            else
            {
                $("#"+options.id_counter).removeClass(options.clase_alert);
            }
        }
    });
});

Estamos replicando nuestra función del principio con la única diferencia que usamos los valores dentro del array options para dar más flexibilidad al código y miren que sin por ejemplo options.id_counter es false nunca mostraremos el mensaje.

El plugin entero que debemos guardar como jquery.limitar.js quedaría de la siguiente forma:

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
31
32
33
34
35

(function($){
    $.fn.limitar = function(options) {
      defaults = {
        limite: 200,
        id_counter: false,
        clase_alert: false
     }
   var options = $.extend(defaults,  options);
   return this.each(function() {
    var caracteres = options.limite;
    if(options.id_counter != false)
    {
        $("#"+options.id_counter).html("Te quedan <strong>"+ caracteres +"</strong> caracteres.");
    }
    $(this).keyup(function(){
        if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
        }
        if(options.id_counter != false)
        {
            var quedan =  caracteres - $(this).val().length;
            $("#"+options.id_counter).html("Te quedan <strong>"+ quedan +"</strong> caracteres");
            if(quedan <= 10)
            {
                $("#"+options.id_counter).addClass(options.clase_alert);
            }
            else
            {
                $("#"+options.id_counter).removeClass(options.clase_alert);
            }
        }
    });
});
};
})(jQuery);

Para usarlo tan solo debemos llamarlo de la siguiente manera (no se olviden de crear la clase para dar estilo al mensaje de alerta):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script  type="text/javascript" src="jquery.limit.js"></script>
<style>
.alert{
    color: red;
    font-weight:bold;
}
</style>
<script  type="text/javascript">
    $(document).ready(function() {
        $("#testo").limitar({
            limite: 100,
            id_counter: "counter",
            clase_alert: "alert"
            });
         });
</script>

Pueden ver el ejemplo funcionando en http://jsfiddle.net/V7Gs6/1/

Saludos!!!!!

]]> http://www.masquewordpress.com/plugin-jquery-para-limitar-caracteres-en-un-campo-de-texto/feed/ 4 Introducción a JQuery Template plugin jquery.tmpl.js http://www.masquewordpress.com/introduccion-a-jquery-template-plugin-jquery-tmpl-js/ http://www.masquewordpress.com/introduccion-a-jquery-template-plugin-jquery-tmpl-js/#comments Wed, 13 Oct 2010 22:28:52 +0000 Damian http://masquewordpress.com/?p=667 Hace poco el equipo de JQuery anuncio que el  plugin de templates de Microsoft es ahora soportado oficialmente. Esto quiere decir que el propio equipo de JQuery se va a encargar de su desarollo y actualizaciones. A continuación les explico como integrarlo y usarlo de una forma sencilla.

Para este ejemplo vamos a utilizar mis últimos tweets en Twitter de manera que sirvan para rellenar el template que vamos a crear previamente.

1. El primer paso es integrar JQuery y el plugin de templates

1
2

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

2. Creamos el template

1
2
3
4
5
6
7
8
9
10

<script id="tweets" type="text/x-jquery-tmpl">
	<li>
		<img src="${imgSource}" alt="${username}" />
		<h2> ${username} </h2>
		<p> ${tweet} </p>
		{{if geo}}
		<span> ${geo} </span>
		{{/if}}
	</li>
</script>

Cabe destacar que:

  • Nuestro template se encuentra dentro de las tags <script> y el type usado es text/x-jquery-tmpl
  • Las variables tienen el siguiente formato ${nombreDeVariable}
  • Se pueden crear sentencias if de la siguiente manera {{if condicion}} sentencia a ejecutar {{/if}}

3. Buscamos algun dato para renderizar en nuestro template

En este caso usando la SEARCH API de Twitter obtenemos los últimos resultados donde mencionan mi cuenta de twitter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script>
 
 $.ajax({
    type : 'GET',
    dataType : 'jsonp',
    url : 'http://search.twitter.com/search.json?q=chifliiiii',
 
    success : function(tweets) {
       var twitter = $.map(tweets.results, function(obj, index) {
          return {
             username : obj.from_user,
             tweet : obj.text,
             imgSource : obj.profile_image_url,
             geo : obj.geo
          };
       });
    }
});
 
</script>

Como veran usamos las variables definidas en el paso anterior para almacenar los varoles devueltos.

4. Creamos el espacio donde actuara nuestra template

Si recuerdan nuestra template no era más que un elemento <li> de una lista desordenada. Por lo que debemos crear dicha lista.

1

<ul id="tweets"> </ul>

5. Enlazamos los datos al template y lo introducimos a la lista

1

$('#tweets').tmpl(twitter).appendTo('#twitter');
  • Seleccionamos el script (template) con id = tweets
  • Le pasamos el array twitter creado con .map al template
  • Añadimos lo anterior a la lista con id twitter

Y con eso ya estaría todo en su sitio de manera que todo junto quedaría de la siguiente forma:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!DOCTYPE HTML>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="style.css" />
 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script src="jquery.tmpl.js"></script>
   </head>
   <body>
 
      <h1> Algunos tweets de mi cuenta </h1>
 
      <script id="tweets" type="text/x-jquery-tmpl">
         <li>
            <img src="${imgSource}" alt="${userName}" />
            <h2> ${username} </h2>
            <p> ${tweet} </p>
 
            {{if geo}}
            <span>
               ${geo}
            </span>
            {{/if}}
         </li>
      </script>
 
      <ul id="twitter"></ul>
 
      <script>
         $.ajax({
            type : 'GET',
            dataType : 'jsonp',
            url : 'http://search.twitter.com/search.json?q=chifliiiii',
 
            success : function(tweets) {
               var twitter = $.map(tweets.results, function(obj, index) {
                  return {
                     username : obj.from_user,
                     tweet : obj.text,
                     imgSource : obj.profile_image_url,
                     geo : obj.geo
                  };
               });
 
               $('#tweets').tmpl(twitter).appendTo('#twitter');
            }
      });
 
      </script>
   </body>
</html>

Un saludo y hasta la proxima!!!

Via | Nettuts+

]]> http://www.masquewordpress.com/introduccion-a-jquery-template-plugin-jquery-tmpl-js/feed/ 2 Estadísticas del blog – Septiembre 2010 http://www.masquewordpress.com/estadisticas-del-blog-septiembre-2010/ http://www.masquewordpress.com/estadisticas-del-blog-septiembre-2010/#comments Fri, 01 Oct 2010 00:52:04 +0000 Damian http://masquewordpress.com/?p=647 Es la primera vez que comparto la estadísticas del blog con ustedes. La verdad que nunca antes me dio por hacerlo ya que no eran gran cosa.
A día de hoy aunque no tiene ni comparación con otras webs la cifra ya me hace sentir un poco de algo llamado orgullo, y como este sentimiento es gracias a todos ustedes ( si, vos que estas leyendo esto) me pareció sensato publicar las estadísticas y de paso aprovechar para dar las gracias a ese porcentaje de gente que sigue viniendo de vez en cuando a ver si encuentra algo interesante. Dicho lo dicho una vez más te doy las gracias y pasemos a los números:

estadísticas del blog

Es la primera vez que rondo las 7000 visitas por mes, estos dos últimos meses venía rondando las 5000 y la verdad que cada vez crece más rápido. Esperemos que siga así.

Creo que este incremento se debe principalmente a los últimos plugins que realice tanto de WordPress como de JQuery y el intentar escribir cosas que están a la última.

Páginas más vistas

  1. Actualizar Twitter a traves de PHP y OAuth | Timersys – 427 Views
  2. Timersys – 411 Views
  3. Como redondear las esquinas de un DIV con jquery.corners | Timersys – 369 Views
  4. JQuery.ScrollTo , Olvidate de usar anchors aburridos | Timersys – 360 Views
  5. JcubeiT Plugin – 322 Views

Top Referrers

  1. plugins.jquery.com – 169 Visitas
  2. meneame.net – 101 Visitas
  3. forosdelweb.com – 80 Visitas
  4. google.es – 78 Visitas
  5. google.com.mx – 59 Visitas

Top Búsquedas

  1. jquery scrollto – 52 Visitas
  2. enviar formulario jquery – 35 Visitas
  3. redondear div jquery – 35 Visitas
  4. scrollto jquery – 35 Visitas
  5. ajax auto suggest – 21 Visitas

No se si esperaban más o menos visitas, pero la verdad que las que hay me hacen feliz así que me despido dándoles las gracias una vez más.

]]> http://www.masquewordpress.com/estadisticas-del-blog-septiembre-2010/feed/ 2 JcubeiT – Plugin JQuery para hacer cubos con HTML5 http://www.masquewordpress.com/jcubeit-plugin-jquery-para-hacer-cubos-con-html5/ http://www.masquewordpress.com/jcubeit-plugin-jquery-para-hacer-cubos-con-html5/#comments Tue, 15 Jun 2010 22:48:32 +0000 Damian http://masquewordpress.com/?p=427 Buenas tardes!! Como ven sigo experimentando y haciendo plugins para JQuery.

Hoy se me dio por hacer uno bastante gracioso basado en las explicaciones de lanrat acerca de como construir un cubo usando las nuevas propiedades CSS.

Su utilización es muy sencilla, tan solo necesitamos 3 objetos ( las caras visibles del cubo) dentro de un objeto contenedor. Dichos objetos pueden ser links , imágenes, otros divs, etc

1
2
3
4
5

<div class="cube">
<div><img src="1.jpg" /></div>
<div><img src="2.jpg" /></div>
<div><img src="3.jpg" /></div>
</div>

Una vez que tenemos nuestra estructura HTML armada debemos aplicar el plugin de la siguiente forma:

1
2
3
4
5
6
7
8

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jcubeit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						   $('.cube').JcubeiT();
 
						   });
</script>

Y voila!! Tendremos un cubo perfecto con el cual podremos hacer un poco más original nuestros diseños.

El plugin posee algunos valores por defecto que se pueden cambiar pasando opciones.

  • size:’200px’
  • background: ‘#666′
  • border: true
  • borderColor: ‘#000′
  • rounded: false

Podemos cambiar estos valores pasando las opciones como se suele hacer en JQuery

1
2
3
4
5

var opciones={ size:'100px' , border: false};
$('.cube').JcubeiT(opciones);
 
//o simplemente
$('.cube').JcubeiT({ size:'100px' , border: false});

Jugando con las opciones podremos crear por ejemplo una barra de menu más original

Pueden ver el ejemplo online o descargarse el código desde la página oficial de JQuery

ENGLISH

Hello!As you see im still experiencing and doing plugins for JQuery

Today I did a pretty funny one based on the explanations of lanrat about how to build a cube using new CSS properties.

Its use is very simple, you only need 3 objects (the visible faces of the cube) inside of a container object. Such objects could be links, images, other divs, etc.

1
2
3
4
5

<div class="cube">
<div><img src="1.jpg" /></div>
<div><img src="2.jpg" /></div>
<div><img src="3.jpg" /></div>
</div>

Once we have our HTML structure we have to apply the plugin like this:

1
2
3
4
5
6
7
8

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jcubeit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						   $('.cube').JcubeiT();
 
						   });
</script>

And voila! We will have a perfect cube to be a little more original in our designs.

The plugin has some defaults values that can be changed via the options var.

  • size:’200px’
  • background: ‘#666′
  • border: true
  • borderColor: ‘#000′
  • rounded: false

We may change these values from the options as is usually done in JQuery

1
2
3
4
5

var opciones={ size:'100px' , border: false};
$('.cube').JcubeiT(opciones);
 
//or just
$('.cube').JcubeiT({ size:'100px' , border: false});

Playing with the options we can create for example a more original menu bar

You can check the online demo or download the plugin from JQuery

]]> http://www.masquewordpress.com/jcubeit-plugin-jquery-para-hacer-cubos-con-html5/feed/ 1 JQuery nightMode Plugin http://www.masquewordpress.com/jquery-nightmode-plugin/ http://www.masquewordpress.com/jquery-nightmode-plugin/#comments Sat, 01 May 2010 16:11:50 +0000 Damian http://masquewordpress.com/?p=387 Download JQuery nightMode Plugin

/////////////////////////ESPAÑOL //////////////////////

Anoche estaba aburrido y me puse a trabajar en un plugin para JQuery ya que nunca habia echo ninguno . Así nacio nightMode Plugin que es simplemente un script chiquitito que cambia el color de las letras y el fondo de pantalla. Con eso logramos ahorrar un poco de energia apagando algunos pixeles de nuestra pantalla y además nos facilita la lectura. Espero que les guste!!

El color tanto de las letras o el fondo se puede cambiar pasando opciones.

Uso:

1

 <a id="nightmode">Turn nightmode On/off</a>
1
2
3
4
5
6

 $(document).ready(function(){
 
               $('#nightmode').click(function(){
                           $('body').nightMode();
                });
 });

Tan solo cambiar body por cualquier selector válido

También se puede ejecutar con opciones

1
2
3
4
5

 var options={
      color: '#ffffff',
     background:'#ccc'
 }
 $('body').nightMode(options);

Pueden probar como funciona haciendo click en la lamparita que aparece en la parte superior derecha de mi blog :D

Descargar JQuery nightMode Plugin

////////////////////////ENGLISH/////////////////////////////

JQuery nightMode Plugin its a funny tiny plugin that will allow you to change your background and letter colors for a night mode. Saving energy turning off pixels of your screen and allowing you to have a confortable read .

Letter colors and background can be moddified by options

Ussage:

1

 <a id="nightmode">Turn nightmode On/off</a>
1
2
3
4
5
6

 $(document).ready(function(){
 
               $('#nightmode').click(function(){
                           $('body').nightMode();
                });
 });

Just change body to any valid selector you wish

Can also be called with options:

1
2
3
4
5

 var options={
      color: '#ffffff',
      background:'#ccc'
 }
 $('body').nightMode(options);

You can try how it works by clicking on the light bulb on the top right corner of my blog :D
Download JQuery nightMode Plugin

]]> http://www.masquewordpress.com/jquery-nightmode-plugin/feed/ 3 Como crear una página de lanzamiento con PHP, AJAX y JQuery – II Parte http://www.masquewordpress.com/como-crear-una-pagina-de-lanzamiento-con-php-ajax-y-jquery-ii-parte/ http://www.masquewordpress.com/como-crear-una-pagina-de-lanzamiento-con-php-ajax-y-jquery-ii-parte/#comments Sat, 15 Aug 2009 21:29:49 +0000 Damian http://masquewordpress.com/?p=222 Hoy les voy a explicar como crear un formulario AJAX para nuestra página de lanzamiento y así poder crear una base de datos con los emails de nuestros visitantes que quieren manternerse actualizados con novedades, etc.

cuenta-atras

Siguiendo la estructura básica de una web vamos a necesitar varios archivos para lo que queremos hacer:

Como ya tenemos definido el archivo db.php tal y como se explico en su día , pasamos al archivo ajax_usuarios.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
// compruena la variable $_POST 
if(isset($_POST['email']) && $_POST['email']!= ''){
     /* Conectamos a la base de datos */
     include('config/db.php');
     $conn=get_db_conn();
     /* Protejo SQL injection */
     $email = cleanQuery($_POST['email']);
     /* Realizo consulta SQL */
     $query = "INSERT INTO listado_emails (email) VALUES ('$email')";
     mysql_query($query,$conn);
    // Mensaje de respuesta
     echo $email .' fue ingresado a la base de datos correctamente!!!!!!';
} else { 
     // En caso de q la variable no este iniciado o no tenga caracteres el mensaje de respuesta es el siguiente
 echo 'Hubo un error, intenta otra ves.'; 
}
?>

El código de index.php también va a cambiar ya que agregamos nuevos plugins de JQuery y el formulario para ingresar emails

index.php

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Timersys</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<link href="css/jqtransform.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="js/jquery.epiclock.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
	// Cuenta atras					   
	   jQuery('#text').epiclock({mode: EC_COUNTDOWN, format: 'V{<sup>dias</sup>} x{<sup>horas</sup>} i{<sup>minutos</sup>} s{<sup>segundos</sup>}', target: 'January 1, 2012 00:00:00'}).clocks(EC_RUN);  
 
	   //Esquinas redondeadas
	   $('.rounded').corners('transparent');
 
	   //Transformar el formulario
	   $("form.jqtransform").jqTransform();
 
 
	   // definimos las opciones del plugin AJAX FORM
            var opciones= {
 
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario email_list y le pasamos las opciones
            $('#email_list').ajaxForm(opciones) ;
 
             //lugar donde defino las funciones que utilizo dentro de "opciones"
 
             function mostrarRespuesta (responseText){
                          $("#update").fadeOut("slow"); // Hago desaparecer el formulario
                          $("#succes").fadeIn("slow").html(responseText); //muestro mensaje 
             };
 
 
		});
</script> 
 
</head>
<body>
 
<div id="header">
  <h3>Como crear una P&aacute;gina de lanzamiento. M&aacute;s tutoriales en: <a href="http://masquewordpress.com">http://masquewordpress.com</a> </h3>
</div>
<div id="wrapper">
	<div id="cuadro2" class="rounded">
	<div id="text" class="count_down"></div>
	</div>
    <div id="update">
 
    <form id="email_list" class="jqtransform" action="ajax_usuarios.php" method="post">
    <input type="text" class="input_text" name="email" value="Ingresa tu email para recibir actualizaciones" onclick="this.select();" />
    <input type="submit" value="ENVIAR"  class="input_button" />
     </form>
	</div>
    <div id="succes"></div>
</div>
</body>
</html>

Con esto y un poco de código CSS ya tendriamos nuestra página de lanzamiento lista , y ademas podriamos juntar una base de datos con emails de los usuarios para poder enviarles actualizaciones.

Como siempre pueden ver el EJEMPLO TERMINADO

Y descargar el código fuente .( Recuerden de editar el archivo db.php con los datos de su propia base de datos y crear las tablas necesarias)

]]> http://www.masquewordpress.com/como-crear-una-pagina-de-lanzamiento-con-php-ajax-y-jquery-ii-parte/feed/ 3 jqTransform : Aplica estilo a tus formularios de una forma sencilla http://www.masquewordpress.com/jqtransform-aplica-estilo-a-tus-formularios-de-una-forma-sencilla/ http://www.masquewordpress.com/jqtransform-aplica-estilo-a-tus-formularios-de-una-forma-sencilla/#comments Sat, 15 Aug 2009 21:17:01 +0000 Damian http://masquewordpress.com/?p=251 Con jqTransform nunca fue tan facil modificar el aspecto de un formulario dandole un aire elegante en cualquier navegador.

jqtransform

La forma de implementarlos es como siempre super sencilla:

1- Añadir el plugin a la cabezera de tu web

1

<script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.jqtransform.min.js" type="text/javascript"></script>

2- Escribir un formulario y añadirle la clase correspondiente

1
2
3
4
5

<form class="jqtransform">
 <label for="name">Name: </label>
<input name="name" type="text" />
<input type="submit" value="send" />
</form>

3- Activar el plugin

1
2
3
4
5
6
7
8

<script type="text/javascript">
$(function() {
    //Todos los formularios con clase jqtransform
 
    $("form.jqtransform").jqTransform();
 
});
</script>

Como ven , super sencillo de usar. Para descargarlo visiten la página del autor.

Para ver un ejemplo online pueden ver el usado en este tutorial

]]> http://www.masquewordpress.com/jqtransform-aplica-estilo-a-tus-formularios-de-una-forma-sencilla/feed/ 2 Crear gráficos dinámicos con JQuery Visualize http://www.masquewordpress.com/crear-graficos-dinamicos-con-jquery-visualize/ http://www.masquewordpress.com/crear-graficos-dinamicos-con-jquery-visualize/#comments Sun, 26 Jul 2009 18:12:25 +0000 Damian http://masquewordpress.com/?p=211 Hoy dando una vuelta por la web de Andrés Nieto me encontre con este peculiar plugin llamado JQuery Visualize que se encarga de formar gráficas a partir de los datos de una tabla. Entre sus posibilidades podemos encontrar desde barras normales , areas, gráficas en queso , etc y lo mejor de todo es que si el visitante no dispone de Javascript podra ver la tabla en vez de la gráfica.
jquery.visualize

La forma en que funciona es muy sencilla. Dada una tabla cualquiera como :

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
31
32
33
34
35

<table>
	<caption>2009 Individual Sales by Category</caption>
	<thead>
		<tr>
			<td></td>
			<th>food</th>
			<th>auto</th>
			<th>household</th>
			<th>furniture</th>
			<th>kitchen</th>
			<th>bath</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Mary</th>
			<td>150</td>
			<td>160</td>
			<td>40</td>
			<td>120</td>
			<td>30</td>
			<td>70</td>
		</tr>
		<tr>
			<th>Tom</th>
			<td>3</td>
			<td>40</td>
			<td>30</td>
			<td>45</td>
			<td>35</td>
			<td>49</td>
		</tr>
		...Las columnas repetidas las saco por brevedad
	</tbody>
</table>

Tan solo hay que llamar al plugin de la siguiente forma y el plugin se va a encargar de generar la gráfica a partir de los datos introducidos.

1

$('table').visualize({options});

Además podemos definir las siguiente opciones:

  • type: string. Valors aceptados ‘bar’, ‘area’, ‘pie’, ‘line’. Default: ‘bar’.
  • width: number. Ancho de la gráfica. Por defecto el tamaño de la tabla.
  • height: number. Altura de la gráfica. Por defecto el tamaño de la tabla.
  • appendTitle: boolean. Añadir título a la gráfica. Default: true.
  • title: string. Título de la gráfica. Por defecto se usa el
    de la tabla.
  • appendKey: boolean. Añadir color principal. Default: true.
  • colors: array. Array de colores usados. Default:['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']
  • textColors: array. Array de colores para el texto. Default: [].
  • parseDirection: string. Dirección de parseo de datos de la tabla Acepta ‘x’ e ‘y’. Default: ‘x’.
  • pieMargin: number.Espacio alrededor de la gráfica tipo “Pie”. Default: 20.
  • pieLabelPos: string. Posición del texto de etiqueta en la gráfica tipo “Pie”. Acepta ‘inside’ y ‘outside’. Default: ‘inside’.
  • lineWeight: number. Tamaño de la línea de la gráfica. Default: 4.
  • barGroupMargin: number. Espacio entre barras. Default: 10.
  • barMargin: number.Margenes de la gráfica. Default: 1

Pueden ver una gráfica dinámica desde este enlace o descargar el plugin directamente.
Un saludo a todos.

]]> http://www.masquewordpress.com/crear-graficos-dinamicos-con-jquery-visualize/feed/ 2 Como crear una página de lanzamiento con PHP, AJAX y JQuery http://www.masquewordpress.com/como-crear-una-pagina-de-lanzamiento-con-php-ajax-y-jquery/ http://www.masquewordpress.com/como-crear-una-pagina-de-lanzamiento-con-php-ajax-y-jquery/#comments Sun, 26 Jul 2009 00:12:33 +0000 Damian http://masquewordpress.com/?p=202 En este tutorial les voy a enseñar como hacer una página de lanzamiento como la que en ocasiones nos encontramos cuando visitamos una web sin estrenar con su cuenta atras correspondiente. Además de la cuenta atras más adelante vamos a añadir un pequeño formulario de  contácto con AJAX para añadir emails a una base de datos y asi poder mantener a los visitantes actualizados.

cuenta-atras

Para empezar vamos a necesitar un plugin de JQuery muy completo llamado epiClock que va a ser el encargado de realizar la cuenta atras. La verdad que vale la pena echar una ojeada a la página de epiClock , ya que además de cuentas atras podemos crear todo tipo de relojes, cronometros , etc.

1
2

<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.epiclock.min.js"></script>

Si queremos por ejemplo hacer una cuenta atras hasta el 2012 es tan facil como poner:

1
2
3
4

$(document).ready(function(){
//espero que cargue el DOM y llamo al plugin
  j jQuery('#reloj').epiclock({mode: EC_COUNTDOWN, format: 'V{<sup>dias</sup>} x{<sup>horas</sup>} i{<sup>minutos</sup>} s{<sup>segundos</sup>}', target: 'January 1, 2012 00:00:00'}).clocks(EC_RUN); 
});

Como pueden ver le paso tres parametros a .epiclock :

  • mode: El modo de cuenta atras (countdown).
  • format: El formato que quiero que en este caso es ‘<sup>dias</sup>’ para los dias y así susecivamente.
  • target: El tiempo final del contador pasado en modo de fecha.

Y por último inicio el contador con .clocks(EC_RUN)

Una ves que tengo el reloj definido voy a crear el código HTML necesario para que funcione:

1
2
3
4
5
6
7
8
9

<div id="header">
  <h3>Como crear una P&aacute;gina de lanzamiento. M&aacute;s tutoriales en: <a href="http://masquewordpress.com">http://masquewordpress.com</a> </h3>
</div>
<div id="wrapper">
           <div id="cuadro2" class="rounded">
               <div id="reloj" class="count_down"></div>
           </div>
 
</div>

Y le aplico el siguiente estilo:

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
31
32
33
34
35
36
37
38
39
40
41

body {
color:#666666;
font-family:'Trebuchet MS',sans-serif;
font-size:14px;
line-height:1.5em;
text-align:justify;
}
#header{
 width:800px;
 height:80px; 
 text-align:center;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 } 
#cuadro2{
	padding:15px;
	background-color:#EEEEEE;
    border:1px solid #CCCCCC;
 
}
#wrapper{
	width:440px;
	margin:0 auto;
}
.count_down{
	padding: 3px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:38px;
	font-weight:bold;
	color:#222;
}
 
.count_down sup{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#555;
	padding:0px 10px 0 0;
	font-weight:normal;
}

Como toque final voy a redondear las esquinas del DIV contenedor del reloj con jquery.corners como vimos anteriormente en el blog.

 $('.rounded').corners('transparent');

Y con eso tendriamos nuestra cuentra atras particular. En el próximo tutorial les explico como crear un formulario con AJAX para guardar todos los emails en una base de datos de forma que podamos mantener actualizados con noticias a nuestros seguidores.
Ver Ejemplo Online
Descargar código

]]> http://www.masquewordpress.com/como-crear-una-pagina-de-lanzamiento-con-php-ajax-y-jquery/feed/ 8 JQuery.ScrollTo , Olvidate de usar anchors aburridos http://www.masquewordpress.com/jquery-scrollto-olvidate-de-usar-anchors-aburridos/ http://www.masquewordpress.com/jquery-scrollto-olvidate-de-usar-anchors-aburridos/#comments Sat, 18 Jul 2009 23:01:46 +0000 Damian http://masquewordpress.com/?p=198 Hoy les traigo otro plugin de JQuery que hace la nevagación un poco más facil . Con JQuery.ScrollTo podemos darle movimiento a una ventana o a un anchor por ejemplo. Como el nombre indica básicamente lo que hace es un scroll ( como cuando usamos la ruedita del mouse) tanto en sentido horizontal como vertical o ambos a la vez.

Esto es útil cuando tenemos una página bastante larga y no queremos que los clientes se cansen de ir un lado para otro. Hace unos meses un cliente me pidio una web para mostrar sus productos y queria algo muy sencillo donde todos los productos aparecieran en la página principal. Cuando empeze con la web me di cuenta que tardaba mucho en ir de un lado a otro así que fui poniendo scrolls en diferentes partes de la web para subir al top y despues cree un menu para que haga scroll a los diferentes tipos de productos. Si quieren ver de lo que hablo pueden visitar la web de Photo Momentos.

Para usar este plugin como siempre debemos usar la última versión de JQuery y el plugin JQuery.Scroll

1
2

<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

Para realizar un scroll tan solo debemos crear un link o anchor apuntando al id del elemento destino:

1

<a href="javascript:$.scrollTo('#destino',800);">Destino</a>

Digamos que el destino seria algo así:

1
2

 
<div id="destino">..... Final de la web.....</div>

Más simple imposible…
JQuery.ScrollTo tiene un montón más de opciones como duración, funciones callback , etc… pero lo básico ya esta explicado.
Un saludo a todos y dejen comentarios

Ver Ejemplo
Descargar Ejemplo

]]> http://www.masquewordpress.com/jquery-scrollto-olvidate-de-usar-anchors-aburridos/feed/ 17