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
Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.
En plan rapidito he hecho un script jQuery que realizaría esta función:
$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});Si hace poco comentaba el tema de Web SQL Database de HTML5, ahora encuentro un plugin para jQuery que nos facilita esta labor.
$.jStorage.set(key, value)
value = $.jStorage.get(key)Vía / Script & Style
En esta nueva versión se ha añadido el poder subir el avatar, recortando la imagen usando la librería Cropper.js y para ello también se usará Vuex para guardar el avatar y que se actualice en toda la app.
Para subir la imagen se usará el siguiente método.
this.cropper
.getCroppedCanvas( this.outputOptions )
.toBlob( blob => {
new ApiFectch()
.updateAvatar( blob )
.then( response => {
if ( response.response ) {
success( response.message );
this.avatar = avatar + '?cache=' + new Date();
this.$store.commit( `user/${ USER_SET_AVATAR }`, new User().getAvatarURL( userData.username ) + '?cache=' + ( new Date() ) );
} else {
error( response.message );
}
} );
} );
Para manejar todo habrá que usar Vuex con módulos, por ejemplo, para el módulo user:
import { USER_SET_AVATAR, USER_SET_USERNAME } from '../mutation-types';
const state = {
avatar: null,
username: null,
};
const mutations = {
/**
* Sets avatar
*
* @param {Object} mutationState Vuex state.
* @param {String} avatar Avatar string.
*/
[ USER_SET_AVATAR ]( mutationState, avatar ) {
mutationState.avatar = avatar;
},
/**
* Sets username
*
* @param {Object} mutationState Vuex state.
* @param {String} username User name.
*/
[ USER_SET_USERNAME ]( mutationState, username ) {
mutationState.username = username;
},
};
export default {
namespaced: true,
state,
mutations,
};
Aquí está el código
Ya hace tiempo comentamos como indicar la calidad de una contraseña mediante Javascript y esta vez vamos a mostraros otro ejemplo de cómo hacerlo.
En esta ocasión se van a usar dos scripts, uno de ellos está basado en el algoritmo de Javascript Password Strength Meter, el cual mide que la contraseña tenga más de 8 caracteres, tenga minúsculas y mayúsculas, algún número, use caracteres especiales y use L33t.
En este caso el formulario se realiza con Ext Form, una gran librerÃa, pero no me gusta que el formulario se cree mediante javascript.
Password Meter
VÃa / WebAppers
Algo sencillo que no conocía y que nos permite detectar cuando se copia, corta y pega en cajas de texto usando jQuery.
$(document).ready(function() {
$("input:text").bind('copy', function(e) {
alert('Copiando...');
});
$("input:text").bind('paste', function(e) {
alert('Pegando...');
});
$("input:text").bind('cut', function(e) {
alert('Cortando...');
});
}); Detect Copy, Paste and Cut operations on a TextBox using jQuery
Vía / Script & Style
Comments are closed.
Meteora fue hecha para MooTools no para jQuery
Psst…. Meteora está basado en MooTools no en jQuery