problema jquery

i0nutzb, on 9th March 2010, 18:57, said:

Nu ma incanta nici pe mine, ca nu e compliant da' asta e - asa e facut. De-asta vreau sa-i dau ca parametru selectorul sau o functie de selectie a datei respective.
Cred ca solutia cea mai potrivita ar fi o functie, ceva de genul:

(function($){  
$.fn.tooltip= function(options){  
	 o = jQuery.extend({
		 foo: 'defaultVal', // vei folosi codul în forma o.foo
		 params: function(){ return ['bubu'];}
	 }, options || {});
	 return this.each(function(){
		 var id = o.params;
		 //$(this).attr('aid') // care este jQuery("table#AuthTable tr td.l a")
	 })
}})(jQuery);

iar apelul sa fie ceva de genul:

jQuery("#element").tooltip({foo: 'io', params: function{return ['cucu']} });

Btw i0nutzb, care e opinia ta referitoare la obiecte javascript vs. pluginuri jQuery? Care sunt mai "usoare"? Care minimizeaza memory leak-urile? Evident, codatul cu picioarele iti provoaca aceleasi dureri de cap in ambele stiluri

L.E dupa o ora: VICTORY!
Soluta e, intradevar, folosirea unei functii care primeste un parametru, iar in interiorul pluginului, acel parametru va fi initializat cu elementul curent.

Edited by shiva, 09 March 2010 - 20:25.

Mor cu jQuery de gat ...
Varianta stilizata a pluginului meu de tooltip:

(function($) {	
	$.fn.tooltip = function(options) {
		var settings = $.extend({
			text: ''
		}, options || {});

		return jQuery(this).bind('mouseover', function() {
			console.log('in mouseover -this: ' + this);
		}).bind('mouseout', function() {
			console.log('in mouseout-this: ' + this);
		});
	};
})(jQuery);

Pe pagina de test merge bine-mersi, frumos, de oricate ori. Pe pagina reala, nu se face bind-ul. De nici o culoare. Wtf?

Quote

Au scopuri diferite pentru a putea face o comparație

Oricum, la pluginurile jQuery eu merg de cele mai multe ori pe chestii custom (ex: tooltips, taburi, slidere, uneori chiar și lightbox clone) și pe pluginuri gata făcute pentru chestii maicomplexe sau ce trebuie să se încadreze într-un timp foarte restrâns și nu e vreme de pierdut cu teste (draggable/sortable, autocomplete etc).

Despre cea de-a doua problemă, că nu îți merge, trebuie să faci o iterație. Musai. Probabil în pagina de test ai un singur elemente iar pe pagina reală ai mai multe elemente și se cam încurcă.

În plus, dacă ai elemente adăugate dinamic (injectate în DOM după încărcarea paginii) poate că ar fi bine să folosești .live() sau .delegate()

Mda, am gasit problema - aberam pe un input care era disabled Acuma mai trebuie sa ma distrez cu pozitionarea tooltip-ului in fereastra.

Intrebarea mea JS objects vs jQuery plugins vine in contextul in care poti obtine acest tooltip fie printr-un plugin de jQuery (jQuery fiind libraria aleasa pt. site) sau printr-un obiect JS. Adica:

jQuery("#element").tooltip(bla-bla);

vs

var t = new Tooltip({selector: '#element', bla-bla});

Pluginul mi se pare mai clar, mai expresiv si mai scurt, vizual. Managementul memoriei mi se pare cam la fel in ambele cazuri.

Niște date empirice ar fi interesante...

shiva, on 10th March 2010, 18:42, said:

Ah, scuze, nu știam la ce te referi (și chiar nu vrei să știi la ce mă gândeam eu )

Eu când am dubii de genul „cum e mai rapid” pornesc profiler-ul din firebug și analizez timpii de execuție și numărul de call-uri.

Despre poziționarea tooltip-ului îți dau un hint: $(this).offset().top și  $(this).offset().left

i0nutzb, on 10th March 2010, 22:45, said:

Offset, offset da' pe IE nu returneaza corect pozitia. Cam asa ceva m-am jucat - pozitionare si rezolvare coliziune cu marginea dreapta:

var wwidth = (isIE ? $(window).width() : $.innerWidth);
				var wheight = (isIE ? $(window).height() : $.innerHeight);
				var poleft = (isIE ? this.parentElement.getBoundingClientRect().left : $(this).parent().offset().left);
				var potop = $(this).parent().offset().top;
				var toleft = (isIE ? this.getBoundingClientRect().left : $(this).offset().left);
				var totop = $(this).offset().top;
				if (settings.rightArrow ||
					$(window).scrollLeft() + $(window).width() < toleft + $(this).width + $('div.toolTip', $(this).parent()).width()) {
					$('div.tooltipA').remove();
					$('div.divH').after(skin.arrow);
					$('div.toolTip', $(this).parent())
						.css('left', toleft - $('div.toolTip', $(this).parent()).width() + 'px');
				}
				else if (!settings.rightArrow) {
					$('div.toolTip', $(this).parent()).css('left', toleft + $('div.toolTip', $(this).parent()).width() + 'px');
				}

Btw, mai e un gheism care se intampla: "jQuery(this).tooltip(bla-bla) is not a function". Pe un anumit flow, imi da eroarea asta si nu stiu de unde s-o apuc. Acelasi cod, pe restul flowurilor merge ok.

Edited by shiva, 19 March 2010 - 12:46.

Tot nu înțeleg de ce te încăpățânezi să nu folosești un script gata făcut Măcar inspiră-te de la jTip
Cât despre $(this), eu setez o variabilă chiar la început, în genul t=$(this), pentru a nu avea conflicte.

Ca fapt divers, vezi că variabilele le poți defini cu virgulă, să nu mai pui de fiecare dată var:

var foo = 1,
	  bar = 2,
	  baz =3;

i0nutzb, on 21st March 2010, 13:38, said:

1. learning
2. control

Eniuei, IE e prost rau de tot. Ii spun ca

var leftt = currPos.offx + currPos.w + settings.offsetLeft,
					rightt = wndPos.w - leftt,
					topt = 'auto';
$tooltip.css({ left: leftt, right: rightt, top: topt });

, left, right sunt calculate corect (masurate cu liniarul din IE Dev toolbar) da' tooltip-ul tot se afiseaza mult in dreapta.

Evident, pe FF totul functioneaza brici.

ERATA:
---------
currPos = elementul parinte al tooltipului
wndPos = window
element.offx = element.offset().left
Firefox ia in considerare left-ul, IE ia right-ul.
element.w = element.width()

Edited by shiva, 30 March 2010 - 16:14.

@shiva : Încearcă de curiozitate cu 'live' în loc de 'bind' și zi și mie rezultatul.

cezarica, on 31st March 2010, 00:58, said:

De curiozitate sau de enhancement la pluginul meu?
Live-ul nu mi se potriveste in context, din pacate. Probabil mi-ar rezolva o problema cu postback-ul la UpdatePanel-ul din pagina dar ar trebui ca text-ul de afisat in tooltip sa fie returnat de o functie. Facubil rapid da' nu mai am chef.

La problema cu left-ul pe IE i-am dat de cap. CSS left inseamna stanga de la primul element parinte cu position:relative si apoi window, nu invers. Cel putin pe IE.

Ți-am zis de 'live' că am avut și eu un bind pe 'mouseover' și acuma funcționa și în secunda 2 pauză totală. Tu ai testat sau îmi zici o părere?

cezarica, on 31st March 2010, 21:20, said:

Da, mi-am spart si io capul cu asta. Solutia e sa faci un plugin corect cap-coada.
Pentru asta am citit capitolul interesant din jQuery in Action

Quote

Quote

Structura de baza a unui plugin:

(function($){
$.fn.someNewMethod = function() {
	return this.each(function(){
	//
	// Function body goes here -- this refers to individual
	// elements
	//
	});
}
})(jQuery);

M-am jucat destul de mult cu declararea variabilelor in si in exteriorul functiei someNewMethod si atasarea de evenimente direct sau cu bind. Asa merge ok, de fiecare data. Orice alta varianta incercata a functionat doar o singura data.