jQuery UI Slider向上移动并在使用时在div中消失 [英] jQuery UI Slider moving upwards and disappearing in the div when used

问题描述

由于我们的内容管理系统使用jQuery和其他各种jQuery UI元素，因此我用jQuery UI滑块替换了MooTools滑块.我遇到了一个问题，在Firefox和Chrome上，滑动条(水平)似乎在向上滑动时会向上移动到div中，从而隐藏了滑动条.似乎它每隔一秒钟移动一次.从萤火虫看来，滑块在使用时获得负的上边距，并且似乎来来往往.不幸的是，我无法在后端显示示例，但是将包括所有代码.希望对jQuery UI有深入了解的人可以对我有所帮助.

I've replaced a MooTools slider with a jQuery UI slider as our content management system uses jQuery and various other jQuery UI elements. I've run into a problem where on Firefox and Chrome the slider bar (it's horizontal) seems to move up into the div when sliding it, and thus hiding the slider. It seems that it does this in every second moving increment. From firebug it looks like the slider gets a negative top-margin when used and seems to come and go. I unfortunetly cannot show an example as it's in our backend, but will include all the code. Hopefully somebody with some extensive knowledge on jQuery UI can help me out.

滑块标记:

<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中则不能(实际上在IE8中有效吗?)

It's certainly the margin-top:-25px that's causing the issue, but I have no idea why jQuery is doing this. It seems to do this only in Firefox and Chrome, but not in IE8 (something actually works in IE??)

有什么想法吗?

推荐答案

这是由于MooTools和jQuery相互干扰导致的问题，原因如下:

This was a problem caused by MooTools and jQuery interfering with each other as per: http://dev.jqueryui.com/ticket/4168

这篇关于jQuery UI Slider向上移动并在使用时在div中消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！