jQuery滑块意外执行？ [英] jQuery Slider performing unexpectedly?
问题描述
我有，经过许多教程和很多时间，设法使用jQuery构建一个滑块。然而，它不能像我所希望的那样顺利地工作。我使用一个自定义句柄，看到作为新的jQueryUI没有一个句柄选项，我已经创建了一个句柄在CSS。然而，这个句柄超出了滑块的必需边界。我已上传了一个测试页，您可以在此此处。 / p>
我的代码如下：
CSS
< style type =text / cssmedia =screen>
<！ -
body {
padding：0;
font：1emTrebuchet MS，verdana，arial，sans-serif;
font-size：100％;
background-color：＃212121;
margin：0;
}
h1 {
margin-bottom：2px;
}
#container {
background-color：#fff;
width：580px;
margin：15px auto;
padding：50px;
}
/ * slider specific CSS * /
.sliderGallery {
background：url（productbrowser_background_20070622.jpg）no-repeat;
overflow：hidden;
position：relative;
padding：10px;
height：160px;
width：560px;
}
.sliderGallery UL {
position：absolute;
list-style：none;
overflow：none;
white-space：nowrap;
padding：0;
margin：0;
}
.sliderGallery UL LI {
display：inline;
}
.slider {
width：542px;
height：17px;
margin-top：140px;
margin-left：5px;
padding：1px;
position：relative;
background：url（productbrowser_scrollbar_20070622.png）no-repeat;
}
.ui-slider .ui-slider-handle {
width：180px;
margin-left：-90px;
}
.ui-slider-handle {
position：absolute;
cursor：default;
height：17px;
top：0;
background：url（productbrowser_scroller_20080115.png）no-repeat;
z-index：100;
}
.slider span {
color：#bbb;
font-size：80％;
cursor：pointer;
position：absolute;
z-index：110;
}
.slider .slider-lbl1 {
left：50px;
}
.slider .slider-lbl2 {
left：220px;
}
.slider .slider-lbl3 {
left：156px;
}
.slider .slider-lbl4 {
left：280px;
}
.slider .slider-lbl5 {
left：455px;
}
- >
< / style>
jQuery
< script src =jqueryui.jstype =text / javascriptcharset =utf-8>< / script&
< script type =text / javascriptcharset =utf-8>
window.onload = function（）{
var container = $（'div.sliderGallery'）;
var ul = $（'ul'，container）;
var itemsWidth = ul.innerWidth（） - container.outerWidth（）+ 50;
$（'。handle'，container）.slider（{
min：-50，
max：itemsWidth，
stop：function（event，ui） {
ul.animate（{'left'：ui.value * -1}，500）;
}，
幻灯片：function（event，ui）{
ul。 css（'left'，ui.value * -1）;
}
}）;
};
< / script>
身体
< div id =container>
< div class =sliderGallery>
< ul>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< li>< a href =＃>< img src =ki_aikido.png>< / a>< / li>
< / ul>
< div class =slider ui-slider>
< div class =handle>< / div>
< span class =slider-lbl1>我们的书< / span>
< span class =slider-lbl2>其他书籍< / span>
< / div>
< / div>
< / div>
我想知道的是，如果有任何方法强制滑块停留在内部其背后的形象？
提前感谢，
Dronnoc
问题来自于你的句柄被设置为超出它的容器。
这两个问题来自以下
： .ui-slider .ui-slider-handle {
width ：180px;
margin-left：-90px;
}
第二行说滑块允许在左边它是初始容器（因此左溢出）
当把左边的句柄设置为100％时，意味着它将从右边溢出90px（180- 90）。
我会处理的方式是删除 margin-left：-90px; 将滚动div的宽度减小180px，并使用另一个div来显示滚动条图像（位于滑动div下方，但更宽）。
.slider {
width：362px;
height：17px;
margin-top：140px;
margin-left：5px;
padding：1px;
position：relative;
}
.ui-slider .ui-slider-handle {
width：180px;
}
.sliderImg {
background：url（productbrowser_scrollbar_20070622.png）no-repeat;
/ *添加css以将其正确放置在此处* /
}
strong> EDIT：要回答您的评论，对您网页上的CSS进行以下更正应该可以实现：
.slider {
/ *让其余的为* /
margin-left：90px;
}
.ui-slider .ui-slider-handle {
width：180px;
margin-left：-90px;
}
这种组合将使它具有相同的边界（-90 + 90 = 0 ）。
EDIT2：启用对句柄的点击，你需要为你的句柄指定一个高度（否则你将无法点击它）。然而，这将移动你的跨度滑动div下，要克服它，你必须指定自己的顶部位置（因为你已经有它们在绝对很容易;））。
以下应该做。
.handle {
高度：100％;
}
.slider span {
/ *让其余的为* /
top：0;
}
要使工作在span之上，您需要更改您的html有点像：
< div class =handle>
< span id =slider-tagsclass =slider-lbl1>我们的书< / span>
< span id =slider-tagsclass =slider-lbl2>其他书籍< / span>
< / div>
I have, after many tutorials and lots of time, managed to build a slider with jQuery. However, it's not working as smoothly as I would have hoped. I have used a custom handle, and seeing as the new jQueryUI doesn't have a handle option, I have created a handle in CSS. However, this handle is going beyond the required bounds of the slider. I have uploaded a test page which can be found here.
My code is as follows:
CSS
<style type="text/css" media="screen">
<!--
body {
padding: 0;
font: 1em "Trebuchet MS", verdana, arial, sans-serif;
font-size: 100%;
background-color: #212121;
margin: 0;
}
h1 {
margin-bottom: 2px;
}
#container {
background-color: #fff;
width: 580px;
margin: 15px auto;
padding: 50px;
}
/* slider specific CSS */
.sliderGallery {
background: url(productbrowser_background_20070622.jpg) no-repeat;
overflow: hidden;
position: relative;
padding: 10px;
height: 160px;
width: 560px;
}
.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
.sliderGallery UL LI {
display: inline;
}
.slider {
width: 542px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
background: url(productbrowser_scrollbar_20070622.png) no-repeat;
}
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
.ui-slider-handle {
position: absolute;
cursor: default;
height: 17px;
top: 0;
background: url(productbrowser_scroller_20080115.png) no-repeat;
z-index: 100;
}
.slider span {
color: #bbb;
font-size: 80%;
cursor: pointer;
position: absolute;
z-index: 110;
}
.slider .slider-lbl1 {
left: 50px;
}
.slider .slider-lbl2 {
left: 220px;
}
.slider .slider-lbl3 {
left: 156px;
}
.slider .slider-lbl4 {
left: 280px;
}
.slider .slider-lbl5 {
left: 455px;
}
-->
</style>
jQuery
<script src="jqueryui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var container = $('div.sliderGallery');
var ul = $('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth() + 50;
$('.handle', container).slider({
min: -50,
max: itemsWidth,
stop: function (event, ui) {
ul.animate({'left' : ui.value * -1}, 500);
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</script>
Body
<div id="container">
<div class="sliderGallery">
<ul>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
<li><a href="#"><img src="ki_aikido.png"></a></li>
</ul>
<div class="slider ui-slider">
<div class="handle"></div>
<span class="slider-lbl1">Our Books</span>
<span class="slider-lbl2">Other Books</span>
</div>
</div>
</div>
What I'd like to know is if there is any way to force the slider bar to stay inside the image behind it? The test link will let you understand what I mean if I didn't explain myself clearly.
Thanks in advance, Dronnoc
The problem is coming from the fact that your handle is set to go outside of it's container.
The two problems are coming from the following
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
The second line says that the slider is allowed to go 90px before the left of it's initial container (hence the left overflow)
And when setting the left of the handle to 100%, it means that it will overflow on the right from 90px (180-90).
The way I would handle that would be to drop the margin-left:-90px;, to reduce the width of the scrolling div by 180px and to use another div to display the scroll bar image (positioned under your sliding div, but wider).
Something like:
.slider {
width: 362px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
}
.ui-slider .ui-slider-handle {
width:180px;
}
.sliderImg{
background: url(productbrowser_scrollbar_20070622.png) no-repeat;
/*add css to position it correctly here*/
}
EDIT: To answer to your comment, the following correction to the CSS on your page should make that work:
.slider {
/*let the rest as is*/
margin-left: 90px;
}
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
This combination will let it with the same boundaries (-90 + 90 = 0 ) but are going to make it move nicely.
EDIT2:
TO enable the click on the handle, you'll need to specify a height to your handle (otherwise you wouldn't be able to click on it). However this will move your span under the sliding div, to overcome it you'll have to specify their top position (as you already have them in absolute it's easy ;) ).
The following should do.
.handle {
height: 100%;
}
.slider span {
/*let the rest as is*/
top: 0;
}
To make that work above the span, you'll need to change your html a bit like that:
<div class="handle">
<span id="slider-tags" class="slider-lbl1">Our Books</span>
<span id="slider-tags" class="slider-lbl2">Other Books</span>
</div>
这篇关于jQuery滑块意外执行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
