Am văzut în articolul anterior cât de simplu se poate crea o fereastră de dialog cu jQueryUI, precum şi cum putem face unele mici configurări. Acum să mergem mai departe. În următorul exemplu facem două schimbări: în primul rând conţinutul ferestrei îl indicăm dinamic: de fapt vom avea o singură fereastră dar care afişează două texte diferite, în funcţie de butonul apăsat; în al doilea rând vom face ceva de ordin estetic, şi anume să adăugăm o iconiţă la butonul la care acum îi spunem “Bine”. De ce? Pentru că mie mi-a luat ceva până am găsit cum se face şi sper altora să ia aşa mai puţin. Iată strict codul JavaScript, în timp ce puteţi vedea pagina în acţiune aici şi să îi studiaţi sursa.

$(document).ready(function(){
	$('#fereastra').dialog({
		autoOpen: false,
		width: 400,
		height: 250,
		modal: true,
		buttons: {
			Bine: function() {
				$(this).dialog("close");
			}
		},
		open: function(event, ui) {
			$(this).parent().find('.ui-dialog-buttonpane button:contains("Bine")').button({
				icons: { primary: 'ui-icon-check' }
			});
		}
	});
	$("button").button();
	$("#buton1").click(function (){
		$("#fereastra").html("<p>Un text!</p>");
		$('#fereastra').dialog('open');
	});
	$("#buton2").click(function (){
		$("#fereastra").html("<p>Alt text!</p>");
		$('#fereastra').dialog('open');
	});
});

Să vedem ceva mai complex. Să zicem că folosim fereastra de dialog pentru a modifica un text din pagină. Un fel de edit-in-place dar făcut cu o fereastră de dialog. Nu pare a avea prea mult sens? Ei bine, e didactic. Avem un titlu h1 şi cu o fereastră dorim să putem schimba textul. Pagina în acţiune o vedeţi aici. Din nou pun mai jos doar partea JavaScript.

$(document).ready(function(){
	$('#fereastra').dialog({
		autoOpen: false,
		width: 400,
		height: 250,
		modal: true,
		buttons: {
			"Schimbă": function() {
				$("h1").html($("#noultitlu").val());
				$(this).dialog("close");
			},
			"Nu fă nimic": function() {
				$(this).dialog("close");
			}
		}
	});
	$("button").button();
	$("#buton").click(function (){
		$("#noultitlu").val($("h1").html());
		$('#fereastra').dialog('open');
	});
});