Para el que no conoce aun jquery.scrollTo digamos que es un buen momento para hacerlo. Aunque en algunas ocasiones le comento que para tareas sencillas no suelo utilizar plugins, en otras situaciones un plugin nos pueda ayudar a crear efectos sorprendentes de manera muy fácil.
Hoy les traigo jquery.ascensor.js , un plugin que en conjuto con el plugin de scrollTo os permitira crear efectos sorprendentes.
[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.
Read more
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.
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:
Read more
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.
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
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.
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
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 😀
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 😀
Download JQuery nightMode Plugin
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.
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ágina de lanzamiento. Má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)
Últimos Comentarios