Archive for category: JQuery

15Ago 2009 2 Comments */?>

jqTransform : Aplica estilo a tus formularios de una forma sencilla

Categories: JQuery, Recursos - Tags:

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

26Jul 2009 3 Comments */?>

Crear gráficos dinámicos con JQuery Visualize

Categories: JQuery, Recursos - Tags: ,

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.

25Jul 2009 9 Comments */?>

Como crear una página de lanzamiento con PHP, AJAX y JQuery

Categories: JQuery, MySQL, PHP, Tutoriales - Tags: ,

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

18Jul 2009 26 Comments */?>

JQuery.ScrollTo , Olvidate de usar anchors aburridos

Categories: JQuery, Tutoriales - Tags:

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
<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

Update: Por si quieren probar otra solución – scroll con jquery sin plugins
18Jul 2009 20 Comments */?>

Como seleccionar / deseleccionar todos los checkbox con JQuery

Categories: JQuery, Tutoriales - Tags:

Les voy a enseñar como crear un boton para seleccionar o deseleccionar todos los checkbox de un formulario al mismo tiempo con una sola linea de JQuery. En el último programa que realize necesite crear diferentes menus desplegables con diferentes opciones para así poder realizar búsquedas más detalladas . Pueden echar un vistazo a la demo si quieren ver como funciona (user: demo pass:demo).

checkall

En esta ocasión disponía de diferentes DIVS con sus respectivas opciones por lo que cada botón debe responder a los checkboxs de cada DIV. Partiendo del ejemplo de la foto, si tenemos el siguiente código:

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
<div id="tipos_trabajo" style="display: block;">
      <form id="search_form" action="busquedas.php" accept-charset="utf-8" method="post">
             //Boton que se encarga de seleccionar/ deseleccionar los checkbox
            <input id="checkAll" onclick="checkTodos(this.id,'tipos_trabajo');" name="checkAll" type="checkbox" />
                <ul>
                  <li name="tipotrabajo">
                           <input class="check" type="checkbox" value="1" name="tipotrabajo[]"/>
                           Caldereria
                  </li>
                  <li name="tipotrabajo">
                           <input class="check" type="checkbox" value="2" name="tipotrabajo[]"/>
                           Electricidad
                  </li>
                  <li name="tipotrabajo">
                           <input class="check" type="checkbox" value="3" name="tipotrabajo[]"/>
                           Redes
                  </li>
                  <li name="tipotrabajo">
                           <input class="check" type="checkbox" value="10" name="tipotrabajo[]"/>
                           Carpinteria
                  </li>
                  <li name="tipotrabajo">
                           <input class="check" type="checkbox" value="15" name="tipotrabajo[]"/>
                           Mecánica
                  </li>
             </ul>
      </form>
</div>

Como pueden ver se trata de un simple DIV con id=”tipos_trabajo” el cual contiene un formulario con una serie de checkboxs ordenados dentro de una lista .
El primer checkbox va a ser el encargado de marcar o desmarcar el resto y para ello llama en el evento onClick a la función “checkTodos” pasandole dos atributos. Primero le pasa su propio id que en este caso es “checkAll” y el id de el DIV contenedor que es “tipos_trabajos” . Si en ves de un DIV tenemos todos los checkbox dentro de una tabla este último dato seria el id de la tabla.

Una ves que tenemos el código HTML pasemos a ver el codigo javascript.

busquedas.js

1
2
3
4
5
function checkTodos (id,pID) {
 
				   $( "#" + pID + " :checkbox").attr('checked', $('#' + id).is(':checked')); 
 
   			}

Como pueden ver la función checkTodos tan solo necesita una linea de JQuery que paso a explicar a continuación:

$( “#” + pID + ” :checkbox”) Selecciona todos los elementos checkbox dentro del DIV con id= “tipos_trabajo”.

.attr(‘checked’, $(‘#’ + id).is(‘:checked’)); Primero comprueba si el checkbox con id “checkAll” esta checked y devuelve true o false segun el estado. Por lo que si devuelve true asigna el atributo checked, y si devuelve false no lo asigna.

$( “#” + pID + ” :checkbox”).attr(‘checked’, $(‘#’ + id).is(‘:checked’)); Por lo que resumiendo según el estado del checkbox con id=”checkAll” al hacer click , se le asigna el atributo checked o no a todos los checkbox dentro del DIV con id= “tipos_trabajos”.

Como pueden ver es muy simple de hacer y se usa muy poco código.

Ver ejemplo online
Descargar Ejemplo

09Jul 2009 16 Comments */?>

Como redondear las esquinas de un DIV con jquery.corners

Categories: JQuery, Tutoriales - Tags: ,

Si hay algo que me gusta usar en mis proyectos son cuadros con esquinas redondeadas. Siempre queda bien y le da un aire moderno a la web. Es muy facil de hacer y tiene un monton de utilidades como por ejemplo para marcos de fotos, redondear tablas, botones o simplemente divs redondos.

rounded

Hay infinidad de plugins que cumplen esta función pero a mi el que más me gusta es JQuery Corners.

Para utilizarlo como siempre debemos utilizar la ultima version de JQuery y del plugin.

1
2
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>

Con esto tendriamos el plugin cargado. En este ejemplo voy a hacer que tanto el div como la foto tengan tengan la clase “rounded” por lo que para aplicar el plugin hago lo siguiente:

1
2
3
4
5
6
7
<script type="text/javascript">
 
$(document).ready(function(){
//espero que cargue el DOM y aplico el plugin a todos los elemento con clase rounded
	$('.rounded').corners();
		});
</script>

Tan solo nos quedaria añadir el código HTML :

1
2
3
4
5
<div id="wrapper">
<div id="cuadro1" class="rounded"> Div con gif degradado de fondo </div>
 
<img id="cuadro2" class="rounded" src="images/gatito.jpg"/>  Marco para foto redondo 
</div>

Y aplicarle un 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
<style>
body {
color:#666666;
font-family:'Trebuchet MS',sans-serif;
font-size:14px;
line-height:1.5em;
text-align:justify;
}
#cuadro1{
	background:#D7E9F3 url(images/intro2.gif) repeat-x scroll left top;
	margin-bottom:50px;
	padding:30px 80px;
}
#cuadro2{
	padding:10px;
	background-color:#EEEEEE;
    border:1px solid #CCCCCC;
	margin-right:50px;
}
#wrapper{
	width:370px;
	margin:0 auto;
}
</style>

Otra cosa a tener en cuenta es que podemos pasarle opciones como por ejemplo un radio de 8px y que sea transparente (en caso de tener imagenes o hover states):

1
$('.rounded').corners("8px transparent");

Pueden ver el ejemplo terminado en esta página.

Descargar Ejemplo

ACTUALIZACIÓN
Como menciona Jereny en IE no redondea las imágenes. Si quieren hacer un marco para la imagen redondeado lo pueden hacer de la siguiente forma:

1
<div id="cuadro2" class="rounded"><img  src="images/gatito.jpg"/></div>  Marco para foto redondo

El código CSS varia en cuanto a IE como Firefox

1
2
3
4
5
#cuadro2{
	padding:10px;
	background-color:#EEEEEE;
        border:1px solid #CCCCCC;  <------ ESTA LINEA NO FUNCIONA EN IE, ya que no redondea el borde
	}
08Jul 2009 14 Comments */?>

240 plugins para JQuery, lo mejor de lo mejor

Categories: JQuery, Recursos

Les dejo un listado con unos 240 plugins para JQuery. No hay mucho más para decir , simplemente es un listado con algunos de los más conocidos y en las más variadas categorias. Si conocen más porfavor añadan

Validación de formularios

jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV – form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.

Subida de archivos

Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.

Formularios – cajas de selección

jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery – LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).

Formularios básicos, campos de entrada, chechboxes y otros

jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.

Hora, fecha y selectores de color

jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.

Complementos para votar (Rating plugins)

jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.

Complementos de búsqueda

jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHP&MySQL).
quick Search jQuery Plugin.

EdiInline Edit & Editors

jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable – edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin – Another In-Place Editor.
TableEditor.
tEditable – in place table editing for jQuery.

Audio, Video, Flash, SVG, etc

jMedia – accessible multi-media embedding.
JBEdit – Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.

Fotos/Imagenes/Galerias

ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery – jqGalViewII.
jQuery – jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs – easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface & Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi – Zoomable Thumbnails.
jQuery Crop – crop any image on the fly.
Image Reflection.

Google Map

jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery & Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps – by Tane Piper.

Juegos

Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).

Tablas, cuadrículas etc.

UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter – awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable – in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.

Graficos, presentaciones etc.

jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.

Bordes, esquinas, fondos

jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.

Textos y enlaces

jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad – a text gradient plugin