Question

我已经用jQuery UI滑块替换了MooTools滑块，因为我们的内容管理系统使用jQuery和各种其他jQuery UI元素。我遇到了一个问题，在Firefox和Chrome上，滑动条（它是水平的）在滑动时似乎向上移动到div，从而隐藏了滑块。似乎它在每一个移动增量中都会这样做。从firebug看起来滑块在使用时会得到负的上边距，似乎来来去去。我不幸地无法显示一个例子，因为它在我们的后端，但将包括所有代码。希望有一些关于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>

肯定是边缘顶部：-25px引起了这个问题，但我不知道为什么jQuery会这样做。它似乎只在Firefox和Chrome中这样做，但在IE8中却没有（实际上在IE中有效）？

有什么想法吗？

Answer 1

这对我有用：

        // 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 2

在jquery-ui团队解决这个问题之前，我对jquery-ui lib进行了更改。我已经将这9张'幻灯片'改为'超级滑'

> 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=

然后在页面上的js-code中使用.superslide代替.slide，其中包含 mootools 和 jquery 。例如：

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

希望，这有帮助。

Answer 3

这是由MooTools引起的问题，jQuery根据以下内容相互干扰：http://dev.jqueryui.com/ticket/4168

Answer 4

当将jquery + ui与mootools（它也是jquery库）集成时，两个库都回答“幻灯片”事件，不幸的是，mootools首先拍摄。我可以这样做。

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

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

4 个答案: