Was ist ein Slider in JQuery?-Front-End-Fragen und Antworten-php.cn

Was ist ein Slider in JQuery?

青灯夜游

Freigeben： 2023-01-04 09:37:07

Original

3951 Leute haben es durchsucht

In JQuery bedeutet Slider „Slider, Floating Block, Scroll Bar Slider“, ein kleines Plug-In in der JQuery-Benutzeroberfläche. Slider-Plugin ermöglicht Auswahl per Slider. Es gibt verschiedene Optionen, wie z. B. mehrere Griffe und Reichweiten. Der Griff kann mit der Maus oder den Pfeiltasten verschoben werden.

Was ist ein Slider in JQuery?

Die Betriebsumgebung dieses Artikels: Windows 10-System, JQuery-Version 1.10.4, Thinkpad T480-Computer.

slider (Slider) ist ein kleines Plug-In in der JQuery-Benutzeroberfläche.

jQuery UI Slider Plugin ermöglicht die Auswahl per Slider. Es gibt verschiedene Optionen, wie zum Beispiel mehrere Griffe und Reichweiten. Der Griff kann mit der Maus oder den Pfeiltasten verschoben werden.

Theming

Slider Widget verwendet das jQuery UI CSS-Framework, um sein Erscheinungsbild zu definieren. 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 verfügt je nach Ausrichtung des Schiebereglers auch über die Klasse ui-slider-horizontal oder ui-slider-vertikal.

ui-slider-handle: Schiebegriff.
ui-slider-range: Der ausgewählte Bereich, der beim Festlegen der Bereichsoption verwendet wird. Wenn die Bereichsoption auf „min“ oder „max“ gesetzt ist, verfügt das Element über eine zusätzliche Klasse ui-slider-range-min bzw. ui-slider-range-max.

Beispiel

Ein einfacher jQuery-UI-Schieberegler.

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

Nach dem Login kopieren

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programming Learning! !

Verwandte Empfehlungen: „jQuery Tutorial“

Das obige ist der detaillierte Inhalt vonWas ist ein Slider in JQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!