如何阻止jquery UI滑块滑动到装订线之外

Question

我使用jquery-ui滑块作为侧面滚动条,并且手柄滑到末端排水沟之外的问题(如果你将滑块向右滑动,可以看到这里).我已经尝试了所有我能用CSS思考的东西,试图让手柄没有比排水沟更进一步,但无济于事.任何建议将不胜感激.

为了澄清我正在添加以下图表来显示问题(由于句柄很小,它非常微妙,但是如果你在CSS中创建一个大句柄,那么句柄 的宽度恰好超过了排水沟的一半).

这是问题的一个问题.基本上我希望手柄留在排水沟内.

alt text http://img268.imageshack.us/img268/124/examplex.png

Answer 1

把手正好超出排水沟的宽度

更像是宽度的一半,所以它并没有真正超越滑块的末端.正确对齐屏幕截图时,您会看到手柄的中心位于滑块的末端,就像我希望它可以进行非常精确的设置一样.当左边是0%,右边是100%时,手柄必须移过末端一点,以便选择100%.

扩大手柄时也是如此.当你的情况下,手柄移动更在右边超过一半的宽度,那么我想它延伸少一半以上在左边？当与CSS打了一下,我得到巨大的把手,就像同样的效果:

.ui-slider-horizontal .ui-state-default {
  /** Defaults: 
      margin-left: -0.6em;
      top: -0.3em;
  */
  width: 69px;
  height: 140px;
  margin-left: -39px;
  top: -68px;
}

使用箭头更好地显示,有点黑客:

.ui-slider-horizontal .ui-state-default {
  width: 40px;
  margin-left: -20px;
  top: 15px;
  background-color: white;
  background-image: url('http://i.stack.imgur.com/ObK9i.png');
  background-repeat: no-repeat;
  border: 0;
}

但是,至于您作为滚动条的用法,请参阅滑块滚动条演示,它似乎可以执行您想要的操作？使用滑块操纵页面上内容的位置.在这种情况下,它充当滚动条,有可能在需要时捕获值.