Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Нестандартные всплывающие подсказки. Нужна конструктивная критика! (https://javascript.ru/forum/project/35615-nestandartnye-vsplyvayushhie-podskazki-nuzhna-konstruktivnaya-kritika.html)

danik.js 10.03.2013 05:52

Цитата:

Сообщение от Zuenf
ставить z-index: 9999, это нормально

Да, так как подсказка должна вылезти поверх любого элемента. Но 9999 - не предел. Гугли максимальный z-index. Это число кажется будет двойкой в какой-то степени.

Цитата:

Сообщение от Zuenf
var event = e || window.event;
        var target = event.target || event.srcElement;

Это лишнее. В обработчик событий jQuery передается особый jquery-объект события (похожий на нативный Event), так что все кроссбраузерно без костылей.
return false нафига тут залепил? В jQuery-обработчиках return false отменяет действие браузера по умолчанию, например переход по ссылке при клике, или прокрутка страницы при вращении колесика мыши. Для mouseover/mouseout нет действия по умолчанию..

Цитата:

Сообщение от Zuenf
$(idtitle).height()-parseInt($(idtitle).css("padding-top"))-parseInt($(idtitle).css("padding-bottom")

Жесть. Каждый раз делать выборку по id?
Делай так при инициализации:
$el = $(idtitle);

и дальше уже используй $el во всем плагине

Zuenf 10.03.2013 16:17

Все это сделал, плюс немного сократил код:
$(function(){
	initGTitle("#gtitle");//Инициализация
});

function initGTitle(idtitle){//idtitle - id блока для всплывающих подсказок.
	if(!$(idtitle).length){
		$('body').append('<div id="'+idtitle.substring(1)+'"></div>');
		var el = $(idtitle);
 		el.css({
			"position": "absolute",
			"z-index": 2147483647
		}); 
	}
	$(document).mouseover(function(e){
		var target = e.target;
		if (!target.title) return;
		//перемещение текста из title в блок для всплыв. подсказки
		el.empty().append(target.title);
		target.title = "";
		//показать подсказку
		el.css({
			"top":e.clientY-4-el.height()-parseInt(el.css("padding-top"))-parseInt(el.css("padding-bottom")),
			"left":e.clientX+4,
			"display":"block"
		})
		.stop()
		.animate({opacity:1}, 400);
		$(target).data("active", true)//запоминаем элемент, что бы при mouseout выполнялись функции исчезновения только для него.
	});
	$(document).mouseout(function(e){
		var target = e.target; 
		if(!$(target).data("active")) return;//Элемент не активен? выход : продолжаем
		target.title = el.html();
		//скрыть подсказку
		el.stop()
		.animate({
			opacity:0
		}, 400, function(){el.css("display", "none");});
		$(target).data("active", false);
	});
}


И опять вопросы:
Цитата:

Как и куда функция data запоминает информацию?
Как сделать без JQuery, чтоб мой обработчик не мешал пользовательскому?
Спасибо за ответы:)

danik.js 10.03.2013 16:42

Цитата:

Сообщение от Zuenf
Как и куда функция data запоминает информацию?

Всяко в переменные. Посмотри исходники jQuery. Для связи с DOM-объектом у него определяется свойство навроде jQuery1362918094206:4.
Цитата:

Сообщение от Zuenf
Как сделать без JQuery, чтоб мой обработчик не мешал пользовательскому?

Через el.addEventListener('eventtype', handler);


Часовой пояс GMT +3, время: 02:13.