如何更改JQuery UI滑块句柄
我想修改股票的JQuery UI滑块，以便手柄上有一个箭头，而不是一个正方形。 即我想使用自定义图像作为句柄。
有几个教程可以做到这一点：
- http://jqueryfordesigners.com/slider-gallery/
- http://www.ryancoughlin.com/2008/11/04/using-the-jquery-ui-slider/
- http://www.keepthewebweird.com/creating-a-nice-slider-with-jquery-ui/
但是我无法让它工作。 以下代码导致一个固定的手柄图像：
<!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> <style type="text/css"> #myhandle {position: absolute;z-index: 100;height: 25px;width: 35px;top: auto;background: url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat;} </style> <script type="text/javascript"> $(document).ready(function(){ $("#slider").slider({handle: '#myhandle'}); }); </script> </head> <body> <div id="slider"><div id="myhandle"></div></div> </body> </html> 就好像JQuery没有拿起我想使用myhandle id来处理句柄。 我想知道：我需要一个JQuery插件来识别句柄选项吗？ （在http://docs.jquery.com/UI/Slider中没有logging）。 或者，也许它只适用于旧版本的JQuery？
有任何想法吗？
可以更改以将图像添加到JQuery滑块句柄的CSS类称为“ .ui-slider-horizontal .ui-slider-handle ”。
以下代码显示了一个演示：
<!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> <style type="text/css"> .ui-slider-horizontal .ui-state-default {background: white url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;} </style> <script type="text/javascript"> $(document).ready(function(){ $("#slider").slider(); }); </script> </head> <body> <div id="slider"></div> </body> </html>
我认为注册一个句柄选项是旧的做法，不再支持JQuery-ui 1.7.2？
.ui-slider .ui-slider-handle{ width:50px; height:50px; background:url(..http://img.dovov.comslider_grabber.png) no-repeat; overflow: hidden; position:absolute; top: -10px; border-style:none; }
如果你需要用其他东西完全replace手柄，而不是重新设置它：
您可以通过创build和附加元素并在初始化之前添加ui-slider-handle类来指定自定义句柄元素。
工作示例
$('.slider').append('<div class="my-handle ui-slider-handle"><svg height="18" width="14"><path d="M13,9 5,1 A 10,10 0, 0, 0, 5,17z"/></svg></div>'); $('.slider').slider({ range: "min", value: 10 });
.slider .ui-state-default { background: none; } .slider.ui-slider .ui-slider-handle { width: 14px; height: 18px; margin-left: -5px; top: -4px; border: none; background: none; } .slider { height: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script> <link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> <div class="slider"></div>
你也应该设置border:none到那个css类。
此更改只能在多手柄滑块中首先处理。 在apiDoc中，您可以看到：“例如，如果指定了值：[1,5,18]并创build一个自定义句柄，则该插件将创build另外两个。”
