главная

Теги:


Плагин для стилизации подсказок

Простой плагин jQuery для улучшения стиля подсказок.

Маленький размер кода (3kb) скрипта. Подсказки работают почти как обычные в браузере, но с возможностью задания стилей CSS и несколькими опциями. По умолчанию скрипт применяется для любого элемента с атрибутом “title” , но можно легко задать для применения плагина специфический класс.

Код

Стиль для подсказок в примере задается в файле style-my-tooltips.css. Мы используем скругленные углы СSS3.

#s-m-t-tooltip{
	position:fixed; 
	max-width:300px;  
	padding:6px 8px 8px 8px; 
	background:#222; 
	z-index:10; 
	display:inline-block; /*Важно!*/
	/*шрифт*/
	font-family:Verdana, Geneva, sans-serif; 
	font-size:11px; 
	line-height:16px;
	color:#fff; 
	/*скругленные углы css3*/
	-moz-border-radius:5px; 
	-khtml-border-radius:5px; 
	-webkit-border-radius:5px; 
	border-radius:5px;
}

Код плагина из файла jquery.style-my-tooltips.js :

(function($){  
 $.fn.style_my_tooltips = function(options) {  
	var defaults = {  
		tip_follows_cursor: "on", 
		tip_delay_time: 1000
	};
	var options = $.extend(defaults, options);
	$("body").append("
"); //Создаем контейнер для подсказки smtTip=$("#s-m-t-tooltip"); smtTip.hide(); //Скрываем его return this.each(function() { function smtMouseMove(e){ smtMouseCoordsX=e.pageX; smtMouseCoordsY=e.pageY; smtTipPosition(); } function smtTipPosition(){ var cursor_tip_margin_x=0; //Промежуток по горизонтали между курсором и подсказкой var cursor_tip_margin_y=24; //Промежуток по вертикали между курсором и подсказкой var leftOffset=smtMouseCoordsX+cursor_tip_margin_x+$(smtTip).outerWidth(); var topOffset=smtMouseCoordsY+cursor_tip_margin_y+$(smtTip).outerHeight(); if(leftOffset<=$(window).width()){ smtTip.css("left",smtMouseCoordsX+cursor_tip_margin_x); } else { var thePosX=smtMouseCoordsX-(cursor_tip_margin_x)-$(smtTip).width(); smtTip.css("left",thePosX); } if(topOffset<=$(window).height()){ smtTip.css("top",smtMouseCoordsY+cursor_tip_margin_y); } else { var thePosY=smtMouseCoordsY-(cursor_tip_margin_y)-$(smtTip).height(); smtTip.css("top",thePosY); } } $(this).hover(function(e) { // Курсор мыши заходит на объект с подсказкой var $this=$(this); $this.data("smtTitle",$this.attr("title")); //Сохраняем заголовок var theTitle=$this.data("smtTitle"); $this.attr("title",""); //Удаляем заголовок, чтобы предотвратить вывод подсказки по умолчанию smtTip.empty().append(theTitle).hide(); //Устанавливаем текст подсказки и скрываем ее smtTip_delay = setInterval(smtTip_fadeIn, options.tip_delay_time); //Устанавливаем задержку вывода подсказки if(options.tip_follows_cursor=="off"){ smtMouseMove(e); } else { $(document).bind("mousemove", function(event){ smtMouseMove(event); }); } }, function() { // Курсор мыши покидает объект с подсказкой var $this=$(this); if(options.tip_follows_cursor!="off"){ $(document).unbind("mousemove"); } clearInterval(smtTip_delay); if(smtTip.is(":animated")){ smtTip.hide(); } else { smtTip.fadeTo("fast",0); } $this.attr("title",$this.data("smtTitle")); //Устанавливаем заголовок обратно }); function smtTip_fadeIn(){ smtTip.fadeTo("fast",1,function(){clearInterval(smtTip_delay);}); } }); }; })(jQuery);

Как его использовать

Нужно скачать .zip файл и извлечь из него файлы jquery.style-my-tooltips.js и style-my-tooltips.css в туже папку, где хранится ваш документ, в который надо вставить следующий код в тег head:




  

Задержка появления и привязка подсказки к курсору мыши задается с помощью опций (смотрите комментарии в коде).

Готово!

Источник урока: manos.malihu.gr/style-my-tooltips-jquery-plugin

Урок Создан:2011-02-10 Просмотров:1717

Добавить комментарий:


Copyright© 2009 Hosted by Zhost