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 demo

Answer 1

您想要更改默认样式，因为您正在应用的新样式非常难看。多数民众赞成说，你可以覆盖正确的手柄的特殊风格：

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

Answer 2

所有这些，以及整个时间只是你使用了错误的措施。您需要使用em而不是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中），因此您可以看到它们完美排列。当你滑动它们时，它们也可以正常工作。

修改jQuery UI滑块控件

2 个答案: