我在用
jQuery UI's slider widget
,如果
prototype js library
也包括在页面中,我发现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>
