Ferestre cu jQuery UI (I)


Dacă într-o vreme criticam jQuery UI, de mult timp folosesc des biblioteca în multe proiecte. Acum am de gând să scriu poate vreo două materiale despre ferestre de dialog, dat fiind că ele pot apărea des, fie doar pentru a afişa informaţii, fie pentru a prelua nişte date sau a fi intrarea pentru anumite interacţiuni. Şi vă propun desigur să pornim de la un exemplu banal: o pagină cu un buton care deschide o fereastră. Dar mai întâi o observaţie: ca exemplul să fie cuprins într-un singur fişier HTML, am optat pentru includerea jQuery şi jQueryUI (cu tot cu CSS) din depozitul Google.

imagine

Drept urmare, pentru a obţine ceva ca mai sus – puteţi vedea pagina în acţiune aici – avem nevoie de următorul cod:

<!DOCTYPE html>
<html>
<head>
<title>Ferestre</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/cupertino/jquery-ui.css" rel="Stylesheet" />
	<style type="text/css"> body{font-size:13px;}</style>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
	$('#fereastra').dialog({
		autoOpen: false,
		width: 400,
		height: 250,
		modal: true
	});
	$("button").button();
	$("#buton").click(function (){
		$('#fereastra').dialog('open');
	});
});
</script>
<div id="fereastra" title="Titlul ferestrei"><h3>Salut!</h3><p>Corpul ferestrei...</p></div>
<button id="buton">Deschide</button>
</body>
</html>

Să explicăm puţin partea de cod JavaScript. Căci partea de cod HTML ar trebui să fie clară: avem un div cu ce de fapt dorim să apară ca fereastră (cu title de la acest div spunem titlul ferestrei)  şi un buton. Ei bine, în liniile 14-19 spunem că div-ul fereastra va fi folosit o fereastră de dialog care vrem să nu se deschidă automat, să aibă 400 pixeli lăţime şi 250 înălţime, şi să fie modală, adică să nu poţi interacţiona cu pagina până nu o închizi. Nu emitem alte pretenţii de moment. Apoi în linia 20 spunem ca orice element button să fie tratat ca buton din jQueryUI, ceea ce îi va da o interfaţă mai frumoasă (conform temei folosite). În fine, în liniile 21-23 spunem că atunci când butonul e apăsat, să fie deschisă fereastra. Atât. Totul simplu şi sper clar. Fereastra poate fi închis dând click pe x-ul din colţul dreapta-sus. De asemenea poate fi redimensionată, dar şi deplasată trăgând de bara de titlu.

Acum să creştem pretenţiile. Să spunem că dorim să închidem cu un buton propriu ferestrei. În al doilea exemplu – puteţi vedea pagina în acţiune aici – fereastra nu se mai închide automat cu Escape, nu mai poate fi redimensionată şi nici trasă cu mouse-ul (desigur, folosind opţiunile existente, pe care le găsiţi în documentaţie). De asemenea am adăugat butonul de închidere (cu textul Ok) şi am făcut să dispară x-ul din primul caz. În fine, mai observaţi că la redimensionarea ferestrei repoziţionez automat fereastra de dialog centrat. Pe scurt, liniile relevante de cod sunt următoarele:

	$(window).resize(function (){ 
		$("#dialog").dialog("option", "position", "center");
	});
	$('#fereastra').dialog({
		autoOpen: false,
		closeOnEscape: false,
		resizable: false,
		draggable: false,
		width: 400,
		height: 250,
		modal: true,
		buttons: {
			Ok: function() {
				$(this).dialog("close");
			}
		},
		open: function(event, ui) {
			$(this).parent().children().children('.ui-dialog-titlebar-close').hide();
		}
	});


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

1 comentariu

  1. igor spune:

    Cum sa fac ca la actionarea butonului ok sa nu inchida fereastra dar sa redictioneze la un fisier?


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *