ugrás a tartalomhoz

jQuery plugin

gtoma · 2015. Okt. 3. (Szo), 18.54
Sziasztok!

szeretnék egy jquery plugint írni, és van egy kis gondom a plugin elérhetőségével.
A logikát szeretném megérteni, mert valahol az alapoknál lehetek elszállva.

adva mondjuk egy plugin:


$.fn.test = function( options ) {
    var self = {};
    self.testszoveg = "akarmi";
    
    self.testFunction = function( args ) { }

    $.extend(this, {testem: self});
    console.log( 'test', this );
}

$.fn.test2 = function( options ) {
    var self = {};
    self.testszoveg = "mas";
    
    self.test2Function = function( args ) { }

    $.extend(this, {testem2: self});
    console.log( 'test2', this );
}

$("#aa").test();
$("#aa").test2();
Namost az adott pluginben látom a this-ben a $.extenddel hozzáadott self -et, de már a másik hozzáadott self-et NEM.

A cél az lenne, hogy valami ilyesmi módon érhessem el:
$(akarmi).testem.testFunction() vagy a $(akarmi).testem().testFunction()
és természetesen a már "példányosított" verziót.

Ha röviden elmagyaráznátok az alapvető logikáját nem lenne rossz, vagy esetleg szívesen utána is olvasok, ha megmondjátok mire keressek lehetőleg inkább magyar nyelven.

Köszönöm szépen!
‹ onchange this.form.submit() TinyMCE szöveg vágása ›
 ■
1

Különböznek

Poetro · 2015. Okt. 3. (Szo), 20.06
A két this teljesen különböző objektum. Mivel két különböző kiválasztás eredménye. Egyébként pedig egy jQuery plugin-ben illik visszaadni a this-t, hogy tovább lehessen folytatni a kifejezést.
$.fn.test = function( options ) {  
    var self = {};  
    self.testszoveg = "akarmi";  
      
    self.testFunction = function( args ) { }  
  
    $.extend(this, {testem: self});  
    console.log( 'test', this ); 
    return this;
}  
  
$.fn.test2 = function( options ) {  
    var self = {};  
    self.testszoveg = "mas";  
      
    self.test2Function = function( args ) { }  
  
    $.extend(this, {testem2: self});  
    console.log( 'test2', this );  
    return this;
}  
  
$("#aa").test().test2();
2

Két különböző?

gtoma · 2015. Okt. 4. (V), 08.56
(return this megértve. nincs kérdés)
Két különböző objektum?
Tehát amikor lefut egy $(). kiválasztás, akkor új objektum jön létre.

Van megoldás, hogy ezeket "összeforrasszuk"? vagy van valami közös pontjuk, valami híd?
gondolom a $().data() pl az, de nem tűnik elegánsnak ezt használni.

kiraktam a netre a kódot, amivel gondom van. Bár ebbe belefutottam már máskor is,
de úgy érzem itt lenne az ideje ezt megértenem. :)

itt

Egy file feltöltő, tallozót szeretnék csinálni.
az mcFileSelector végén hozzáadnám az elemhez a plugint, hogy példányosított verziója elérhető legyen.
$.extend(this, {fileManager: self});
aztán elfut az mcFileSelector.init -be, és ott ráraknám az mcFileExplorer -t,
ennek az alján concolosom ki a this -t és látszik, hogy csak az aktuális van meg.

Ez egybevág azzal amit mondtál, azonban sok plugin képes elérhetőséget biztosítani.

pl használom a DataTable -t is, és ott is elérhető funkciók vannak nyitva:
$(..).Datatable().addrow()

Szóval nyilván van valami módja, valami szintaktika.
3

widget

gtoma · 2015. Okt. 4. (V), 12.05
Hm. Közben találtam egy ilyen megoldást:

$.widget("nt.FileSelector", {
	
	options: {
		a: 1,
		b: 2
	},
	
	_create: function() {
		console.log( 'create', this );
		this._testConsole();
	},
	
	_testConsole: function() {
		console.log( 'console', this );
		$.extend(this.element.FileSelector, this);
		$(this.element).FileExplorer();
	},
	
	_setOptions: function(options) {
		this.options = options;
	},
	
	_getOptions: function() {
		return this.options;
	}
});

$.widget("nt.FileExplorer", {
	
	options: {
		c: 1,
		d: 2
	},
	
	_create: function() {
		console.log( 'createExp', this );		
		console.log( $(this.element).FileSelector._getOptions() );
		$(this.element).FileSelector._setOptions({x: 5});
		console.log( $(this.element).FileSelector._getOptions() );
	},
	
	_testConsole: function() {
		console.log( 'consoleExp', this );
	}
});

$("#a").FileSelector();
úgy tűnik működik. Vélemény? ez a megfelelő út?

update: Sajnos nem megfelelő.
A következő esetben már látszik a hiba:

<input type="text" id="a" value="a" class="zold"/>
<input type="text" id="b" value="b" class="zold"/>


$(".zold").FileSelector();
$("#a").FileSelector.setOptions({ok:12});
$("#b").FileSelector.setOptions({no:"no"});

console.log( "xxxx", $("#a").FileSelector.getOptions(), $("#b").FileSelector.getOptions());
Sajnos a #a és a #b is no:no options-t kapja meg.
4

egyszerűsítve

gtoma · 2015. Okt. 5. (H), 15.21
Íme egy egyszerűsített probléma:

jsfindle

azaz a console.log ból látszik, hogy nem egy példány csatolódik az adott html tag-hez,
hanem ugyan az a class csatolódik mindegyikhez.

Erre megoldás?
5

(function($){ $.fn.plugin1

Poetro · 2015. Okt. 5. (H), 21.46
(function($){
  $.fn.plugin1 = function(value) {
    var options = $.extend(this.data('plugin1-options'), {x: value});
    this.data('plugin1-options', options)
    console.log(this.data());
  };
  $.fn.plugin2 = function(value) {
    var options = $.extend(this.data('plugin2-options'), {x: value});
    this.data('plugin2-options', options)
    console.log(this.data());
  };
}(jQuery));

jQuery('#x').plugin1('X');
jQuery('#x').plugin2('Y');
[object Object] {
  plugin1Options: [object Object] {
    x: "X"
  }
}
[object Object] {
  plugin1Options: [object Object] {
    x: "X"
  },
  plugin2Options: [object Object] {
    x: "Y"
  }
}
Demó