всплывающее окно встроенного изображения с использованием пользовательского интерфейса jQuery - PullRequest
Новая
       18

всплывающее окно встроенного изображения с использованием пользовательского интерфейса jQuery

0 голосов
/ 11 сентября 2010

Я экспериментирую с идеей.У меня есть блок текста HTML, включая встроенные изображения.Некоторые изображения будут иметь (как я думаю, они называются) всплывающие окна.То есть, наведите курсор мыши на изображение, чтобы вызвать панель управления слева.В будущем панель управления будет переключать режим отображения, изменять размер изображения и т. Д. На данный момент я просто хочу, чтобы он появился.И исчезать, когда мышь покидает изображение или панель управления.

jQuery UI имеет удобную функцию " position ", которая выполняет почти то, что я хочу.

Когда я использую его в Safari 5.0.1, он работает в первый раз, но последующие перемещения мыши приводят к тому, что панель управления все больше смещается из-за того, что выглядит как одна и та же дельта.Похоже, что position () применяет смещение каждый раз к панели, когда я ожидал, что оно перейдет в фиксированное / статическое положение.

Когда я использую его в Firefox 3.6.7, между 1изображение и панель управления.Я хочу, чтобы img и div были идеально выровнены, что я и считал точкой положения.

Что мне нужно сделать, чтобы каждый раз перемещаться в правильное положение?И называется ли эта техника «всплывающим», «эстакадным» или каким-то другим термином?

Вот мой код 

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html><head>
<style>
.flyover {
  border: 1px solid green;
  position: absolute;
  display: none;
}
img {
  border: 1px solid blue;
}
</style>
</head>

<body>
<div class="flyover">*</div>

<P>Here is an image
<img width=30 height=30 src="http://www.dalkescientific.com/writings/diary/alcohol_terse.png">
Mouse over to get the flyover.
</P>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

<script>

var is_shown = 0;

var check_for_close = function () {
  if (!is_shown) {
    $(".flyover").hide();
  }
};

// Don't check right away because the mouse might have
// moved from the image to the flyover or vice versa
var check_exit = function () {
  is_shown = 0;
  setTimeout(check_for_close, 0.0);
};

$(document).ready(function () {
 $("img").mouseenter(function() {
   $(".flyover").position({my: "right top",
                            at: "left top",
                            of: $("img")});
    $(".flyover").show();
   is_shown = 1;
  }).mouseleave(check_exit);

  $(".flyover").mouseenter(function() {
    is_shown = 1;
  }).mouseleave(check_exit);
});
</script>
</body> </html>

1 Ответ

0 голосов
/ 12 сентября 2010

Я нашел ветку jquery на форуме , в которой говорится, что это «ошибка в ядре jQuery, которая уже исправлена, но не выпущена».У меня есть обходной путь для проблемы Safari, которая заключается в использовании комментария nmyvision и сбросе позиции каждый раз перед вызовом позиции, как в 

$(...).css({left:0,top:0}).position({ ... });

Я все еще на пиксель в Firefox, но я будуобойти это как-то иначе.

...