如何更改JQuery UI滑块手柄

我想修改库存JQuery UI滑块，以便手柄上有一个箭头而不是一个正方形。即我想使用自定义图像作为句柄。如何更改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中未记录）。或者，它可能只适用于旧版本的JQuery？

任何想法？

来源

2009-07-30 Tom

这已被回答之前：http://stackoverflow.com/questions/1170596/changing-slider-handle-image – karim79 2009-07-30 15:24:19

问题中的所有三个教程链接现在已经死了。 :( – 2015-07-23 13:51:01

可以更改以将图像添加到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不再支持？

来源

2009-07-30 16:05:12 Tom

哇..我也面临同样的问题，并从您的解决方案得到解决..谢谢你的朋友 – 2010-04-27 05:12:53

我复制和粘贴在DW确切的代码，并尝试它。我用我自己的替换图像。图像显示在所有我已经尝试了每个解决方案列出有关此主题，没有任何工作，以改变图像。我会在我自己的主题下发布自己的代码，如果有这样的工作解决方案，希望有人可以列出SO上的URL。 – Chris22 2012-05-25 15:58:49

到PNG的链接已损坏。 – 2013-06-03 23:58:19

你也应该设置border:none到那个CSS类。

来源

2010-06-08 02:36:28

.ui-slider .ui-slider-handle{ 
    width:50px; 
    height:50px; 
    background:url(../images/slider_grabber.png) no-repeat; overflow: hidden; 
    position:absolute; 
    top: -10px; 
    border-style:none; 
}

来源

2010-08-04 02:07:40

如果您需要到别处完全取代的东西手柄，而不仅仅是再造型吧：

You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle class before initialization.

Working Example

$('.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>

来源

2014-02-11 18:31:15 apaul

这应该是完整性和工作示例的答案。为什么用你的风格预先存在的元素可以简单地注入自己的元素？ – 2016-09-08 20:22:17

此更改只能在多手柄滑块中处理。在apiDoc中，您可以看到：“例如，如果您指定了值：[1,5,18]并创建一个自定义句柄，则该插件将创建另外两个。”

来源

2016-02-09 08:30:31 anatoli

请在解决问题的原因和方式上添加一些关于您的解决方案的意见 – 2016-02-09 18:08:45

如何更改JQuery UI滑块手柄

回答

相关问题