(Ver Imagen)

(Ver Imagen)

Artículos relacionados

• Links para hacernos la vida más facil.
• Crea estructuras de forma semántica
• Javascript Developer Tools
• jQuery Tools, herramientas para usar con tu jQuery
• Herramientas para ayudarnos con el día a día

(Ver Imagen) Entre estos 15 plugins jQuery, seguro que encuentras algo para hacer que tus tablas de datos no sean planas y sin opciones.

DataTables

Permite:

• Edición al vuelo
• Carga de datos con Ajax
• Paginación
• Multiordenación por columnas
• Extensible por plugins
• Personalizable por CSS
• Idiomatizable

uiTableFilter

Permite:

• Filtrar datos al vuelo

Scrollable HTML Table

Permite:

• Usar la estructura HTML
• Limitar el alto y ancho de la tabla

Tablesorter

Permite:

• Multiordenación por columnas
• Extensible mediante widgets

Flexigrid

Permite:

• Re-dimensionar las columnas
• Re-dimensionar la tabla
• Ordenación por columnas
• Carga de datos mediante Ajax
• Paginación
• Mostrar u Ocultar columnas
• Toolbar inferior con opciones
• Busqueda de datos
• API accesible

HeatColor

Permite:

• Establecer rango de colores para visualizar más fácilmente resultados.

JQTreeTable

Permite:

• Mostrar datos en forma de arbol dentro de tu tabla.

Ingrid

Permite:

• Re-dimensionar columnas
• Paginación
• Ordenación por columna o fila
• Personalización mediante CSS

jQuery ColumnManager plugin

Permite:

• Mostrar u ocultar columnas.

jQuery treeTable

Permite:

• Mostrar datos en forma de árbol.

CSV2Table

Permite:

• Cargar datos de un fichero CSV

Table Pagination

Permite:

• Paginación

jQuery TableRowCheckboxToggle

Permite:

• Cambiar la class de la fila mediante checkboxes (para remarcarlas)

Table Drag and Drop jQuery plugin

Permite:

• Hacer Drag and Drop en filas reordenandolas.

uiTableEdit

Permite:

• Permite editar la tabla por el usuario

Artículos relacionados

• Ordena tablas con JQuery
• Los 37 mejores plugins para jQuery
• Excelentes plugins para jQuery
• Minimalist jQuery: 11 plugins de jQuery que no superan los 4kb de peso
• jQuery UI, jugando con el framework

$(document).ready(function(){
 // Añadimos la funcionalidad al evento scroll de window
 $(window).scroll(function(){
 // Comprobamos si estamos en la parte inferior de la página.
 if ($(window).scrollTop() == $(document).height() - $(window).height()){
 // Mostramos la imagen de cargando
 $('div#last_msg_loader').html('<img src="bigLoader.gif">');
 // Cargamos el contenido.
 var ID=$(".message_box:last").attr("id");
 $.post("load_data.php?action=get&last_msg_id="+ID,
 }
 });
 });
});

Artículos relacionados

• Scrollable, haz fácil el scroll con jQuery
• Easy Scroll, Scroll accesible para tu contenido
• Scrollable List, listados con scroll en jQuery
• ScrollSpy, plugin de MooTools para gestionar el scroll de los usuarios
• Ocultar la barra de navegación en Mobile Safari

var aNieto2k = {
    "edad" : "28",
    "ciudad" : "Palma de Mallorca, ES",
    "genero" : "hombre"
};

alert("aNieto2k tiene " + aNieto2k.edad + " años");

Funciones (no para transportar información)

var aNieto2k = {
    "edad" : "28",
    "ciudad" : "Palma de Mallorca, ES",
    "genero" : "hombre",
    "saludar" : function(aquien) {
    	alert("Hola, soy aNieto2k de " + this.ciudad + ", ¿Como estás " + aquien + "?");
    },
};

aNieto2k.saludar("Usuario");

Arrays

var aNieto2k = {
    "edad" : "28",
    "ciudad" : "Palma de Mallorca, ES",
    "genero" : "hombre",
    "saludar" : function(aquien) {
    	alert("Hola, soy aNieto2k de " + this.ciudad + ", ¿Como estás " + aquien + "?");
    },
    "proyectos":[
    	{
    		"nombre" : 	"iMeneame.net",
    		"url"		 : 	"http://www.imeneame.net"
    	},
    	{
    		"nombre" :	"BlogoEdad",
    		"url"		 :  "http://edad.anieto2k.com"
    	}
    ]
};

var proyectos = aNieto2k.proyectos, html = '';
for (var x = 0 ; x < proyectos.length ; x++) {
	html += '<li><a href="' + proyectos[x].url + '">' + proyectos[x].nombre + '</a></li>';
}

Encadenando objetos JSON

var aNieto2k = {
    "edad" : "28",
    "ciudad" : "Palma de Mallorca, ES",
    "genero" : "hombre",
    "saludar" : function(aquien) {
    	alert("Hola, soy aNieto2k de " + this.ciudad + ", ¿Como estás " + aquien + "?");
    },
    "proyectos":{
    	"imeneame": {
    		"url"		 : 	"http://www.imeneame.net"
	    	},
  	  "blogoedad": {
    		"url"		 :  "http://edad.anieto2k.com"
	    	}
    }
};

var URL = aNieto2k.proyectos.imeneame.url;

Úsos prácticos

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
        });

JSON nativo

// Eval
var myObject = eval('(' + myJSONtext + ')');

// JSON Nativo
var myObject = JSON.parse(myJSONtext);

// Mix
var myObject = (JSON)?JSON.parse(myJSONtext): eval('(' + myJSONtext + ')');

Artículos relacionados

• jQuery.animate, todo lo que siempre quisiste saber
• 5 formas de usar Ajax con jQuery
• Todo lo que necesitas saber sobre los formularios HTML5
• JSON Diff, compara JSON de una forma muy visual
• Javascript JSON Editor, debuguea tu JSON

Artículos relacionados

• Crea un chat en Ajax
• Jaxie, otro chat con Ajax
• yShout 4, mejorando el chat
• Pon un chat en tu web
• YShout v2, Chat ajax+php

(Ver Imagen) Entre las funcionalidades de las que disponemos nos encontramos con:

• Navegación por los ficheros y directorios de tu servidor web
• Renombrar, mover, borrar, copiar y descargar ficheros
• Ver previsualización de imagenes, ficheros de texto, ficheros comprimidos o ficheros de audio
• Interface muy agradable a la vista
• Subir imagenes mediante FancyUpload
• Posibilidad de auto redimencionar imagenes mientras subimos
• Úsalo para seleccionar un fichero de donde quieras que puedes necesitar en el backend de tus aplicaciones
• Integración con TinyMCE

Instalación

var manager = new FileManager({
   url: 'manager.php',
   assetBasePath: '../Assets',
   language: 'en',
   uploadAuthData: {session: 'MySessionId'}
 });
 $('example1').addEvent('click', manager.show.bind(manager));

<?php
include('../Backend/FileManager.php');
$browser = new FileManager(array(
  'directory' => 'Files/',
  'assetBasePath' => '../Assets',
  'upload' => true,
  'destroy' => true,
));
$browser->fireEvent(!empty($_GET['event']) ? $_GET['event'] : null);

Demo

• Demo de FileManager
• Integración con TinyMCE

Descargar

Artículos relacionados

• MooTools 1.2.1 está en la calle
• MooTools 1.2.2
• MooTools Ext Adapter
• MooTools 1.2 cheat sheet
• MooTools 1.2 ve la luz

new io('/results.json', {
    format: 'json',
    method: 'post',
    params: { mustache: true },
    onSuccess: function(response) { 
        alert(response); // response == data returned from server
    }, 
    onFailure: function() { 
        alert('There was an error getting the data');
    }
});

Artículos relacionados

• Framework CSS y XHTML para desarrollar en iPhone y iPod Touch
• PastryKit, framework JS/CSS para trabajar con iPhone de Apple
• Aplicación nativa de Worpdress para iPhone disponible
• ¿Como se verá Digg desde el iphone?
• aNieto2k en el iPhone

XML

....
<hotel>
	<code>0000</code>
	<name>Hotel0</name>
	<direction>Calle0</direction>
	<telef>Telf0</telef>
	<geo>
		<lat>00</lat>
		<lng>00</lng>
	</geo>
</hotel>
....
// Javascript
var hotelDescription = data, hotelList = [];
var data = data.getElementsByTagName("hotel");
for (var x in data) {
	var hotel = data[x];
	if (!hotel.getElementsByTagName) continue;
	hotelList.push(hotel.getElementsByTagName("name")[0].firstChild.data);

		hotelDescription[hotel.getElementsByTagName("name")[0].firstChild.data] = {
			code: hotel.getElementsByTagName("code")[0].firstChild.data,
			name: hotel.getElementsByTagName("name")[0].firstChild.data,
			direction: hotel.getElementsByTagName("direction")[0].firstChild.data,
			telf: hotel.getElementsByTagName("telef")[0].firstChild.data,
			geo: {
				lat: hotel.getElementsByTagName("lat")[0].firstChild.data,
				lng: hotel.getElementsByTagName("lng")[0].firstChild.data
			}
		};

}

JSON

....
{
	code: 0000,
	name: 'Hotel0',
	direction: 'Calle0',
	telef: 'Telf0',
	geo: {
		lat: 00,
		lng: 00
	}
}
....
// Javascript
var hotelDescription = data, hotelList = [];
for (var x in data) hotelList.push(data[x].name);

TXT

0000:Hotel0:Calle0:Telf0:00:00|...
// Javascript
var tmp = data.split("|");
var hotelList = [];
var hotelDescription = [];
for (var x = 0, len = tmp.length; x<len; x++) {
	var hotel = tmp[x].split(":");

	hotelList.push(hotel[1]);

	hotelDescription[hotel[1]] = {
		code: hotel[0],
		name: hotel[1],
		direction: hotel[2],
		telf: hotel[3],
		geo: {
			lat: hotel[4],
			lng: hotel[5]
		}
	};
}

Comparativas

500 registros

1000 registros

2000 registros

5000 registros

10000 registros

Conclusiones

XML

• Son los ficheros más pesados
• El tiempo de procesamiento es mayor que los demás.

JSON

• Son los ficheros que más tiempo tardan en cargar completamente.
• El tiempo de procesamiento es el más rápido de los testeados.

TXT

• Son los ficheros menos pesados.
• El tiempo de proceso y carga son bajos aunque no destacan frente a los demás.
• El tiempo total es el menor de los testeados.

Descargar el proyecto

Artículos relacionados

• jLinq, simulándo SQL para buscar en JSON
• ¿AjaX o AjaT?
• Hazte tus propios MooTabs con MooTools
• Aparece el Concepto W Ajax
• ZenPhoto, galería de fotos en ajax

Artículos relacionados

• Primeras capturas de Comet
• Jaxie, otro chat con Ajax
• Crea un chat como el de gMail/Facebook con jQuery
• Crea un chat en Ajax
• YShout v2, Chat ajax+php

Artículos relacionados

• Colección de imagenes para Loading
• AjaxLoad, imagenes para tus cargando
• Más Indicadores para nuestros cargando…
• Enlaces rápidos (3)
• Otra librería para trabajar con Ajax