jQuery UI API - Progressbar-Widget

Kategorie

小部件

Nutzung

Beschreibung:Zeigt einen bestimmten oder unbestimmten Fortschrittszustand an.

添加版本：1.6

Der Fortschrittsbalken ist dafür konzipiert, den aktuellen Fertigstellungsprozentsatz eines Prozesses anzuzeigen. Der Fortschrittsbalken wird per CSS flexibel dimensioniert und skaliert standardmäßig so, dass er in die Größe seines übergeordneten Containers passt.

Ein bestimmter Fortschrittsbalken sollte nur verwendet werden, wenn das System den aktuellen Zustand genau aktualisieren kann. Ein bestimmter Fortschrittsbalken füllt sich nicht von links nach rechts und läuft dann wieder auf leer zurück – wenn der tatsächliche Zustand nicht berechnet werden kann, verwenden Sie einen unbestimmten Fortschrittsbalken, um Benutzerfeedback zu geben.

主题

Das Progressbar-Widget verwendet dasjQuery UI CSS-Framework, um seine Look-and-Feel-Stile zu definieren. Wenn Sie Progressbar-spezifische Stile verwenden müssen, können Sie die folgenden CSS-Namen verwenden:

  • ui-progressbar: Der äußere Container des Fortschrittsbalkens. Dieses Element fügt zusätzlich ein ... für unbestimmte Fortschrittsbalken hinzu.ui-progressbar-indeterminate -Klasse.
    • ui-progressbar-value: Dieses Element repräsentiert den gefüllten Teil des Fortschrittsbalkens.
      • ui-progressbar-overlay: Ein Overlay, das zur Anzeige der Animation für einen unbestimmten Fortschrittsbalken verwendet wird.

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 unbestimmter jQuery UI-Fortschrittsbalken.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>进度条部件（Progressbar Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <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="progressbar"></div>
 
<script>
$( "#progressbar" ).progressbar({
  value: false
});
</script>
 
</body>
</html>

Andere Erweiterungen