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.
1: var letBox=function(t,m,v,f)
2: {
3: d='<div id="letBox" title="' + t + '"><p><span class="ui-icon ui-icon-info" style="float:left;margin:0 7px 20px 0"></span>'+
4: m + ' <br/><input type="text" id="let" value="' + v + '"/></p></div>';
5: $('body').append(d);
6: $('#letBox').dialog({
7: resizable: false,
8: height:200,
9: modal: true,
10: buttons: {
11: "Aceptar": function() {
12: f($('#letBox #let').val());
13: $( this ).dialog( "close" );
14: $('#letBox').remove();
15: },
16: "Cancelar": function() {
17: $( this ).dialog( "close" );
18: $('#letBox').remove();
19: }
20: },
21: close:function(){ $(this).remove(); }
22: }).keyup(function(e){
23: if (e.keyCode == 13){
24: $('#letBox').parent().find('.ui-button:first').trigger('click');
25: }
26: });
27: $('#letBox #let').select();
28: }
La función (letBox) tiene 4 parámetros muy simples:
- t
- Título que tendrá la ventana
- m
- Mensaje que se mostrará antes de la caja de edición
- v
- Valor a mostrar en la caja de edición inicialmente
- f
- Función que será llamada si el usuario acepta el dialogo
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.
La forma de llamarla es muy sencillo:
1: letBox ('Renombrar', 'Especificar nuevo nombre','Nombre antiguo',function(nuevoValor){
2: alert (nuevoValor);
3: });
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.
