Главная » 2012 » Март » 16 » JavaScript's: Подсказки на css+jq
16:11 JavaScript's: Подсказки на css+jq | ||||||||||||
Подсказки на css+jqСоветуем посмотреть: src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  HTML - Разметка Я хотел сделать разметку как можно более простой, но в то же время достаточно гибкой, чтобы учитывать различные сценарии, с которыми вам бы пришлось сталкиваться. Основная ссылка будет иметь класс "tip_trigger", вызывающий подсказку, и класс "tip", выводящий содержимое внутри подсказки. Code <a href="#" class="tip_trigger">Your Link Key Word <span class="tip">This will show up in the tooltip</span></a> CSS - Стили Стили невероятно просты, и я хотел бы вас попросить, чтобы вы творчески поэкспериментировали с ними в собственных проектах. Подсказка скрыта по умолчанию, и вызывается JQuery, чтобы показать её при наведении мыши на ссылку. Мы задаем ее абсолютное позиционирование и z-индекс равный 1000, чтобы быть уверенными, что она всегда будет сверху всех остальных элементов. Code .tip { color: #fff; background:#1d1d1d; display:none; /*--Hides by default--*/ padding:10px; position:absolute; z-index:1000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } Магия - jQuery Первоначальный шаг - подключение JQuery файла Вы можете скачать файл с сайта JQuery, или можете использовать этот, размещенный на Google. Code <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> Сразу после строки, где вы подключили JQuery, откройте новый тег Code <script> и начните свой код с помощью Code $(document).ready Code $(document).ready(function() { //Подсказки $(".tip_trigger").hover(function(){ tip = $(this).find('.tip'); tip.show(); //Показываем подсказку }, function() { tip.hide(); //Скрываем подсказку }).mousemove(function(e) { var mousex = e.pageX + 20; //Получаем X координату var mousey = e.pageY + 20; //Получаем Y координату var tipWidth = tip.width(); //Находим ширину подсказки var tipHeight = tip.height(); //Находим высоту подсказки //Расстояние от элемента до правого края окна просмотра var tipVisX = $(window).width() - (mousex + tipWidth); //Расстояние от элемента до нижней части окна var tipVisY = $(window).height() - (mousey + tipHeight); if ( tipVisX < 20 ) { //Если подсказка превышает координату Х области просмотра mousex = e.pageX - tipWidth - 20; } if ( tipVisY < 20 ) { //Если подсказка превышает координату Y области просмотра mousey = e.pageY - tipHeight - 20; } //Абсолютное положение подсказки в соответствии с положением курсора мыши tip.css({ top: mousey, left: mousex }); }); }); Логика
Некоторые вещи для сведения: Вы увидите, что есть два события в цепях в этой функции: .hover() и .mouseover() ,просмотрите документацию для обоих, если непонятны различия. Вы также заметите потом еще условия tipVisX < 20 и tipVisY < 20 . 20px используется потому, что принимаются 10px (сверху + снизу / слева + справа) отступы для всплывающей подсказки. Материал взят с сайта infoscript.ru
| ||||||||||||