JX Library es una librería para Mootools que nos facilita la realización de interfaces gráficas en nuestras páginas web.
Nos ofrece una variedad de elementos gráficos: layouts, paneles, árboles, grids, botones, toolbars, selectores de color, combos, … Jx
Vía / WebAppers
CodeMirror es una librería realizada con MochiKit que nos permite incluir una consola de Javascript en nuestras aplicaciones web. Un ejemplo perfecto para el funcionamiento es el libro de Javascript online Eloquent Javascript, el cual muestra ejemplos javascript y usa la consola para poder ejecutarlos.
Nos muestra el código parseado y resaltado, además nos permite modificarlo y ejecutarlo, viendo los resultados en una ventana diferente.
Además es sencillo de utilizar:
var editor = new CodeMirror(CodeMirror.replace("inputfield"), {
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
path: "lib/codemirror/",
stylesheet: "lib/codemirror/jscolors.css"
});
Una extensión que nos va a ser muy útil ya que nos permite depurar nuestras aplicaciones web. Entre las opciones que nos ofrece se encuentra la posibilidad de crear trazas en nuestras páginas web, olvidándonos así de los mensajes con alert para ver qué es lo que hace el código; nos avisa de los errores visualmente, algo que siempre he echado en falta en Firefox; inspector del DOM, CSS y eventos; línea de comandos para Javascript, se acabó el escribir el javascript: para ejecutar pruebas aisladas; monitoriza las peticiones AJAX, así como las respuestas; editor de elementos del DOM.
Completa e imprescindible FireBug
Vía / Genbeta
En algunas ocasiones es necesario añadir contenido al calendario que te ofrecer el datepicker de jQuery UI, por ejemplo añadir un combo que indice “horario mañanas/tarde”. Para conseguirlo será necesario ‘toquetear’ un poco el objeto jQuery.datepicker.
Tendremos que hacer dos cosas: primero deberemos evitar que cuando se selecciona un día se cierre automáticamente el popup con el calendario y después tendremos que modificar el HTML que devuelve la clase.
Para evitar el auto-cierre tenemos que añadir la opción showButtonPanel ya que nos ofrecerá el botón “Close” que nos permitirá cerrar el popup cuando hayamos indicado todos los campos necesarios. También es necesario modificar la función jQuery.datepicker._selectDate tal y como lo indican en StackOverflow:
// Añadimos datepicker al input que queremos
jQuery('.fecha')
.datepicker({
showButtonPanel: true,
dateFormat: "DD, d MM, yy"
});
// Modificamos la funcion _selectDate
jQuery.datepicker._selectDateOverload = jQuery.datepicker._selectDate;
jQuery.datepicker._selectDate = function(id, dateStr) {
var target = jQuery(id);
var inst = this._getInst(target[0]);
inst.inline = true;
jQuery.datepicker._selectDateOverload(id, dateStr);
inst.inline = false;
this._updateDatepicker(inst);
// Usar el .html() para luego usar el .text() es porque si usas el regional de datepicker, te salen entidades html en vez de letras acentuadas
// Se le añade el valor del nuevo campo select que hemos incluido
target.val(jQuery('').html(dateStr).text()+' @ '+jQuery('#horario').val());
}
Bien, ya tenemos el evento onSelect modificado, ahora nos falta cambiar el HTML que se dibuja, para ello modificaremos la función jQuery.datepicker._generateHTML:
jQuery.datepicker._generateHTMLExtended = jQuery.datepicker._generateHTML;
jQuery.datepicker._generateHTML = function(inst) {
var html = jQuery.datepicker._generateHTMLExtended(inst);
var div = jQuery('').html(html);
div.find('table:first').after('
Horario:
');
return div.html();
}
// Incluimos tambien un evento para que cuando se seleccione el horario, se modifique el campo input
jQuery('#horario').live('change', function() {
var $obj = jQuery('.fecha');
$obj.val($obj.val().replace(/@.*/, '@ '+jQuery(this).val()));
});
