Creare plugin propriu jQuery
Scris: Mar Mai 13, 2014
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 :
Si mi-a generat,corect, aceasta structura de div-uri in urma executiei: $(".game").game() :
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 !
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));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>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 !