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');
	});
});