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'); }); });
Salutare.
Ai pus codul dar te rog pune si cum inseram codul acesta sau scriptul intr-un site…
Sper sa ma fac inteles ceea ce vreau.
Multumesc astept raspuns.