Meteora es una libraría jQuery, creada por una empresa mexicana, que permite crear interfaces de aplicaciones HTML para usar en widgets, por ejemplo.
Entre los elementos que ofrece nos encontramos con:
Vía / Dream CSS
Hace ya tiempo escribà en display: NONE cómo hacer que el texto se autocompletara en una caja de texto según se fuera escribiendo en ella. En esa entrada comentaba que la obtención de los datos, que era mediante Javascript, se podÃa realizar mediante AJAX. Hoy vamos a explicar cómo se harÃa esa llamada mediante AJAX.
Read More “AJAX paso a paso: autocompletado en cajas de texto”
linkNotify es un plugin jQuery que permite modificar enlaces y mostrar un texto personalizado que indica que el enlace se está cargando. Algo que puede ser muy útil para aplicaciones en la que el usuario es algo básico y pincha y pincha en el enlace eternamente hasta que ve algún resultado sin esperar a que cargue la primera vez.
$('a').linkNotify('Espera mientras carga la pagina...');Los que hemos trabajado con Java estamos acostumbrados a tratar y lanzar excepciones para controlar los errores, algo que en Javascript no es muy común, pero en librerías algo elaboradas podría ser muy útil.
// Clases de errores
function DivisionByZeroError() {
this.name = "DivisionByZeroError";
}
function DivisionByStringError() {
this.name = "DivisionByStringError";
}
// Funcion que devuelve un error
function divisionCanFail(a, b) {
if (b == 0) {
throw new DivisionByZeroError();
}
if (typeof b == "string") {
throw new DivisionByStringError();
}
return a / b;
}
// Funcion de test
function decoratedDivision(a, b) {
try {
alert(divisionCanFail(a, b));
} catch (error if (error.name == "DivisionByZeroError")) {
alert("A division by zero...");
alert("Exception class: " + error.name);
} catch (error if (error.name == "DivisionByStringError")) {
alert("Exception class: " + error.name);
}
}
decoratedDivision(5, "isThisANumber?!");
decoratedDivision(5, 0);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()));
});Google tiene una guía de estilos para programar en Javascript. Yo no soy muy partidario de ello, ya que cada cual programe como quiera siempre que sea código legible, es decir, ¿por qué usar variables con nombres así: nombreVariable y no así: nombre_variable?. Está claro que en un proyecto o una empresa sí tiene sentido usar guías de estilo, pero que una guía de estilo sea generalizada, no le veo sentido.
De todas formas los consejos están bastante bien y ante la duda de cómo hacerlo, podemos echarle un vistazo a cómo lo hacen en Google. Claro, que luego lo ofuscan y no hay quién entienda sus librerías.
Vía / DZone
Aunque el HTML5 no está disponible en todos los navegadores, no es mala idea ir incluyendo en nuestras webs aplicaciones que hagan uso de HTML5, e ir dándole un poco de vidilla al asunto y no estar pendientes de Internet Explorer. Por ello, este script nos puede venir muy bien:
function detectBrowserCapabilities(){
var res = new Array();
res["userAgent"] = navigator.userAgent;
var hasWebWorkers = !!window.Worker;
res["workersFlag"] = "" + hasWebWorkers;
var hasGeolocation = !!navigator.geolocation;
res["geoFlag"] = "" + hasGeolocation;
if (hasGeolocation) {
document.styleSheets[0].cssRules[1].style.display = "block";
navigator.geolocation.getCurrentPosition(function(location) {
res["geoLat"] = location.coords.latitude;
res["geoLong"] = location.coords.longitude;
});
}
var hasDb = !!window.openDatabase;
res["dbFlag"] = "" + hasDb;
var videoElement = document.createElement("video");
var hasVideo = !!videoElement["canPlayType"];
var ogg = false;
var h264 = false;
if (hasVideo) {
ogg = videoElement.canPlayType('video/ogg; codecs="theora, vorbis"') || "no";
h264 = videoElement.canPlayType('video/mp4;
codecs="avc1.42E01E, mp4a.40.2"') || "no";
}
res["videoFlag"] = "" + hasVideo;
if (hasVideo){
var vStyle = document.styleSheets[0].cssRules[0].style;
vStyle.display = "block";
}
res["h264Flag"] = "" + h264;
res["oggFlag"] = "" + ogg;
return res;
}Comments are closed.
Meteora fue hecha para MooTools no para jQuery
Psst…. Meteora está basado en MooTools no en jQuery