Question

我正在尝试使用JQuery范围滑块，可以为其添加图像处理（其中两个）很好，但我希望两个手柄都有一个不同的图像而不是相同的图像（左箭头和右箭头），这可能吗？

由于

Answer 1

很抱歉拖了一个旧问题，但我还是想做同样的事情。不幸的是，上述方法不起作用，因为它只针对'箭头'标签。这也是由于jquery ui吐出来的;两个标签都有以下标记：

<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 15%;"></a>

您需要做的是注入或更改标记中的类，以便您可以使用某些CSS进行目标。我发现这个片段可以解决问题：

$(window).load(function(){
//Used for slider with two arrows - start
var firstHandleClass = 'first-handle';
var secondHandleClass = 'second-handle';

handle = $('#slider-range A.ui-slider-handle');
handle.removeClass('ui-corner-all');
handle.removeClass('ui-slider-handle');
handle.addClass('handle_');
handle.eq(0).addClass(firstHandleClass);
handle.eq(1).addClass(secondHandleClass);    

});

使用一些JQuery来定位标记。上面添加和删除了两个“箭头”链接的类，您可以明显地根据您的要求进行定制。以上将HTML标记更改为：

<a class="ui-state-default handle_ first-handle" href="#" style="left: 15%;"></a>
<a class="ui-state-default handle_ second-handle" href="#" style="left: 60%;"></a>

允许您单独定位每个链接。希望有所帮助。

Answer 2

我想这应该是你必须做的一些CSS事情。基本上滑块应该是一个achor标签（＆lt; a＆gt;）并且它的样式显示为句柄。因此，通过更改CSS，您可以轻松更改图像。使用firebug来查找句柄中使用的CSS，然后进行编辑。

Firebug是一个帮助Web开发的firefox插件。您可以使用它来检查页面的html标记及其样式。事实上它可以做更多的事情，比如检查http请求等。

http://getfirebug.com/

更改JQuery范围滑块图像

2 个答案: