Creare plugin propriu jQuery

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
hi_ella
Mesaje:40

Creare plugin propriu jQuery

Salut,

Am aflat ca iti poti crea propriile plugin-uri jQuery. Ideea este ca pentru inceput as vrea ca puginul sa-mi genereze o structura de div-uri html in interiorul div-ului pe care il "selectez" cu plugin-ul .
Iata ce am facut pana acum :

Cod: Selectaţi tot

(function($){
	$.fn.game = function(){
		options = {tableDim : 5 };
		
		this.each(function(){
                        $(this).addClass("table");
			for(i=0;i<options.tableDim;i++){
				template = "<div class='trow'>";
				for(j=0;j<options.tableDim;j++){
 template += "<span class='element'><img src='img/elep.png' class='element' data-line ="+i+" data-col = "+j+"></span>";
				}
				template += "</div>";
				$(this).append(template);
			}
		});
	}
}(jQuery));
Si mi-a generat,corect, aceasta structura de div-uri in urma executiei: $(".game").game() :

Cod: Selectaţi tot

<div class="game table">
<div class="trow">
<span class="element"><img src="img/elep.png" class="element" data-line="0" data-col="0"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="0" data-col="1"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="0" data-col="2"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="0" data-col="3"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="0" data-col="4"></span>
</div>
<div class="trow">
<span class="element"><img src="img/elep.png" class="element" data-line="1" data-col="0"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="1" data-col="1"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="1" data-col="2"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="1" data-col="3"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="1" data-col="4"></span>
</div>
<div class="trow">
<span class="element"><img src="img/elep.png" class="element" data-line="2" data-col="0"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="2" data-col="1"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="2" data-col="2"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="2" data-col="3"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="2" data-col="4"></span>
</div>
<div class="trow">
<span class="element"><img src="img/elep.png" class="element" data-line="3" data-col="0"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="3" data-col="1"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="3" data-col="2"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="3" data-col="3"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="3" data-col="4"></span>
</div>
<div class="trow">
<span class="element"><img src="img/elep.png" class="element" data-line="4" data-col="0"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="4" data-col="1"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="4" data-col="2"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="4" data-col="3"></span>
<span class="element"><img src="img/elep.png" class="element" data-line="4" data-col="4"></span>
</div>
</div>
1. Practic creeaza un "tabel" de 5x5 cu niste imagini, insa era important sa-mi genereze data-line si data-col pentru mine .
Este vreun mod mai elegant de a crea acel template ?

2. Si inca ceva : data-col si data-line par a fi string-uri ..., e drept ca le pot converti apoi ,insa le pot avea cumva intregi direct in html ?

3. Si inca ceva : daca dau view page source nu mi se vede doar "<div class="game"></div>" -> asta fiindca codul html este generat de catre jQuery;daca dau inspect element imi apar toate div-urile generate . Insa voi putea de exemplu sa bind o functie pentru click pe elementele generate , nu ?

Multumesc anticipat !
MarPlo Mesaje:4343
Salut
Din ce stiu:
2. Valorile din atributele elementelor html sunt mereu siruri, si tot astfel sunt preluate in javascript.
3. Se pot inregistra evenimente (click, mouseover, ...) la elementele html generate dinamic de javascript, dar inregistrarea evenimentului trebuie facuta dupa ce sunt create /adagate acele elemente in strctura html.

Subiecte similare