[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Как сделать всплывающее окошко при наведении?
Форум PHP программистов > JavaScript
zvezda_t
12.05.2011 - 09:32
Здравствуйте, уважаемые программисты.

Скажите пожалуйста, как можно реализовать такую задачу?

Вывести таблицу пользователей, а при наведении на определённого пользователя, чтоб появлялось окошко сверху с информацией о месте жительства данного пользователя.

Это очень сложно?



Спустя 19 минут, 12 секунд (12.05.2011 - 08:51) T1grOK написал(а):
Не не сложно http://dle-templates.info/dle/hacks/163-vs...schie-okna.html. Ток не знаю данный пример нормально работает в разных браузерах или нет.

Спустя 21 минута, 4 секунды (12.05.2011 - 09:12) ApuktaChehov написал(а):
zvezda_t - нет, это не сложно.

К примеру загоняете имя пользователя в див. После этому диву назначаете onmouseover, которая запустит функцию.

Эта функция должна:
1) определить абсолютное положение дива с именем юзера, что бы можно было узнать, куда же вставлять всплывающий слой.
2) создавать еще один див, вставлять туда нужные данные
3) Вставлять слой на страницу по имеющимся координатам.

Но, конечно же гораздо проще все сделать на JQuery. Но как, я не знаю. JQuery не использую - привык работать мозгом wink.gif

Спустя 7 минут, 25 секунд (12.05.2011 - 09:19) T1grOK написал(а):
JQuery более приспособлен к кроссбраузерности, хотя порой бывают конкретные косяки

Спустя 9 минут, 2 секунды (12.05.2011 - 09:29) zvezda_t написал(а):
T1grOK
в IE6 не работает sad.gif

Спустя 25 минут, 42 секунды (12.05.2011 - 09:54) ApuktaChehov написал(а):
zvezda_t - для IE6 нужно писать отдельные скрипты. Но я опять же не помощник. Благо мое руководство понимает, что пользоваться старьем - дрянное дело. А те кто пользуются - это их проблемы.

Спустя 1 час, 10 минут, 30 секунд (12.05.2011 - 11:05) zvezda_t написал(а):
Так как у меня Joomla, нашла интересный вариант здесь

Спустя 2 часа, 6 минут, 27 секунд (12.05.2011 - 13:11) Эли4ка написал(а):
zvezda_t
вот сама страница
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Демонстрация использования плагина TinyTips 1.1 для сайта RUSELLER.COM</title>
		<link rel="stylesheet" type="text/css" media="screen" href="styles/tinyTips.css" />
		<script type="text/javascript" src="js/lib.js"></script>
		<script type="text/javascript" src="js/jquery.tinyTips.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			$('a.tTip').tinyTips('light', 'title');
			$('a.imgTip').tinyTips('yellow', '<img src="images/demo-image.jpg" /><br />Вы можете размещать изображения или любой другой контент в подсказках.');
			$('img.tTip').tinyTips('green', 'title');
			$('h1.tagline').tinyTips('blue', 'tinyTips - отличный инструмент!');
		});
		</script>
	</head>
<body>
	<div id="demo_wrapper">
		<h1 class="massive">Прелестные подсказки для ваших страниц</h1>
		<h1 class="tagline">Очень легкий плагин для jQuery.</h1>
		<p><img class="tTip" src="images/demo-image.jpg" title="Я лягушка!" />Текст для демонстрационной страницы сайта RUSELLER.COM . 
		<a class="tTip" href="#" title="Данная подсказка использует title тега ссылки.">Текст</a> для демонстрационной страницы сайта RUSELLER.COM . 
		Текст для демонстрационной страницы сайта RUSELLER.COM . Текст для демонстрационной страницы сайта RUSELLER.COM .Текст для демонстрационной страницы сайта RUSELLER.COM .
		Текст для <a class="tTip" href="#" title="Данная подсказка также использует title.">демонстрационной страницы </a> сайта RUSELLER.COM .  
		Текст для демонстрационной страницы сайта RUSELLER.COM . Текст для демонстрационной страницы сайта RUSELLER.COM . 
		Текст для <a class="imgTip" href="#">демонстрационной страницы</a> сайта RUSELLER.COM .
		Текст для <a class="tTip" href="#" title="Текст подсказки модет быть очень длинным. При этом подсказка все равно не будет перекрывать элемент, для которого она создана. <br> <br> Текст подсказки. 
		 Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки.
		  Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки. Текст подсказки.
		   Текст подсказки. Текст подсказки. Текст подсказки.">демонстрационной страницы</a> сайта RUSELLER.COM .
		Текст для демонстрационной страницы сайта RUSELLER.COM .</p>
	</div>
</body>
</html>

вот скрипт а другой у гугла скачаешь(библиотека джекветри) и положишь все в нужные папки..
/***********************************************************/
/*                    tinyTips Plugin                      */
/*                      Version: 1.1                       */
/*                      Mike Merritt                       */
/*                 Updated: Mar 2nd, 2010                  */
/***********************************************************/

(function($){  
	$.fn.tinyTips = function (tipColor, supCont) {
		
		if (tipColor === 'null') {
			tipColor = 'light';
		} 
		
		var tipName = tipColor + 'Tip';
		
		/* Установки пользователя
		**********************************/
		
		// Введите разметку для ваших подсказок здесь. Контейнер div должен иметь класс tinyTip и 
		// в нем должен содержаться div с классом "content".
		var tipFrame = '<div class="' + tipName + '"><div class="content"></div><div class="bottom"> </div></div>';
		
		// Скорость проведения анимаций в миллисекундах: 1000 миллисекунд = 1 секуда.
		var animSpeed = 300;
		
		/***************************************************************************************************  /
		/* Конец секции установок пользователя - Не редактируйте ниже данной линии, если не хотите измениить функционирование плагина. */
		/***************************************************************************************************/  
		
		// Глобальные переменные;
		var tinyTip;
		var tText;
		
		// Когда курсор мыши проходит над элементом, то подсказка выводится на экран
		$(this).hover(function() {
		
			// Вставка разметки для полдсказки в код страницы.
			// Устанавливаем глобальные значения и скрываем подсказку.
			$('body').append(tipFrame);
			var divTip = 'div.'+tipName;
			tinyTip = $(divTip);
			tinyTip.hide();
			
			// Получаем контент подсказки из атрибута title (или предписанного контента) и
			// вставляем его в разметку для текущей подсказки. Примечание: атрибут title используется
			// если не задан другой источник контента.
			if (supCont === 'title') {
				var tipCont = $(this).attr('title');
			} else if (supCont !== 'title') {
				var tipCont = supCont;
			}
			$(divTip + ' .content').html(tipCont);
			tText = $(this).attr('title');
			$(this).attr('title', '');
			
			// Смещения для подсказки подбираются так, чтоды она была центрирована над элементом, но 
			// размещалась так, чтобы не перекрывать элемент.
			var yOffset = tinyTip.height() + 2;
			var xOffset = (tinyTip.width() / 2) - ($(this).width() / 2);
			
			// Получаем координаты элемента с подсказкой и делаем новую копию,
			// так что мы сохраняем оригинал нетронутым.
			var pos = $(this).offset();
			var nPos = pos;
			
			// Добавляем смещение для позиции подсказки
			nPos.top = pos.top - yOffset;
			nPos.left = pos.left - xOffset;
			
			// Устанавливаем для подсказки абсолютное позиционирование и высокое значение z-index, 
			// а затем размещаем ее в нужное место и показываем.
			tinyTip.css('position', 'absolute').css('z-index', '1000');
			tinyTip.css(nPos).fadeIn(animSpeed);
			
		}, function() {
			
			$(this).attr('title', tText);
		
			// Плавно скрываем подсказку, когда курсор мыши перемещается с элемента,
			// и удалаем ее из структуры DOM.
			tinyTip.fadeOut(animSpeed, function() {
				$(this).remove();
			});
			
		});
		
	}

})(jQuery);

если помогла то плюс.
и это там все под себя подредактируешь..для себя делала ведь.будут вопросы пиши.

Спустя 11 минут, 19 секунд (12.05.2011 - 13:22) Игорь_Vasinsky написал(а):
wink.gif ... вот времена....раньше сами писали... а счас есть готовы ui... wink.gif

Спустя 1 минута, 2 секунды (12.05.2011 - 13:24) Эли4ка написал(а):
Игорь_Vasinsky
потому что Вы мне помогали и я вам помогу чем смогу..и что такое ui?


_____________

Что ты сделал сегодня - для завтра?
"Приидите ко Мне вси труждающиеся и обремененнии и Аз упокою вы, возмите иго Мое на себе и научитеся от Мене яко кроток есмь и смирен сердцем и обрящете покой душам вашим, иго бо Мое благо и бремя Мое легко есть."(Мф. 11:28-30)
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.