如何更改Jquery UI Slider手

我想修改股票JQuery UI滑块,以便手柄上带有箭头而不是正方形。 即我想使用自定义图片作为句柄。

有一些教程可以做到这一点:

  • [HTTP://jQuery for designers.com/slider-gallery/]
  • [HTTP://呜呜呜.Ryan cough林.com/2008/11/04/using-他和-jQuery-UI-slider/]
  • [HTTP://呜呜呜.keep T和Web weird.com/creating-啊-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插件才能识别handle选项? (未在[http://docs.jquery.com/UI/Slider中进行记录]。]也许它仅在旧版本的JQuery中有效?

有任何想法吗?

Tom asked 2020-07-31T11:39:46Z
5个解决方案
48 votes

可以更改以将图像添加到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>

我认为注册一个handle选项是旧方法,而JQuery-ui 1.7.2不再支持它?

Tom answered 2020-07-31T11:51:43Z
18 votes
.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; 
}
Andrew Betts answered 2020-07-31T11:51:59Z
15 votes

如果您需要完全用其他东西代替手柄,而不仅仅是重新设计它:

您可以通过在初始化之前创建和添加元素并添加ui-slider-handle类来指定自定义句柄元素。

工作范例

<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>
<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>
<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>

apaul answered 2020-07-31T11:52:29Z
3 votes

您还应该将border:none设置为该CSS类。

Xhanch Studio answered 2020-07-31T11:52:50Z
0 votes

此操作仅更改多手柄滑块中的第一个手柄。 在apiDoc中,您可以看到:“例如,如果您指定值:[1,5,18]并创建一个自定义句柄,则插件将创建另外两个。

anatoli answered 2020-07-31T11:53:11Z
translate from https://stackoverflow.com:/questions/1207307/how-to-change-jquery-ui-slider-handle