jQuery UI API - Slider-Widget

Kategorie

小部件

Nutzung

Beschreibung:Ziehen Sie einen Anfasser, um einen numerischen Wert auszuwählen.

添加版本：1.5

Das jQuery UI Slider-Plugin ermöglicht die Auswahl über einen Slider. Es gibt verschiedene Optionen, wie z. B. mehrere Anfasser und Bereiche. Anfasser können mit der Maus oder den Pfeiltasten bewegt werden.

Das Slider-Widget erstellt Anfasser-Elemente mit der Klasseui-slider-handlebei der Initialisierung. Sie können benutzerdefinierte Anfasser-Elemente angeben, indem Sie vor der Initialisierung Elemente erstellen und anhängen und dabei dieui-slider-handleKlasse zu den Elementen hinzufügen. Es werden nur so viele Anfasser erstellt, wie erforderlich sind, um dievalue/valuesLänge abzugleichen. Wenn Sie beispielsweisevalues: [ 1, 5, 18 ]angeben und einen benutzerdefinierten Anfasser erstellen, erstellt das Plugin die anderen beiden.

主题

Das Slider-Widget verwendet dasjQuery UI CSS-Framework, um das Styling seines Erscheinungsbilds festzulegen. Wenn Sie Slider-spezifische Stile verwenden müssen, können Sie die folgenden CSS-Klassennamen verwenden:

  • ui-slider: Die Spur des Slider-Steuerelements. Dieses Element wird je nach Sliderorientationzusätzlich eineui-slider-horizontaloderui-slider-vertical -Klasse.
    • ui-slider-handle: Der Slider-Handle.
    • ui-slider-range: Wenn dierangeOption gesetzt ist, wird der ausgewählte Bereich verwendet. Wenn dierangeOption gesetzt ist auf"min"oder"max", dann hat dieses Element zusätzlichui-slider-range-minoderui-slider-range-max -Klasse.

Abhängigkeiten

Zusätzliche Hinweise

  • Dieses Widget benötigt etwas funktionales CSS, andernfalls funktioniert es nicht. Wenn Sie ein benutzerdefiniertes Theme erstellen, verwenden Sie die widgetspezifische CSS-Datei als Ausgangspunkt.

Beispiele

Ein einfacher jQuery UI Slider.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>滑块部件（Slider Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>#slider { margin: 10px; }    </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="slider"></div>
 
<script>
$( "#slider" ).slider();
</script>
 
</body>
</html>

Andere Erweiterungen