jQuery UI Slider движется вверх и исчезает в div при использовании

Question

Я заменил ползунок MooTools на ползунок jQuery UI, поскольку наша система управления контентом использует jQuery и различные другие элементы пользовательского интерфейса jQuery.Я столкнулся с проблемой, когда в Firefox и Chrome ползунок (он горизонтальный), кажется, перемещается вверх в div при скольжении и, таким образом, скрывает ползунок.Кажется, он делает это с каждым вторым шагом.Из firebug похоже, что ползунок получает отрицательное верхнее поле при использовании и, кажется, приходит и уходит.К сожалению, я не могу показать пример, так как он есть в нашем бэкэнде, но включит весь код.Надеюсь, кто-нибудь, обладающий обширными знаниями в области пользовательского интерфейса jQuery, может помочь мне.

Разметка для слайдера:

<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

Это сработало для меня:

        // 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 слайдов на '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 вместо .slide в вашем js-коде на странице с обоими 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) обе библиотеки отвечают на событие «slide», и, к сожалению, mootools снимает first.u может сделать это следующим образом..slider ') [0] .slide = null;. JQuery ( 'div.slider') слайдер ({...});