PrototypeJS вызывает сбой виджета-слайдера jQuery в IE8Есть ли обходной путь? - PullRequest
Новая
       18

PrototypeJS вызывает сбой виджета-слайдера jQuery в IE8Есть ли обходной путь?

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

Я использую виджет ползунка пользовательского интерфейса jQuery , и если на страницу также включена библиотека js прототипа *1003*, я нахожу следующее некорректное поведение в IE8 (другие браузеры в порядке):

  • При наведении курсора на ручку нажатие и удерживание кнопки мыши приводит к тому, что ручка сразу же переходит к нижней части ползунка.Попытка перетащить не перемещает ручку.

  • Однако, если я щелкну точку на ползунке , отличную от текущей позиции ручки, ручка перейдет кэта точка, и я могу затем перетащить ручку свободно (как и должно быть).

Устранение прототипа со страницы разрешает это поведение.

Код ниже - яиспользуя jQuery's noconflict , поэтому в принципе Prototype и jQuery должны хорошо играть вместе ... но здесь явно что-то не так.

Есть идеи о том, как обойти это?Большое спасибо! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <!-- eliminating the following line resolves the bug -->
  <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css" />
  <script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(function () {
      var setupVolumeSlider = function () {
        $j("#volume-slider").slider({
          orientation: "vertical",
          min: 0,
          max: 100
        });
      };
      setupVolumeSlider();
    });
  </script>
  <style type="text/css">
    body { padding: 100px; }
    div#volume-slider { height: 100px;}
  </style>
  </head>
  <body>
    <div id="volume-slider"></div>
  </body>
</html>

1 Ответ

1 голос
/ 23 сентября 2010

Приветствую Скотта Гонсалеса и команду jQuery!Обсуждается здесь и фиксируется на jQuery Master

...