jQuery nuosavas lango įskiepis

Šiame straipsnyje bus paaiškinta kaip susikurti savo norimą jQuery dialogą su keliais paprastai parametrais jam valdyti. Jei nežinote kaip sukurti paprastą jQuery įskiepį, apie tai galite paskaityti straipsnį apie tai kaip sukurti jQuery įskiepį.

Šiame straipsnyje rasite visą informaciją, kodo pavyzdžius bei paaiškinimus kaip susikurti paprastai valdomą, neapkrautą dialogą.

Lango parametrai

Kurdami dialogą pirmiausia nusistatom kokie bus parametrai mūsų naujai kuriamam langui. Žemiau pateiktas pavyzdys kaip nurodomi lango parametrai ir kokie jie galimi:

var defaults = {
	width: 300,
	height: 300,
	ajax: false,
	method: 'post',
	data: "",
	title: "",
	close: "Uždaryti",
	content: "",
	drag: true
};

Aukščiau pateiktame pavyzdyje nustatyti parametrai yra pagrindiniai ir jeigu naudotojas jų nepakeičia naudojami tokie kokie bus nurodyti jūsų.

Sekantis žingsnis yra naudotojo nurodyti parametrai. Tokiu atveju mūsų pagrindiniai parametrai nurodyti, turi būti perrašyti į naudotojo nurodytus. Žemiau pateiktas pavyzdys kaip pakeičiami jūsų nurodyti parametrai į naudotojo:

var options = $.extend(defaults, options);

Aukščiau pateiktame pavyzdyje tiesiog iš naujo mes susikuriame kintamąjį kuriame bus laikomi visi parametrai, tiek pateikti naudotojo, tiek nurodyti jūsų.

Parametrų veiksmai

Žemiau pateiktame pavyzdyje nurodyta kaip pagal nurodytus parametrus mes gauname atitinkamą informaciją, ją apdorojame ir vėliau išvesime į mūsų naujai kuriamą langą.

var rand = Math.floor(Math.random()*50);
if (options.content == "" && options.ajax) {
    switch (options.method) {
        case "post":
        	$.post(options.ajax,options.data,function(r) {
        		options.content = r;
        		$("#content" + rand).html(options.content);
        	},"json");
        break;
	case "get":
        	$.get(options.ajax,options.data,function(r) {
        		options.content = r.html;
        		$("#content" + rand).html(options.content);
        	},"json");
        break;
    }
}

Aukščiau nurodytame pavyzdyje pirmiausia susikuriame kintamąjį rand kuris reikalingas tam jeigu reikėtų sukurti keletą langų tame pačiame puslapyje ir uždarymo atveju neužsidarytų abu langai ir nesidubliuotų įrašai bei kiti duomenys.
Toliau patikriname ar naudotojas neįvedė jokių duomenų į mūsų nurodytą parametrą content ir ar yra nurodyta Ajax nuoroda. Jei sąlyga atitinka mūsų kriterijus, tokiu atveju tikriname kokių būdu reikia gauti duomenis (GET/POST). PO duomenų gavimo išsaugome duomenis į content parametrą viską ką gavome ir kas turi būti atvaizduota lange.

Lango kūrimas

Patį lango sukūrimą galime kurti įvairiais metodais, mano atveju tiesiog bus įkeliamas lango kodas į visą puslapį apačioje.

$("body").append('<style type="text/css" id="dialogCSS' + rand +'">.sp_web_dialog { position:fixed; width:' + options.width +'px; height:' + options.height +'px; top:50%; left:50%; margin-left:-' + (options.width / 2) +'px; margin-top:-' + (options.height / 2) +'px; border:2px solid #369; z-index:102; font-family:Verdana; font-size:10pt; padding:0; background:#fff; }  .sp_web_dialog_overlay { position:fixed; top:0; right:0; bottom:0; left:0; height:100%; width:100%; opacity:.15; filter:alpha(opacity=15); -moz-opacity:.15; z-index:101; margin:0; padding:0; background:#000; }  .sp_web_dialog_title { border-bottom:solid 2px #369; color:#FFF; font-weight:700; padding:4px; background:#369; } .sp_dialog_content {overflow: auto; height: ' + (options.height - 26) +'px;width:' + options.width +'px;} .sp_web_dialog_title_left { text-align: left; } .sp_web_dialog_title_right { text-align: right; }  .sp_web_dialog_title a { color:#FFF; text-decoration:none; }</style>');
$("body").append('<div id="overlay' + rand +'" class="sp_web_dialog_overlay"></div>');
$("body").append('<div id="dialog' + rand +'" class="sp_web_dialog"><table style="width: 100%; border: 0px;" cellpadding="0" cellspacing="0"><tr id="drag' + rand +'"><td class="sp_web_dialog_title sp_web_dialog_title_left">' + options.title +'</td><td class="sp_web_dialog_title sp_web_dialog_title_right"><a href="#" id="btnClose' + rand +'">' + options.close +'</a></td></tr><tr><td colspan="2"><div class="sp_dialog_content" id="content' + rand +'">' + options.content +'</div></td></tr></table></div>');

Aukščiau pateiktas kodas yra kaip minėjau įkeliamas tiesiogiai į bendra puslapio kodą ir atvaizduojamas. Visi elementų ID yra skirtingi jeigu būtų sukurtas naujas langas, kadangi kaip minėjau tam yra sukurtas rand kintamasis.

Lango uždarymas ir tampymas

Žemiau pateiktame pavyzdyje parodyta kaip bus uždaromas langas ir jei yra galimybė kaip jis bus tampomas.

$("#btnClose" + rand).click(function() {
      $("#dialog" + rand).remove();
      $("#overlay" + rand).remove();
      $("#dialogCSS" + rand).remove();
 });
 if (options.drag) {
      $("#dialog" + rand).draggable({
	 	handle: "#drag" + rand,
	 	opacity: 0.5
       });
}

Pateiktame pavyzdyje pirmiausia mes sukūrę naują langą jam priskiriame įvykius kurie bus naudojami paspaudus vieną ar kitą elemento ID. Norėdami uždaryti langą, mes jį tiesiog pašaliname iš viso bendro turinio. Jei bus kuriamas toks pats naujas langas, jis bus vėl naujai sukurtas.
Tempimas vykdomas tik tuomet kai naudotojas nurodo jog jis turi vykti. Tokiu atveju mes taip pat nustatom mūsų langui įvykį ir nurodome koks elementas bus atsakingas už tempimo funkciją, tam naudojamas parametras handle. Primenu kad norint kad veiktų tempimo funkcija, turi būti naudojamas kartu ir jQuery UI draggable įskiepis.

Žemiau pateiktas pilnas veikiantis kodas:

(function($){
 	$.dialog = function(options) {
		var defaults = {
	  		width: 300,
	  		height: 300,
	  		ajax: false,
	  		method: 'post',
	  		data: "",
	  		title: "",
	  		close: "Uždaryti",
	  		content: "",
	  		drag: true
	  	};
	  	var options = $.extend(defaults, options);
	  	var rand = Math.floor(Math.random()*50);
	  	if (options.content == "" && options.ajax) {
        	switch (options.method) {
        		case "post":
        			$.post(options.ajax,options.data,function(r) {
        				options.content = r.html;
        				$("#content" + rand).html(options.content);
        			},"json");
        		break;
				case "get":
        			$.get(options.ajax,options.data,function(r) {
        				options.content = r.html;
        				$("#content" + rand).html(options.content);
        			},"json");
        		break;
        	}
	  	}
	  	$("body").append('<style type="text/css" id="dialogCSS' + rand +'">.sp_web_dialog { position:fixed; width:' + options.width +'px; height:' + options.height +'px; top:50%; left:50%; margin-left:-' + (options.width / 2) +'px; margin-top:-' + (options.height / 2) +'px; border:2px solid #369; z-index:102; font-family:Verdana; font-size:10pt; padding:0; background:#fff; }  .sp_web_dialog_overlay { position:fixed; top:0; right:0; bottom:0; left:0; height:100%; width:100%; opacity:.15; filter:alpha(opacity=15); -moz-opacity:.15; z-index:101; margin:0; padding:0; background:#000; }  .sp_web_dialog_title { border-bottom:solid 2px #369; color:#FFF; font-weight:700; padding:4px; background:#369; } .sp_dialog_content {overflow: auto; height: ' + (options.height - 26) +'px;width:' + options.width +'px;} .sp_web_dialog_title_left { text-align: left; } .sp_web_dialog_title_right { text-align: right; }  .sp_web_dialog_title a { color:#FFF; text-decoration:none; }</style>');
	  	$("body").append('<div id="overlay' + rand +'" class="sp_web_dialog_overlay"></div>');
	  	$("body").append('<div id="dialog' + rand +'" class="sp_web_dialog"><table style="width: 100%; border: 0px;" cellpadding="0" cellspacing="0"><tr id="drag' + rand +'"><td class="sp_web_dialog_title sp_web_dialog_title_left">' + options.title +'</td><td class="sp_web_dialog_title sp_web_dialog_title_right"><a href="#" id="btnClose' + rand +'">' + options.close +'</a></td></tr><tr><td colspan="2"><div class="sp_dialog_content" id="content' + rand +'">' + options.content +'</div></td></tr></table></div>');
 		$("#btnClose" + rand).click(function() {
        	$("#dialog" + rand).remove();
        	$("#overlay" + rand).remove();
        	$("#dialogCSS" + rand).remove();
 		});
 		if (options.drag) {
	 		$("#dialog" + rand).draggable({
	 			handle: "#drag" + rand,
	 			opacity: 0.5
	 		});
 		}
 	};
})(jQuery);

Taip pat galite išbandyti ir demonstracinę versiją kaip šis langas veikia

Demonstracinė versija

Mindaugas

IT specialistas, PHP programuotojas. Sritys: PHP, MySQL, JavaScript, Ajax, jQuery, Arduino, (x)HTML, CSS, XML

More Posts - Website

Žymos: , ,

9 komentarai

Komentuoti: Darxx Atšaukti atsakymą

El. pašto adresas nebus skelbiamas.