Tutorialdock | Free Web Resources

Crea un plugin per JQuery

| di:

jquery questions indeas Crea un plugin per JQuery
Nel tutorial precedente, vi ho spiegato come si può creare un modal in JQuery.

Oggi volevo mostrarvi come rendere quel codice un plugin per JQuery. Farlo è molto semplice.

Manteniamo i file che avevamo creato la volta scorsa: index.html e modal.js. Aggiungiamo un file: jquery.modal.js, dove scriveremo il nostro plugin.

Iniziamo copiando semplicemente il codice che avevamo precedentemente scritto, nel file jquery.modal.js. Ora, aggiungete all’inizio e alla fine del file questo codice:

(function($){

	$.fn.modal = function(options){
             //Il codice di modal.js qui
	}
})(jQuery);

In index.html, sostituiamo il vecchio link aggiungendo jquery. all’inizio, così da collegarci al nostro nuovo file. Possiamo notare che il tutto funziona come prima, dov’è la differenza?

Creando un plugin JQuery do la possibilità all’utente di scegliere su quale elemento agire.

Anche se, per ora l’utente non può decidere nulla, fra un po’ sarà in grado di fare grandi cose.

Iniziamo aggiungendo alcune possibilità di modifica da parte dell’utente:

tdoptions = jQuery.extend ({
			bgcolor: "rgba(255,255,255,0.3)",
			outsideclose:1,
			animate:1
		}, options);

I valori che io ho scritto sono quelli di default che poi l’utente potrà cambiare.

Inoltre dobbiamo modificare la variabile open_space, in quanto abbiamo impostato che sia variabile:

var open_space='<div style="width:100%;height:100%;background-color:'+tdoptions.bgcolor+';position:fixed;margin:0;padding:0;z-index:99999;top:0px;left:0px;right:0px;bottom:0px"></div>';

Poi, dato che questo plugin deve funzionare con qualsiasi valore scelto dall’utente, dobbiamo mettere le funzioni all’interno di un ciclo, in questo caso utilizzeremo each, di JQuery:

return this.each(function(){

		modalid = $(this).attr('data-tdmodal-id');
		console.log(modalid);

		var tdmodal = function(){
			contenuto=$('#'+modalid).html();
			$('body').append(open_space);
			$('.open-space')
				.html('<div id="open-'+modalid+'" class="open-modal">'+contenuto+'</div>')
				.live('click',function(e){
					e.preventDefault();

					if(tdoptions.outsideclose==1){
						if($(e.target).hasClass('open-modal')||$(e.target).parents().hasClass('open-modal')){}else{
							closem();
						}
					}
			});
			positions($('.open-space #open-'+modalid));

			$('.open-modal .close').live('click',function(){
				closem();
			});
		};
		var positions = function(element) {
			element.css("top", ( $(window).height() - element.outerHeight() ) / 2 + $(window).scrollTop() + "px");
			element.css("left", ( $(window).width() - element.outerWidth() ) / 2 + $(window).scrollLeft() + "px");
		};
		var closem = function(){
			if(tdoptions.animate==1){
				$('.open-space').animate({
					opacity:0
					},
					100,function(){$('.open-space').remove()});
			}else{
			$('.open-space').remove();
			}
		};
		tdmodal();
	});

Questo è il resto del documento. Ho aggiunto la possibilità di scegliere se chiudere il modal al click esterno oppure no:

if(tdoptions.outsideclose==1){
	if($(e.target).hasClass('open-modal')||$(e.target).parents().hasClass('open-modal')){}else{
		closem();
	}
}

E di effettuare un’animazione alla chiusura:

var closem = function(){
	if(tdoptions.animate==1){
		$('.open-space').animate({
			opacity:0
				},
				100,function(){$('.open-space').remove()});
		}else{
		$('.open-space').remove();
		}
	};

Nella pagina index.html non resta che aggiungere il richiamo a questa fnzione, e il gioco è fatto:

<script>
$('a').live('click',function(){

	$(this).modal({
		bgcolor:'rgba(255,255,255,0.3)',
		outsideclose:1,
		animate:1
	});
});

</script>

Come avete visto, non è difficile creare un plugin per JQuery. E’ sufficiente rendere più variabili le nostre funzioni così da evitare eventuali bug.

download button3 CSS SCRIPT: creare menu a discesa in puro CSS

Tags:


L'Autore

Co-fondatore ha realizzato personalmente il codice su cui si basa Tutorialdock. Ora si occupa di programmazione scrivendo articoli nella categoria tutorial. Sito web dell'autore

Tips: abilitare Airdrop sui mac non supportati ufficialmente