toggle

Editor de texto HTML WYSIWYG sencillo y muy ligero

Cuando necesito incorporar un editor de texto HTML suelo necesitar algo muy sencillo y ligero, y siempre acabo recurriendo a los más populares como el TinyMCE, que está muy bien, pero tiene demasiadas opciones para mis necesidades, y ocupa un poco más de los deseado.

En esta ocasión me han recomendado el TinyEditor, y creo que he dado en el clavo. Es un editor de los mas ligero (menos de 10 Kb), y con todas las opciones básicas que podemos necesitar.

editor

(más…)

Mensaje de alerta si abandonas un formulario sin salvar

En ocasiones creamos formularios en los que queremos prevenir que el usuario abandone la página sin haber salvado los cambios.

Para conseguir esto podemos usar el metodo de javascript, que es invocado antes de que el ususario se vaya de la pagina (click en un link, o refresco de pantalla) :

window.onbeforeunload  = function(e) {
   return "message";
};

Pero no es suficiente con esto, tenemos que cambiar un poco esta función, para mejorar el comportamiento en varios navegadores, y para evitar que salga dicho mensaje al hacer submit del formulario.

$('form').find(':input').change(function(){
	var dirtyForm = $(this).parents('form');

	// change form status to dirty
	dirtyForm.addClass('unsavedForm');
});

$('form').submit(function () {
	$(this).removeClass('unsavedForm');
});

window.onbeforeunload = function(e) {
	e = e || window.event,
	message = "lorem ipsum";

	// show alert if there are some unsaved form
	if ($('.unsavedForm').size()) {
		// For IE and Firefox
                if (e) {
                  e.returnValue = message;
                }
                // For Safari
                return message;
	}
};

Con este pequeño código conseguiremos nuestro objetivo.

El alert que sale es de sistema (vamos, muy feo) y no se puede customizar mas que el mensaje (y no en todos los navegadores), pero evitaremos alguna que otra perdida de datos por parte de nuestros usuarios.

Espero que os sea de ayuda.

Componente de Tabla como RadioGroup

Hoy he tenido que desarrollar un nuevo componente, para un muy interesante proyecto que estamos empezando a desarrollar en Paradigma.

Este componte debe de mostrarse como una tabla, tal y como podéis ver en la siguiente imagen con el diseño creado por el artistazo @davidmontalvo, pero debe de actuar como un grupo de input tipo radio, ya que el usuario podrá seleccionar cada una de las celdas.

(más…)