如何更改 Jquery UI 滑块句柄
Posted
技术标签:
【中文标题】如何更改 Jquery UI 滑块句柄【英文标题】：How to change Jquery UI Slider handle 【发布时间】：2010-11-15 11:47:54 【问题描述】：我想修改普通的 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://***.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 插件来识别 handle 选项吗？ （它没有记录在http://docs.jquery.com/UI/Slider 中）。或者它只适用于旧版本的 JQuery？
有什么想法吗？
【问题讨论】：
之前已经回答过这个问题：***.com/questions/1170596/… 问题中的所有三个教程链接现在都已失效。 :( 【参考方案1】：可以更改以将图像添加到 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://***.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>
我认为注册一个 handle 选项是旧方法，在 JQuery-ui 1.7.2 中不再支持？
【讨论】：
哇..我也面临同样的问题，从你的解决方案中得到了解决..谢谢哥们 我在 DW 中复制并粘贴了这个确切的代码并尝试了它。我用自己的图像替换了图像。根本不是滑块也不是图像显示。我已经尝试了有关此主题列出的所有解决方案，但没有任何方法可以更改图像。我将在我自己的线程下发布我的代码，如果有关于 SO 的有效解决方案，希望有人可以列出 SO 上的 URL。 png 的链接已损坏。【参考方案2】：.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;
【讨论】：
【参考方案3】：如果您需要用其他东西完全替换手柄，而不仅仅是重新设计它：
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 ><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>【讨论】：
这应该是彻底性和工作示例的接受答案。为什么你可以简单地注入你自己的样式？【参考方案4】：您还应该将 border:none 设置为该 css 类。
【讨论】：
【参考方案5】：此更改仅更改多手柄滑块中的第一个手柄。在apiDoc中你可以看到：“例如，如果你指定值：[1,5,18]并创建一个自定义句柄，插件将创建另外两个。”
【讨论】：
请添加一些关于您的解决方案的 cmet，说明它为什么以及如何解决问题以上是关于如何更改 Jquery UI 滑块句柄的主要内容，如果未能解决你的问题，请参考以下文章