wake-up-neo.com

So ändern Sie den Jquery UI Slider-Griff

Ich möchte den Standard-JQuery-UI-Schieberegler so ändern, dass auf dem Griff ein Pfeil angezeigt wird, anstatt ein Quadrat zu sein. Ich möchte ein benutzerdefiniertes Bild als Ziehpunkt verwenden.

Es gibt ein paar Tutorials, die es tun:

Aber ich kann es nicht zum Laufen bringen. Der folgende Code führt zu einem stationären Griffabbild:

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

Es ist, als würde JQuery nicht erkennen, dass ich die myhandle - ID für das Handle verwenden möchte. Ich frage mich: Benötige ich ein Plugin für JQuery, um die Option handle zu erkennen? (es ist nicht in http://docs.jquery.com/UI/Slider dokumentiert). Oder funktionierte es vielleicht nur in einer alten Version von JQuery?

Irgendwelche Ideen?

43
Tom

Die CSS-Klasse, die geändert werden kann, um dem JQuery-Schieberegler ein Bild hinzuzufügen, heißt " .ui-slider-horizontal .ui-slider-handle ".

Der folgende Code zeigt eine Demo:

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

Ich denke, dass die Registrierung einer handle - Option die alte Methode war und in JQuery-ui 1.7.2 nicht mehr unterstützt wird?

48
Tom
.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; 
}
18
Andrew Betts

Wenn Sie den Griff ganz durch etwas anderes ersetzen müssen, anstatt ihn nur neu zu gestalten:

Sie können benutzerdefinierte Handle-Elemente angeben, indem Sie die Elemente erstellen und anhängen und die Ui-Slider-Handle-Klasse vor der Initialisierung hinzufügen.

Arbeitsbeispiel

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

14
apaul

Sie sollten auch border:none auf diese CSS-Klasse setzen.

3
Xhanch Studio

Diese Änderung betrifft nur den ersten Griff im Schieberegler mit mehreren Haltern. In apiDoc können Sie Folgendes sehen: "Wenn Sie beispielsweise Werte angeben: [1, 5, 18] und ein benutzerdefiniertes Handle erstellen, erstellt das Plugin die beiden anderen."

0
anatoli