如何更改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?

有任何想法吗?

5 Solutions collect form web for “如何更改JQuery UI滑块句柄”

可以更改以将图像添加到JQuery滑块句柄的CSS类称为“ .ui-slider-horizo​​ntal .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另外两个。”

  • 如何在jQuery中将背景颜色设置为透明?
  • HTML拖放在移动设备上
  • 无法使用HTML设置未定义的jQuery UI自动完成属性“_renderItem”
  • jQuery UI可sorting - 如何取消拖放/sorting项目上的点击事件?
  • jQuery UI手风琴展开/折叠全部
  • 从右向右滑动?
  • jquery ui获取可丢弃元素的ID,当丢弃一个项目
  • 与ASP.NET按钮回发jQuery UI对话框
  • 自动填充请求/服务器响应是什么样的?
  • 如何用JavaScript或jQuery一次拖动多个元素?
  • Datepicker返回未捕获的types错误:undefined'currentDay'