MessageBox sencillo con JQuery UI

Aunque JQuery UI tiene un widget que permite mostrar fácilmente cualquier tipo de dialogo he echado en falta que vengan pre-diseñados algunos tipos muy frecuentes de usos. Por ejemplo un dialogo donde se muestre un mensaje con un formato específico (algo parecido a la función alert() de Javascript pero que siga el diseño de la página). También he echado mucho en falta el tipo de dialogo donde se pide al usuario que introduzca una cadena (al estilo del InputBox de Win32). Y como este caso puede ser visto como una extensión del primer problema he escrito esta pequeña función por si a alguien le saca del apuro.
				Aunque JQuery UI tiene un widget que permite mostrar fácilmente cualquier tipo de dialogo he echado en falta que vengan pre-diseñados algunos tipos muy frecuentes de usos. Por ejemplo un dialogo donde se muestre un mensaje con un formato específico (algo parecido a la función alert() de Javascript pero que siga el diseño de la página). También he echado mucho en falta el tipo de dialogo donde se pide al usuario que introduzca una cadena (al estilo del InputBox de Win32). Y como este caso puede ser visto como una extensión del primer problema he escrito esta pequeña función por si a alguien le saca del apuro.<br />
<br />
<pre class="prettyprint lang-Javascript">
var letBox=function(t,m,v,f)
{
d=''+
m + '&nbsp;&nbsp;';
$('body').append(d);
$('#letBox').dialog({
resizable: false,
height:250,
width:400,
modal: true,
buttons: {
"Aceptar": function() {
f($('#letBox #let').val());
$( this ).dialog( "close" );
$('#letBox').remove();
},
"Cancelar": function() {
$( this ).dialog( "close" );
$('#letBox').remove();
}
},
close:function(){ $(this).remove(); }
}).keyup(function(e){
if (e.keyCode === 13){
$('#letBox').parent().find('.ui-button:first').trigger('click');
}
});
$('#letBox #let').select();
$('.ui-dialog-buttonpane').css('font-size','.7em');
};</pre>
<br />
<br />
La función (letBox) tiene 4 parámetros muy simples:<br />
<br />
t<br />
Título que tendrá la ventana<br />
m<br />
Mensaje que se mostrará antes de la caja de edición<br />
v<br />
Valor a mostrar en la caja de edición inicialmente<br />
f<br />
Función que será llamada si el usuario acepta el dialogo<br />
<br />
<br />
El funcionamiento es muy sencillo y no creo que requiera mucha explicación. Solo explicaré las líneas que van desde la línea 22 a la 25. Estas líneas sirven para permitir que el usuario si está en la caja de edición y pulsa la tecla Intro se ejecute la misma acción que si hubiese pinchado en el primer botón. Así suplimos la carencia de un botón por defecto.<br />
<br />
La forma de llamarla es muy sencillo:<br />
<pre class="prettyprint lang-Javascript">
letBox ('Renombrar', 'Especificar nuevo nombre','Nombre antiguo',function(nuevoValor){
alert (nuevoValor);})</pre>
<br />
<br />
En este caso mostraría un dialogo con el título 'Renombrar', un texto donde pondría 'Especificar nuevo nombre' y un campo de texto con el valor 'Nombre antiguo'. Si el usuario le diese al botón Aceptar ejecutaría la función especificada como último parámetro y que mostraría una alerta con el nuevo valor que el usuario ha introducido.
COMPARTE ESTE TUTORIAL

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
TUTORIAL ANTERIOR

HAY 1 COMENTARIOS
  • Jorge López dijo:

    Que chulo!

Conéctate o Regístrate para dejar tu comentario.