So ändern Sie das Jquery UI Slider-Handle

Ich möchte den JQuery-UI-Schieberegler für Lagerbestände so ändern, dass das Handle einen Pfeil enthält, anstatt ein Quadrat zu sein. Ich möchte ein benutzerdefiniertes Bild als Handle verwenden.So ändern Sie das Jquery UI Slider-Handle

Es gibt ein paar Tutorials, die es tun:

Aber ich kann es nicht zu arbeiten. Der folgende Code führt zu einem stationären Griff Bild:

<!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 ob JQuery abholen nicht, dass ich die myHandle id für den Griff verwendet werden soll. Ich frage mich: Brauche ich ein Plugin für JQuery, um die Handle Option zu erkennen? (Es ist nicht in http://docs.jquery.com/UI/Slider dokumentiert). Oder hat es vielleicht nur in einer alten Version von JQuery funktioniert?

Irgendwelche Ideen?

Quelle

2009-07-30 Tom

Dies wurde zuvor beantwortet: http://stackoverflow.com/questions/1170596/changing-slider-handle-image – karim79

Alle drei Tutorial Links in der Frage sind jetzt tot. :( –

Die CSS-Klasse, die geändert werden kann, um dem JQuery-Slider-Handle 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, eine Griff Option wurde die alte Art und Weise tun und nicht mehr in JQuery-ui 1.7.2 unterstützt Registrierung?

Quelle

2009-07-30 16:05:12 Tom

wow .. ich war auch vor dem gleichen Problem und das wurde gelöst von Ihrer Lösung .. danke Freund –

Ich kopierte und fügte diesen genauen Code in DW und versuchte es. Ich ersetzte das Bild mit meinem eigenen. Nicht der Slider noch die Ich habe jede Lösung ausprobiert, die zu diesem Thema gehört, und nichts hat dazu beigetragen, die Bilder zu verändern.Ich poste meinen Code unter meinem eigenen Thread und wenn es eine funktionierende Lösung auf SO gibt, kann hoffentlich jemand die URL auf SO auflisten. – Chris22

Der Link zum PNG ist unterbrochen. –

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

Quelle

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

Quelle

2010-08-04 02:07:40

Sollten Sie den Griff mit etwas ganz anderes ersetzen müssen, anstatt nur Restyling es:

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>

Quelle

2014-02-11 18:31:15 apaul

Dies sollte die Annahme-Antwort für Gründlichkeit und das Arbeitsbeispiel sein. Warum können Sie ein bereits vorhandenes Element mit einem eigenen Element versehen? –

Dies ändert nur den ersten Griff im Multihandle Slider. In apiDoc können Sie sehen: "Wenn Sie beispielsweise Werte angeben: [1, 5, 18] und ein benutzerdefiniertes Handle erstellen, erstellt das Plug-in die anderen beiden."

Quelle

2016-02-09 08:30:31 anatoli

Bitte fügen Sie einige Kommentare zu Ihrer Lösung hinzu, warum und wie das Problem gelöst wird –

So ändern Sie das Jquery UI Slider-Handle

Antwort

Verwandte Themen