Ich wollte den JQueryUI-Schieberegler anpassen, kann aber keine Möglichkeit finden, die Slider-Handle-Bilder zu ändern. Der JQuery Themeroller scheint auch die Änderung von Handle-Bildern nicht zuzulassen. Weiß jemand, wie man das macht?Ändern des Slider-Handle-Bildes
Vom jQuery UI docs:
Das jQuery UI Slider Plugin verwendet die jQuery UI CSS-Framework seine Blick auf Art und das Gefühl, einschließlich Farben und Hintergrundtexturen. Wir empfehlen mit dem Tool ThemeRoller erstellen und benutzerdefinierte Designs herunterladen, die einfach zu erstellen und zu warten sind.
Wenn eine tiefere Ebene der Anpassung erforderlich ist, gibt es widget-spezifische Klassen innerhalb des ui.slider.css Sheet verwiesen, die modifiziert werden kann. Diese Klassen sind unten fett hervorgehoben .
In diesem speziellen Fall möchten Sie mit classname ui-slider-handle einen Blick auf das Element nehmen.
Das Standard slider Griffelement hat die folgenden Klassennamen darauf angewandt:
Schauen Sie sich das CSS an, das diesen Klassennamen entspricht, und Sie werden wahrscheinlich in der Lage sein, alles zu bearbeiten, was Sie brauchen.
Auch ich schlage vor, dass Sie Firebug installieren. Dieses Firefox-Plugin wird Ihnen solche Aufgaben erleichtern.
#demo-frame > div.demo {
padding: 10px !important;
float: left;
}
.contentContainer {
float: left;
width: 400px;
height: 500px;
overflow: hidden;
}
.ui-slider-vertical .ui-state-default {
border: none;
width: 28px;
height: 82px;
background: transparent url(volume_bar/shattle.png) no-repeat 0 0;
}
.ui-slider-vertical .ui-slider-handle {
left: 0;
margin-bottom: -41px;
margin-left: 0;
}
.ui-slider-range, .ui-widget-header, .ui-slider-range-min {
background: none;
}
#slider-vertical, .ui-slider {
border: none;
width: 50px;
height: 50px;
background: transparent url(volume_bar/track-bg.png) repeat-y 0 0;
}
jemand im Kommentarbereich für Probe CSS-Code gefragt also hier ist das, was ich den Griff zu ändern verwendet und Scrollbar Hintergrundbild auf meinen eigenen benutzerdefinierten png Bilddateien. Stellen Sie sicher, die CSS nach der JQuery-Bibliothek im Header-Abschnitt einzufügen.
Ich kann keinen Verweis auf ein Bild für den Schieberegler finden. Schlimmer noch, ich kann nicht einmal das Griffbild im/image Ordner finden! - Zur Zeit habe ich absolut keine Hinweise, wo die Griffe herkommen! –
ok, endlich gefunden die Breite/Länge/Ecke Eigenschaften bilden die aktuellen Griffe. Ich bin auch in der Lage, das Hintergrundbild zu ändern. Ich denke, es sollte jetzt funktionieren. –
@Crimson - Wenn Sie Zeit haben, wäre es großartig, wenn Sie das CSS, das Sie verwendet haben, um das Griffbild in einer Antwort auf diese Frage zu ändern. Ich habe das gleiche Problem, bekomme aber kein CSS. – Tom