Quellcode für einfache MessageBox mit JQuery-Benutzeroberfläche

Obwohl die JQuery-Benutzeroberfläche über ein Widget verfügt, mit dem Sie problemlos alle Arten von Dialogen anzeigen können, habe ich übersehen, dass einige sehr häufige Verwendungsarten vorab entworfen wurden. Zum Beispiel ein Dialogfeld, in dem eine Nachricht mit einem bestimmten Format angezeigt wird (ähnlich der Funktion alert () von Javascript, die jedoch dem Design der Seite folgt). Ich habe auch die Art des Dialogs verpasst, in dem der Benutzer aufgefordert wird, eine Zeichenfolge einzugeben (im Stil der Win32-Eingabebox). Und da dieser Fall als Erweiterung des ersten Problems angesehen werden kann, habe ich diese kleine Funktion für den Fall geschrieben, dass Sie jemand aus Schwierigkeiten herausholt.

				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.

Hinterlasse eine Antwort