Einführung in die JQuery-Fortschrittsleiste

Fortschrittsbalken sind ein jQueryUI-Element. Während wir wissen, dass jQuery eine JavaScript-Bibliothek ist, die im HTML-Code verwendet wird und der Grund für die Verwendung der jQuery in einem HTML-Code zum einfachen Erstellen oder Entwickeln von UI-Komponenten (Benutzeroberfläche) mit JavaScript verwendet wird. Mit Hilfe von jQuery können wir unsere Website nicht nur attraktiver und interaktiver gestalten. Die Fortschrittsleiste ist auch eine der Komponenten der jQuery-Benutzeroberfläche, mit der der Task- oder Prozessabschlussstatus in Prozent angezeigt wird.

Wir können den Fortschrittsbalken in zwei Formen anzeigen, z. B. "Fortschrittsbalken bestimmen" und "Fortschrittsbalken unbestimmt".

  1. Bestimmen Sie den Fortschrittsbalken - Bestimmen Sie den Fortschrittsbalken, den wir in einem Szenario verwenden, in dem wir den genauen Fortschritt oder Status der Aufgabe anzeigen können. Zum Beispiel Anzahl der gesendeten Dateien, Prozentsatz der Datenkopie, Prozentsatz des Dateidownloads usw. Wie in der Statusleiste "Bestimmen" angegeben, kann der Fortschritt in Prozent der Formularnummer angezeigt werden, z. B. 54%, oder die Zeile füllte das Formular von links nach rechts aus.
  2. Unbestimmter Fortschrittsbalken - unbestimmter Fortschrittsbalken, den wir in einem Szenario verwenden, in dem der genaue Fortschritt oder Status der Aufgabe unbekannt ist oder nicht bestimmt werden kann. Beispielsweise können wir den Fortschritt nicht bestimmen, wenn die Anforderung zum Herstellen einer Verbindung zum Server fortgesetzt wird.

Syntax der progressbar () -Methode

Die progressbar () -Methode kann in zwei Formen verwendet werden:

  • $ (Element, Fortsetzung). Fortschrittsbalken (Option) -Methode
  • $ (Element, Fortsetzung). Fortschrittsbalken (Aktion, Parameter)

Für das Element, für das wir den Fortschritt verwalten müssen, können wir $ (element, cont) anwenden. progressbar (opt) -Methode für das HTML-Element und verwaltet in Form eines Fortschrittsbalkens. Die Option ist ein Parameter, mit dem die verschiedenen Werte übergeben werden, um festzulegen, wie sich die Fortschrittsbalken verhalten und wie sie aussehen sollen. Beispiel: $ ("#elementid") .progressbar ((value: 30)), hier ist value eine Option und 30 die angegebene value for value-Option.

In ähnlicher Weise können wir nicht nur eine Option übergeben, sondern auch mehr als eine Option, wobei jede Option durch das Komma getrennt ist (siehe unten).

$ (Selektor, Kontext) .progressbar ((Option1: Wert1, Option2: Wert2… ..));

Die verschiedenen Optionen, die wir an den Fortschrittsbalken übergeben können, sind nachfolgend aufgeführt:

  • disabled - Wenn die deaktivierte Option auf true gesetzt ist, werden die Fortschrittsbalken deaktiviert, und false ist der Standardwert disabled.
  • max - Die Option max legt den Maximalwert für einen Fortschrittsbalken fest. Der Standardwert für das Maximum ist 100.
  • value - Die Wertoption, mit der der Anfangswert des Fortschrittsbalkens festgelegt wird. Der Standardwert von value ist 0.

Beispiele für die JQuery-Fortschrittsanzeige

Die Standardfunktionalität der progressbar () -Methode -

Beginnen wir als Nächstes mit einigen Beispielen in der Fortschrittsleiste, um deren Funktionalität zu verstehen. Zunächst schreiben wir einige Beispiele, um die Standardfunktionalität der Fortschrittsanzeige zu überprüfen, ohne Parameter an die progressbar () -Methode zu übergeben. Da der Fortschrittsbalken ein Element von ui jQuery ist, besteht der erste Schritt darin, die externen jquery-Dateien einzuschließen, indem Sie das src-Attribut des Elements angeben.

Programmbeispiel # 1



My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar((
));
));

My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar((
));
));

Dies ist die Standardfunktionalität der Fortschrittsanzeige

Ausgabe -

Als nächstes verwenden wir die Wertoption und übergeben sie 40, was anzeigt, dass der Fortschritt 40% in der Fortschrittsleiste beträgt, wie im folgenden Code angegeben.

Programmbeispiel # 2



My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar(( value : 40
));
));

My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar(( value : 40
));
));

Dies ist die Standardfunktionalität der Fortschrittsanzeige

Ausgabe -

Als nächstes setzen wir in der Progressbar-Methode von JqueryUI die Optionen max und value auf 400 bzw. 40%.

Programmbeispiel # 3


My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid" ).progressbar((
value: 40,
max:400
));
var pb = $( "#pbid" );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 4000 );
));

.ui(
background: blue;
color: #333333;
border: 2px solid #DDDDDD;
font-weight: bold;
)
My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid" ).progressbar((
value: 40,
max:400
));
var pb = $( "#pbid" );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 4000 );
));

.ui(
background: blue;
color: #333333;
border: 2px solid #DDDDDD;
font-weight: bold;
)

Dies ist das Beispiel des Fortschrittsbalkens für max = 400 und Werte = 40%

Ausgabe -

Der Fortschrittsbalken beginnt mit dem Befüllen von links nach rechts und stoppt bei Erreichen von 400. Wenn kein Wert die Option max vorsieht, stoppt das Befüllen nur am rechten Ende.

Für das Element, für das wir den Fortschritt verwalten müssen, können wir die Methode $ (element, cont) .progressbar ("action", params) auf das HTML-Element anwenden, um eine Aktion in der Fortschrittsleiste zu verwalten und auszuführen. in Form eines Fortschrittsbalkens. Die Aktion ist ein Parameter, der im ersten Argument als Zeichenfolge angegeben wird. Zum Beispiel $ (“#elementid”) .progressbar ('disable'), hier deaktiviere Option deaktiviere den Fortschrittsbalken.

Einige der Aktionen, die in der Methode $ (element, cont) .progressbar ("action", params) übergeben werden können, sind nachfolgend aufgeführt:

  • destroy - Die Destroy-Aktion, mit der die Fortschrittsbalken-Funktionalität eines Elements vollständig entfernt und in den Zustand vor dem Start eines Elements zurückgekehrt wird. Es ist eine Nullargumentmethode.
  • disable - Die Deaktivierungsaktion deaktiviert die Fortschrittsbalkenfunktion des Elements. Es ist eine Nullargumentmethode.
  • enable - Die Aktion enable aktiviert die Fortschrittsanzeige des Elements. Es ist eine Nullargumentmethode.
  • option (option) - Die Aktion option (option), mit der der Wert aus dem angegebenen Element abgerufen wird. Es akzeptiert eine Argumentoption, nämlich eine Zeichenfolge.
  • option - Die Optionsaktion ruft eine Fortschrittsanzeige in Form von Schlüssel-Wert-Paaren ab. Es ist eine Nullargumentmethode.
  • option (option, value) - Die Aktion option (option, value) legt den Fortschrittsbalken-Optionswert fest, der der angegebenen Option zugeordnet ist.
  • option (options) - Mit der Aktion option (options) werden eine oder mehrere Optionen für die Fortschrittsbalken festgelegt. Es akzeptiert eine Argumentoption, die eine Zuordnung zu Optionswertpaaren ist.
  • value - Die Wertaktion, mit der der Wert von Optionen abgerufen wird. Der Wert gibt den Füllgrad in der Fortschrittsleiste an.
  • value (value) - Die Aktion value (value), mit der ein neuer Wert für den Prozentsatz festgelegt wird, der in der Fortschrittsleiste angezeigt werden soll. Es akzeptiert einen Argumentwert, der Zahl ist.
  • widget - Die Widget-Aktion, mit der das Element abgerufen wird, auf das der Fortschrittsbalken angewendet wird. Es ist eine Nullargumentmethode.

Als nächstes sehen wir einige Beispiele des Fortschrittsbalkens mit einigen Aktionen, die oben erwähnt wurden. Sehen wir uns das folgende Programm für die progressbar () -Methode mit den Aktionen disable () und option (optionName, value) an.

Programmbeispiel 4



My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid1" ).progressbar((
value: 40
));
$( "#pbid1" ).progressbar('disable');
$( "#pbid2" ).progressbar((
value: 40
));
var pb = $( "#pbid2" );
$( "#pbid2" ).progressbar( "option", "max", 400 );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 400 );
));

.ui (
background: blue;
border: 1px solid #DDDDDD;
font-weight: bold;
color: #333333;
)

My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid1" ).progressbar((
value: 40
));
$( "#pbid1" ).progressbar('disable');
$( "#pbid2" ).progressbar((
value: 40
));
var pb = $( "#pbid2" );
$( "#pbid2" ).progressbar( "option", "max", 400 );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 400 );
));

.ui (
background: blue;
border: 1px solid #DDDDDD;
font-weight: bold;
color: #333333;
)

Dies ist das Beispiel der Fortschrittsanzeige für die Aktion Deaktivieren



Dies ist das Beispiel für den Fortschrittsbalken für Maximal- und Wertaktionen

Ausgabe -

Der obige Fortschrittsbalken ist deaktiviert, daher wird der Fortschritt nicht angezeigt, und der untere Fortschrittsbalken legt die Option Max. Und Wert für einige Werte fest, sodass der Fortschritt in Form einer Füllung von links nach rechts angezeigt wird.

Fortschrittsbalkenelement Ereignisse verwalten -

Darüber hinaus kann der Fortschrittsbalken auch von der Veranstaltung verwaltet werden. Die jQuery-Benutzeroberfläche bietet eine Ereignismethode. Das Ereignis wird für ein bestimmtes Ereignis ausgelöst. Einige der Ereignisse, mit denen der Fortschrittsbalken verwaltet werden kann, sind nachfolgend aufgeführt:

  • change (event, ui) - Immer wenn sich der Fortschrittsbalkenwert oder die Fortschrittsänderungen ändern, wird dieses Ereignis ausgelöst.
  • complete (event, ui) - Wenn der Fortschritt ar das Ende erreicht oder den Maximalwert erreicht, den dieses Ereignis generiert.
  • create (event, ui) - Jedes Mal, wenn ein Fortschrittsbalken erstellt wird, wird dieses Ereignis ausgelöst.

Schreiben Sie als Nächstes einige Beispiele für die obige Ereignisaktion. Das folgende Beispiel veranschaulicht die Verwendung der Ereignismethode während der Fortschrittsbalkenfunktion. Dieses Beispiel zeigt die Verwendung von Ereignissen zum Ändern und Vervollständigen.

Programmbeispiel # 5



My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
pl = $( ".pbc" );
var pb = $( "#pbid" );
$( "#pbid" ).progressbar((
value: false,
change: function() (
pl.text(
pb.progressbar( "value" ) + "%" );
),
complete: function() (
pl.text( "Loading Completed!" );
)
));
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 3000 );
));

.ui-widget-header (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)
.progress-label (
position: absolute;
top: 13px;
left: 50%;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
)

My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
pl = $( ".pbc" );
var pb = $( "#pbid" );
$( "#pbid" ).progressbar((
value: false,
change: function() (
pl.text(
pb.progressbar( "value" ) + "%" );
),
complete: function() (
pl.text( "Loading Completed!" );
)
));
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 3000 );
));

.ui-widget-header (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)
.progress-label (
position: absolute;
top: 13px;
left: 50%;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
)

Dies ist das Beispiel der Fortschrittsanzeige mit Ereignis



Wird geladen…

Die Ausgabe des obigen Programms erfolgt in der folgenden Reihenfolge:

Der Fortschrittsbalken füllt sich von links nach rechts und stoppt, wenn er das Ende erreicht hat.

Fazit

1. Fortschrittsbalken sind ein jQueryUI-Element.

2. Der Fortschrittsbalken wird verwendet, um den Task- oder Prozessabschlussstatus in Prozent anzuzeigen.

3. Die progressbar () -Methode kann in zwei Formen verwendet werden:

  • $ (Element, Fortsetzung). Fortschrittsbalken (Option) -Methode
  • $ (Element, Fortsetzung). Fortschrittsbalken (Aktion, Parameter)

4. Die verschiedenen Optionen, die wir an die progressbar () -Methode übergeben können, sind:

deaktiviert

  • max
  • Wert

5. Einige der Aktionen, die in der Methode $ (element, cont) .progressbar ("action", params) übergeben werden können, sind:

  • zerstören
  • deaktivieren
  • aktivieren
  • Möglichkeit
  • Option (Option, Wert)
  • Option (Optionen)
  • Wert
  • Wert (value)
  • Widget

6. Das Ereignis, mit dem der Fortschrittsbalken verwaltet werden kann, ist unten angegeben:

  • komplett (event, ui)
  • erstellen (event, ui)
  • change (event, ui)

Empfohlene Artikel

Dies ist eine Anleitung zur JQuery-Fortschrittsleiste. Hier werden die Methoden und Beispiele der JQuery-Fortschrittsleiste mit ihrer Syntax und Ausgabe erläutert. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -

  1. jQuery-Attribute
  2. jQuery Ajax-Methoden
  3. jQuery-Effekte
  4. jQuery-Alternativen
  5. Top 5 Arten von Boostrap mit Beispielcode
  6. Wie erstelle ich eine ProgressBar in JavaFX?

Kategorie:

Software-Entwicklung