JqueryUI - Fortschrittsbalken
Fortschrittsbalken geben den Fertigstellungsgrad einer Operation oder eines Prozesses an. Wir können den Fortschrittsbalken als kategorisierendeterminate progress bar und indeterminate progress bar.
Determinate progress barsollte nur in Situationen verwendet werden, in denen das System den aktuellen Status genau aktualisieren kann. Ein bestimmter Fortschrittsbalken sollte niemals von links nach rechts gefüllt werden und dann für einen einzelnen Prozess wieder leer sein.
Wenn der tatsächliche Status nicht berechnet werden kann, wird ein indeterminate progress bar sollte verwendet werden, um Benutzerfeedback zu geben.
jQueryUI bietet ein benutzerfreundliches Fortschrittsbalken-Widget, mit dem wir Benutzer darüber informieren können, dass unsere Anwendung bei der Ausführung des angeforderten Vorgangs hart arbeitet. jQueryUI bietet die progressbar () -Methode zum Erstellen von Fortschrittsbalken.
Syntax
Das progressbar() Methode kann in zwei Formen verwendet werden -
$ (Selektor, Kontext) .progressbar (Optionen) Methode
$ (Selektor, Kontext) .progressbar ("Aktion", Parameter) Methode
$ (Selektor, Kontext) .progressbar (Optionen) Methode
Die Progressbar- Methode (Optionen) deklariert, dass ein HTML-Element in Form eines Fortschrittsbalkens verwaltet werden kann. Der Parameter options ist ein Objekt, das das Erscheinungsbild und Verhalten von Fortschrittsbalken angibt.
Syntax
$(selector, context).progressbar (options);Sie können eine oder mehrere Optionen gleichzeitig mit dem Javascript-Objekt bereitstellen. Wenn mehr als eine Option bereitgestellt werden muss, trennen Sie diese wie folgt durch ein Komma:
$(selector, context).progressbar({option1: value1, option2: value2..... });In der folgenden Tabelle sind die verschiedenen Optionen aufgeführt , die mit dieser Methode verwendet werden können:
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | behindert Wenn diese Option auf true gesetzt ist, werden die Fortschrittsbalken deaktiviert. Standardmäßig ist der Wertfalse. Option - disabled Wenn diese Option auf true gesetzt ist, werden die Fortschrittsbalken deaktiviert. Standardmäßig ist der Wertfalse. Syntax |
| 2 | max Diese Option legt den Maximalwert für einen Fortschrittsbalken fest. Standardmäßig ist der Wert100. Option - max Diese Option legt den Maximalwert für einen Fortschrittsbalken fest. Standardmäßig ist der Wert100. Syntax |
| 3 | Wert Diese Option gibt den Anfangswert des Fortschrittsbalkens an. Standardmäßig ist der Wert0. Option - value Diese Option gibt den Anfangswert des Fortschrittsbalkens an. Standardmäßig ist der Wert0. Syntax |
Der folgende Abschnitt zeigt Ihnen einige Arbeitsbeispiele für die Progressbar-Funktionalität.
Standardfunktionalität
Das folgende Beispiel zeigt ein einfaches Beispiel für die Progressbar-Funktionalität, bei der keine Parameter an die übergeben werden progressbar() Methode.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#progressbar-1" ).progressbar({
value: 30
});
});
</script>
</head>
<body>
<div id = "progressbar-1"></div>
</body>
</html>Speichern wir den obigen Code in einer HTML-Datei progressbarexample.htmund öffnen Sie es in einem Standardbrowser, der Javascript unterstützt. Sie müssen auch die folgende Ausgabe sehen. Jetzt können Sie mit dem Ergebnis spielen -
Dieses Beispiel zeigt die Erstellung eines Fortschrittsbalkens mithilfe der progressbar () -Methode. Dies ist ein standardmäßig festgelegter Fortschrittsbalken.
Verwendung von max und Wert
Das folgende Beispiel zeigt die Verwendung von zwei Optionen values und max in der Progressbar-Funktion von JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar-2" );
$( "#progressbar-2" ).progressbar({
value: 30,
max:300
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id = "progressbar-2"></div>
</body>
</html>Speichern wir den obigen Code in einer HTML-Datei progressbarexample.htmund öffnen Sie es in einem Standardbrowser, der Javascript unterstützt. Sie müssen auch die folgende Ausgabe sehen. Jetzt können Sie mit dem Ergebnis spielen -
Hier sehen Sie, dass sich der Fortschrittsbalken von rechts nach links füllt und stoppt, wenn der Wert 300 erreicht.
$ (Selektor, Kontext) .progressbar ("Aktion", Parameter) Methode
Die Progressbar- Methode ("Aktion", Parameter) kann eine Aktion für den Fortschrittsbalken ausführen, z. B. das Ändern des gefüllten Prozentsatzes. Die Aktion wird im ersten Argument als Zeichenfolge angegeben (z. B. "Wert" zum Ändern des gefüllten Prozentsatzes). Überprüfen Sie in der folgenden Tabelle die Aktionen, die übergeben werden können.
Syntax
$(selector, context).progressbar ("action", params);;In der folgenden Tabelle sind die verschiedenen Aktionen aufgeführt , die mit dieser Methode verwendet werden können:
| Sr.Nr. | Aktion & Beschreibung |
|---|---|
| 1 | zerstören Diese Aktion entfernt die Fortschrittsbalkenfunktionalität eines Elements vollständig. Die Elemente kehren in ihren Zustand vor der Initialisierung zurück. Diese Methode akzeptiert keine Argumente. Action - destroy Diese Aktion entfernt die Fortschrittsbalkenfunktionalität eines Elements vollständig. Die Elemente kehren in ihren Zustand vor der Initialisierung zurück. Diese Methode akzeptiert keine Argumente. Syntax |
| 2 | zerstören Diese Aktion entfernt die Fortschrittsbalkenfunktionalität eines Elements vollständig. Die Elemente kehren in ihren Zustand vor der Initialisierung zurück. Diese Methode akzeptiert keine Argumente. Action - destroy Diese Aktion entfernt die Fortschrittsbalkenfunktionalität eines Elements vollständig. Die Elemente kehren in ihren Zustand vor der Initialisierung zurück. Diese Methode akzeptiert keine Argumente. Syntax |
| 3 | deaktivieren Diese Aktion deaktiviert die Fortschrittsbalkenfunktionalität eines Elements. Diese Methode akzeptiert keine Argumente. Action - disable Diese Aktion deaktiviert die Fortschrittsbalkenfunktionalität eines Elements. Diese Methode akzeptiert keine Argumente. Syntax |
| 4 | aktivieren Diese Aktion aktiviert die Fortschrittsbalkenfunktion. Diese Methode akzeptiert keine Argumente. Action - enable Diese Aktion aktiviert die Fortschrittsbalkenfunktion. Diese Methode akzeptiert keine Argumente. Syntax |
| 5 | Option (Optionsname) Diese Aktion ruft den Wert ab, der derzeit dem angegebenen Optionsnamen zugeordnet ist . Wobei optionName ein String ist. Action - option( optionName ) Diese Aktion ruft den Wert ab, der derzeit dem angegebenen Optionsnamen zugeordnet ist . Wobei optionName ein String ist. Syntax |
| 6 | Möglichkeit Diese Aktion ruft ein Objekt ab, das Schlüssel / Wert-Paare enthält, die den aktuellen Hash der Fortschrittsbalkenoptionen darstellen. Diese Methode akzeptiert keine Argumente. Action - option Diese Aktion ruft ein Objekt ab, das Schlüssel / Wert-Paare enthält, die den aktuellen Hash der Fortschrittsbalkenoptionen darstellen. Diese Methode akzeptiert keine Argumente. Syntax |
| 7 | Option (Optionsname, Wert) Diese Aktion legt den Wert der Fortschrittsbalkenoption fest, die dem angegebenen Optionsnamen zugeordnet ist . Action - option( optionName, value ) Diese Aktion legt den Wert der Fortschrittsbalkenoption fest, die dem angegebenen Optionsnamen zugeordnet ist . Das Argument optionName ist der Name der einzustellenden Option und value ist der Wert, der für die Option festgelegt werden soll. Syntax |
| 8 | Option (Optionen) Diese Aktion legt eine oder mehrere Optionen für die Fortschrittsbalken fest. Das Argument options ist eine Zuordnung von Options-Wert-Paaren, die festgelegt werden sollen. Action - option( options ) Diese Aktion legt eine oder mehrere Optionen für die Fortschrittsbalken fest. Das Argument options ist eine Zuordnung von Options-Wert-Paaren, die festgelegt werden sollen. Syntax |
| 9 | Wert Diese Aktion ruft den aktuellen Wert von options.value ab , dh den Prozentsatz der Füllung im Fortschrittsbalken. Action - value Diese Aktion ruft den aktuellen Wert von options.value ab , dh den Prozentsatz der Füllung im Fortschrittsbalken. Syntax |
| 10 | Wert (Wert) Diese Aktion gibt einen neuen Wert für den Prozentsatz an, der in den Fortschrittsbalken eingetragen ist. Der Argumentwert kann eine Zahl oder ein Boolescher Wert sein. Action - value( value ) Diese Aktion gibt einen neuen Wert für den Prozentsatz an, der in den Fortschrittsbalken eingetragen ist. Der Argumentwert kann eine Zahl oder ein Boolescher Wert sein. Syntax |
| 11 | Widget Diese Aktion gibt ein jQuery-Objekt zurück, das den Fortschrittsbalken enthält. Diese Methode akzeptiert keine Argumente. Action - widget Diese Aktion gibt ein jQuery-Objekt zurück, das den Fortschrittsbalken enthält. Diese Methode akzeptiert keine Argumente. Syntax |
Beispiel
Lassen Sie uns nun ein Beispiel mit den Aktionen aus der obigen Tabelle sehen. Das folgende Beispiel zeigt die Verwendung der Methoden disable () und option (optionName, value) .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#progressbar-3" ).progressbar({
value: 30
});
$( "#progressbar-3" ).progressbar('disable');
$( "#progressbar-4" ).progressbar({
value: 30
});
var progressbar = $( "#progressbar-4" );
$( "#progressbar-4" ).progressbar( "option", "max", 1024 );
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<h3>Disabled Progressbar</h3>
<div id = "progressbar-3"></div><br>
<h3>Progressbar with max value set</h3>
<div id = "progressbar-4"></div>
</body>
</html>Speichern wir den obigen Code in einer HTML-Datei progressbarexample.htm und öffnen Sie es in einem Standardbrowser, der Javascript unterstützt, müssen Sie auch die folgende Ausgabe sehen -