jQuery UI滑块向上移动并在使用时消失在div中

Question

我已经用jQuery UI滑块替换了MooTools滑块，因为我们的内容管理系统使用jQuery和各种其他jQuery UI元素。我遇到了一个问题，在Firefox和Chrome上滑动条（它是水平的）在滑动时似乎向上移动到div，从而隐藏滑块。它似乎在每一个移动增量中都会这样做。从萤火虫看来，滑块在使用时会出现负顶端边距，并且似乎是来来去去。我很遗憾地无法展示一个例子，因为它在我们的后端，但会包含所有的代码。希望有一些有关jQuery UI的丰富知识的人可以帮助我。

标记为滑块：

<div id="slider_bar"> 
</div> 

CSS滑块

/* === Slider === */ 
.ui-slider { position: relative; text-align: left; border: 0px none; } 
.ui-state-focus .ui-slider-handle { border: 0px none; } 
.ui-slider .ui-slider-handle { top: -9px; margin-left: -12px; width: 30px;height: 25px; background: url(/../../includes/clientArea/imagesNew/manageNavigation/slider-ball.png) 13px 10px no-repeat; position: absolute; z-index: 60; cursor: pointer; } 
.ui-slider .ui-state-hover { } 
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; } 
.ui-slider .ui-state-default { border: 0px none; } 

.ui-slider-horizontal { width: 204px;height: 25px; background: url(/../../includes/clientArea/imagesNew/manageNavigation/sliderBar.png) 0px 0px repeat-x;} 
.ui-slider-horizontal .ui-slider-handle { top: -9px; margin-left: -12px; } 
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; background: url(/../../includes/clientArea/imagesNew/manageNavigation/sliderBar.png) 0px -5px repeat-x; } 
.ui-slider-horizontal .ui-slider-range-min { left: 0; } 
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 

jQuery代码

jQuery('#slider_bar').slider({ min: 10, max:18 }); 

在网页加载时，滑块标记如下所示：

<div id="slider_bar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> 
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a> 
</div> 

后，我将滑块移动，它看起来如下：

<div id="slider_bar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; margin-top: -25px; "> 
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all ui-state-focus" style="left: 37.5%; "></a> 
</div> 

这当然是对的margin-top：-25px这导致这个问题，但我不知道为什么jQuery这样做。它似乎这样做只在Firefox和Chrome，但不是在IE8（东西实际上在IE中工作??）

任何想法？

Answer 1

这是造成MooTools的和jQuery相互干扰按一个问题：http://dev.jqueryui.com/ticket/4168

Answer 2

直到jQuery的UI团队解决了这个问题，我更改了jQuery的UI库。我已经改变了这9个“滑”到“superslide”

> grep -noE '(\W+)slide(\W+)' jquery-ui-1.8.14.custom.min.js 
287::"slide", 
299:="slide"; 
.slide(
301::{slide: 
303:.slide(
417::"slide", 
427:("slide", 
("slide", 
773:.slide= 

然后用.superslide代替​​在你的js代码既具有mootools的和的jQuery在页面上。例如：

jQuery("#slider").slider({ 
    range: "min", 
    min: 5000, 
    max: 1000000, 
    value: 300000, 
     ... 
    superslide: function(event, ui) { 
     ... 
    } 
}); 

希望，这会有所帮助。

Answer 3

这为我工作：

 // This fixed the conflict between slider and motools 
     jQuery.ui.slider.prototype.widgetEventPrefix = 'slider'; 

     jQuery("#slider-range").slider({ 
      range: true, 
      min: 16, 
      max: 99, 
      values: [ 16, 99 ], 
      slide: function(event, ui) { 
      jQuery("#age_range").val(ui.values[ 0 ] + " - " + ui.values[ 1 ]); 
      } 
     }); 

Answer 4

在集成的jQuery UI + MooTools的使用（这也是jQuery库）这两个库回答到“幻灯片”事件，不幸的是，mootools的拍摄first.u可以做喜欢这个。

jQuery（'div.slider'）[0] .slide = null; jQuery（'div.slider'）。slider（{...}）;