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

  1. Nepaprasčiau jQuery UI Dialog naudoti?

    • Ir dar pastebėjimas del
      $(„#dialog“ + rand).remove();
      $(„#overlay“ + rand).remove();
      $(„#dialogCSS“ + rand).remove();

      Gal paprasčiau taip būtų :
      $(„#dialog“ + rand+“,#overlay“ + rand +“,#dialogCSS“ + rand).remove();

  2. Darxx dėl paprastumo. Gal ir taip, bet tarkim manęs netenkina tas dialogas:
    1. Nuolat išsikraipo font-size pagal mano esamus.
    2. Nežinau kodėl, bet dažnai gaunu Memory Leak su juo.
    3. Norisi savo dizaino ir stiliaus, jQuery UI theme kurti tikrai nemoku.

    Dėl pasiūlymo kaip padaryti trumpiau tai gal ir teisingai. Nebandžiau, bet kiek atsimenu antri parametrai turi būti pirmojo parametro vidiniai elementai. Dėl šito tikrai nesiginčysiu. Tikriausiai tu teisus dėl šito.

    Beto, šiuo straipsniu norėjau ir kitiems parodyti kaip kuriami tarkim dialogai.

    • Niekas negimė mokėdamas.
      Templeitą savo susikurti gali ir čia.

      Fontus taipat galima koreguotis. Tiesiog reikia pakeisti css būtent jquery.ui.core.css. Jei labai tiksliai norėtum sužinoti kas tau iškraipo tektu pasinaudoti firebug. Jei norėsi daugaiu informacijos kaip tai padaryti tiesiog parašyk man.

      Kurti juos nebūtina. Gali tiesiog pasirinkti.
      http://jqueryui.com/themeroller/

      Ir labai pritariu tavo straipsnio patalinimo įdėjai. Nes pasikartosiu niekas negimė mokėdamas 😉

      Tiek kad naudojant UI dialogą. Tu gali juo manipuliuoti pasinaudojant Draggable,Resizable ir kitais metodais.
      Pozicijos nustatimui naudojama UI core biblioteka Position.

      Ir viliuosi ateityje galėsiu daugiau prisidėti su savo komentarais. 😉

  3. Neodan

    Darxx, nesikabinek prie smulkmenu.

    Ne viskas kas yra jau sukurta visuomet viskam tinka (-;

    Siaip uzskaitau straipsniuka.

    P.S. pradedantiesiems viska aiskinti reikia paprastai, o siame straipsniuke taip ir daroma

    • Nesikabinėju straipsnis ir man prisiminimus sužadino :) Tiesiog norisi, kad geriau gražiau ir greičiau veiktų 😉

  4. Komentarai visuomet yra gerai. Dėkui Darxx už pastebėjimus. Na matai jei visi naudotų tai kas sukurta, nebūtų įdomu ir gyvent :) Juk norisi turėt ir savo ir pagal savo poreikius, tuo labiau bekurdamas kažką kas jau yra sukurta automatiškai gilini savo žinias.

    Kad ir dabartinis variantas, šiandien perdarinėju tą dialogą savo kur čia parodžiau į mygtukus (Close,Minimize,Maximize) ir dar papildomus parametrus. Tad kaip sakant kiekvienam savo, o jQuery UI nepasiūlys visko ko man reikia ir būtent taip kaip reikia.

    Plius tai kad šis straipsnis tik susipažinimui kitiems. Vieni moka jQuery, kiti tik bando jį perprasti, kiti išvis nesinaudoja. Tai šis straipsnis tik pažintis, o ar naudos kas nors šį dialogą, ar ne, tai jau kiekvieno pasirinkimas.

  5. neodan

    Jei visi naudos tik tai kas jau yra sukurta, tai kas kurs naujoves? :) O kaip gali kurti naujoves jei nezinai kas jau yra ir kaip visa tai veikia? Beje kaip jau minejau, nera tobulo sprendimo visiems gyvenimo atvejams :)

    As uz dviraciu isradinejima mokymosi tikslais.

    • Pritariu neodan ir prisidedu prie padėko:

      Ačiū už straipsnį mokymosi tikslais :) Taip ir toliau

Parašykite komentarą

El. pašto adresas nebus skelbiamas. Būtini laukeliai pažymėti *

Galite naudoti šias HTML žymas ir atributus: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>