UI.Layout: plugin de jQuery para crear layouts

ByLuis

UI.Layout es un plugin para jQuery que nos permite crear layouts en nuestras aplicaciones web, ya sean complejos o sencillos. Con este plugin podemos añadir toolbars, menús, paneles de ayuda, status bars, …

Entre sus características encontramos:

  • Sencillez: potente pero fácil de usar y de aprender
  • Layouts ilimitados: 5 regiones por layout
  • Docenas de opciones: cada aspecto es personalizable, globalmente y por región
  • Control total de las CSS: docenas de clases auto-generadas crean cualquiero aspecto UI
  • Extensible: callbacks, métodos y utilidades especiales
  • Botones personalizados: puedes integrar tus propios botones
  • Collapsable: cada panel puede ser cerrado, usando la animación que desees
  • Ocultable: los paneles se puede ocultar completamente, de inicio o en cualquier momento
  • Redimensionables: cada panel se puede redimensionar, automáticamente o indicando límites
  • Slidable
  • Cabeceras y pies de página: para cada región
  • Hotkeys: puede usarse cursores o teclas para definir hotkeys
  • Se puede usar cualquier elemento para los paneles
  • Integrable con cualquier widget o plugin jQuery

UI-Layout

Vía / WebAppers

Similar Posts

|

PHP-Ext: librería PHP para Ext JS

ByLuis

PHP-Ext es una librería open source que nos permite potenciar la capa UI de Javascript en nuestras aplicaciones. Para ello nos ofrece una serie de librerías (compatibles con PHP 4 y 5) para integrar Ext JS en nuestro sistema. Funciona como un mapeado en clases de la librería JS.

Entre las posibilidades que ofrece nos encontramos con la creación de formularios, combos, grids o menus. A parte ayuda a la comunicación entre el cliente y el servidor mediante JSON y XML.

Un ejemplo de uso sería el siguiente:

<?php
header("Content-type:text/javascript");
include_once("../../php-ext/php-ext.php");
include_once(NS_PHP_EXTJS_CORE);
include_once(NS_PHP_EXTJS_PANELS);
$p = new ExtPanel();
$p->Title = "My Panel";
$p->Collapsible = true;
$p->RenderTo = Javascript::variable("Ext.get('content-box')");
$p->Width = 400;
$p->Html = Javascript::variable("Ext.example.bogusMarkup");
echo Ext::OnReady(
$p->getJavascript(false, "p")
);
?>

PHP-Ext

Vía / AjaxLine

Ejemplos de javascripts optimizados

ByLuis

Si el otro día os contábamos cómo agilizar tus javascripts, hoy os hacemos referencia a ejemplos sobre esos consejos.
Aunque si soy sincero, no tengo muy claro que se gane mucho tiempo cargando dinámicamente los scripts y retrasando la ejecución para esperar a que se cargue. O si realmente hay diferencia, que no será mucha y menos con las velocidades que suele tener actualmente la mayoria de la gente, si merece la pena tanta cosa. Si el script lo cargamos inicialmente y luego lo utilizamos en todas nuestras páginas, la optimización sería suficiente.
Yo creo que la mejor solución es no tirar tanto de librerías y crear los scripts necesarios para tu aplicación.
Speed Up Your Javascript, Part 2: Downloadable Examples!
Vía / Dzone

Algunos scripts para jQuery

ByLuis

He encontrado en Script & Style algunos scripts/pluigns para jQuery que son interesantes:

Crear PNG directamente desde Javascript

ByLuis

Interesante librería que nos permite crear imágenes PNG directamente desde Javascript, para lo cual codifica la imagen usando el formato PNG y devuelve la cadena en base64. Algo parecido a la creación de documentos PDF.

var p = new PNGlib(200, 200, 256); // construcor takes height, weight and color-depth
var background = p.color(0, 0, 0, 0); // set the background transparent
for (var i = 0, num = 200 / 10; i <= num; i+=.01) {
  var x = i * 10;
  var y = Math.sin(i) * Math.sin(i) * 50 + 50;
  // use a color triad of Microsofts million dolar color
  p.buffer[p.index(Math.floor(x), Math.floor(y - 10))] = p.color(0x00, 0x44, 0xcc);
  p.buffer[p.index(Math.floor(x), Math.floor(y))] = p.color(0xcc, 0x00, 0x44);
  p.buffer[p.index(Math.floor(x), Math.floor(y + 10))] = p.color(0x00, 0xcc, 0x44);
}
for (var i = 0; i < 50; i++) {
  for (var j = 0; j < 50; j++) {
    p.buffer[p.index(i + 90, j + 135)] = p.color(0xcc, 0x00, 0x44);
    p.buffer[p.index(i + 80, j + 120)] = p.color(0x00, 0x44, 0xcc);
    p.buffer[p.index(i + 100, j + 130)] = p.color(0x00, 0xcc, 0x44);
  }
}
document.write('');

Sinceramente, no se me ocurre ninguna utilidad práctica a esta librería, porque puede ser sustituida facilmente por otras alternativas, pero lo que es indudable es que se trata de una gran librería.

Generate client-side PNG files using JavaScript

Vía / DZone