修改 jQuery UI 滑块控件

Question

我使用 jQuery UI 滑块控件。我的滑块宽度为 200px .我希望左手柄的中心向右移动14px右移动，右手柄的中心向左偏移14px。

我的滑块将超过 172px （ 200 -14 - 14 ）。background-image措施200px。14px的长度计算如下：

width of the handle (28px) / 2

默认情况下，我使用margin-left: 0px;删除margin-left:-14px。但是，我的右手柄向右移动28px！

你能帮我解开这个谜团吗？

.ui-slider .ui-slider-handle {
    width: 28px; 
    height: 28px; 
    background: url(http://hitskin.com/themes/13/67/44/i_right_arrow.png) no-repeat 0 0;
    overflow: hidden; 
    position: absolute;
    margin-left: 0;
    top: -7px;
    border-style: none;
    cursor: help;
}​

JSFiddle 演示

Answer 1

奇怪的是你想

改变默认样式，因为你正在应用的新样式非常丑陋。也就是说，您可以像这样覆盖正确手柄的特殊样式：

$(function(){
   $('.ui-slider a:nth-child(odd)').css('margin-left','-28px');
});

Answer 2

所有这些，整个过程只是你使用了错误的度量。您需要使用 em s 而不是 px s，这是我在查看原始大小和margin-left时发现的。所以。。。

.ui-slider .ui-slider-handle {
    height: 1.6em;
    width: 1.6em;
    margin-left: -.8em;
    position: absolute;
    top: -7px;
    background: url(http://www.celinni.com/creaprint/js/ui/images/bulle.png) no-repeat center center;
    border-style: none;
    cursor: help;
}

http://jsfiddle.net/userdude/3teR3/5/

我已经使图像部分透明（在Firefox或Chrome中），因此您可以看到它们完美排列。当你滑动它们时，它们也可以正常工作。