Úvod do JQuery Progress Bar

Indikátory průběhu jsou prvkem jQueryUI. Zatímco víme, že jQuery je knihovna JavaScriptu, která se používá v html kódu a důvod pro použití jQuery v html kódu se používá pro snadné vytváření nebo vývoj komponent UI (uživatelského rozhraní) pomocí javascriptu. S pomocí jQuery tak můžeme učinit náš web nejen atraktivnějším a také interaktivnějším. Panel Progress je také jednou z komponent uživatelského rozhraní jQuery, která se používá k zobrazení stavu dokončení úkolu nebo procesu v procentech.

Ukazatel průběhu můžeme zobrazit ve dvou formách, jako je „určit indikátor průběhu“ a „neurčitý ukazatel průběhu“.

  1. Určit ukazatel průběhu - Určete ukazatel průběhu, který používáme ve scénáři, kde můžeme zobrazit přesný průběh nebo stav úkolu. Například počet odeslaných souborů, procento kopie dat, procento stahování souboru atd. Jako lišta Určit průběh může zobrazovat pokrok v procentech počtu formulářů, například 54%, nebo řádek vyplnil formulář zleva doprava.
  2. Neurčitá lišta postupu - Neurčitá lišta postupu používáme ve scénáři, kde přesný průběh nebo stav úkolu není znám nebo nelze určit. Nemůžeme například určit pokrok, když požadavek na připojení serveru pokračuje.

Syntaxe metody progressbar ()

Metodu progressbar () lze použít ve dvou formách -

  • $ (element, cont). metoda progressbar (opce)
  • $ (element, cont). progressbar („action“, params) metoda

Prvek, pro který potřebujeme řídit průběh, můžeme použít $ (element, cont). metoda progressbar (opt) na prvku html do a spravovaná ve formě ukazatele průběhu. Vzhledem k tomu, že volba je parametr používaný pro předávání různých hodnot k určení toho, jak se budou průběžné pruhy chovat a jak se objeví. Například $ (“#elementid”) .progressbar ((value: 30)), zde je hodnota možnost a 30 je poskytovaná hodnota pro hodnotu value.

Podobně můžeme předat nejen jednu možnost, ale můžeme také předat více než jednu možnost jen každou možnost oddělenou čárkou, jak je uvedeno níže -

$ (selector, context) .progressbar ((option1: value1, option2: value2… ..));

Níže jsou uvedeny různé možnosti, které můžeme přenést na indikátor průběhu -

  • disabled - Možnost disabled je nastavena na true, pak zakáže ukazatele průběhu a false je výchozí hodnota disabled.
  • max - Možnost max nastavuje maximální hodnotu pro indikátor průběhu. Výchozí hodnota maxima je 100.
  • value - Možnost value použitá k nastavení počáteční hodnoty ukazatele průběhu. Výchozí hodnota je 0.

Příklady JQuery Progress Bar

Výchozí funkce metody progressbar () -

Dále si ukážeme některé příklady na ukazateli průběhu, abychom pochopili jeho funkčnost. Nejprve napíšeme několik příkladů, abychom viděli výchozí funkčnost ukazatele průběhu, aniž bychom předávali jakékoli parametry metodě progressbar (). Protože ukazatel průběhu je prvkem ui jQuery, prvním krokem je zahrnutí externích souborů jQuery zadáním atributu src prvku.

Příklad programu č. 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((
));
));

Toto je výchozí funkce progresového panelu

Výstup -

Dále použijeme možnost value a předáme ji 40, což znamená, že průběh 40% v ukazateli průběhu, jak je uvedeno v níže uvedeném kódu -

Příklad programu č. 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
));
));

Toto je výchozí funkce progresového panelu

Výstup -

Dále jsme v metodě progressbar v JqueryUI nastavili na maximum a hodnotu na 400 a 40%.

Příklad programu # 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;
)

Toto je příklad pro progressbar pro max = 400 a hodnoty = 40%

Výstup -

Indikátor průběhu začíná plnění zleva doprava a zastaví se, když dosáhne 400. Pokud žádná hodnota neposkytuje možnost max, pak se plnění zastaví pouze na pravém konci.

Prvek, pro který potřebujeme řídit průběh, můžeme na prvek html použít metodu $ (element, cont) .progressbar („action“, params), abychom mohli spravovat a provádět akci na ukazateli pokroku. ve formě ukazatele průběhu. Akce je parametr, který byl zadán jako řetězec v prvním argumentu. Například $ (“#elementid”) .progressbar ('disable'), zde vypíná možnost deaktivovat progress bar.

Níže jsou uvedeny některé z akcí, které lze předat metodou $ (element, cont) .progressbar („action“, params) -

  • zničit - Akce zničení, která se použije k úplnému odstranění funkce ukazatele průběhu a návratu do stavu před zahájením prvku. Je to metoda s nulovým argumentem.
  • disable - Akce zakázat deaktivuje funkci lišty průběhu prvku. Je to metoda s nulovým argumentem.
  • enable - Akce enable umožňuje funkci lišty průběhu prvku. Je to metoda s nulovým argumentem.
  • option (option) - Akce option (option) slouží k získání hodnoty z určeného prvku. Přijímá jednu možnost argumentu, kterou je String.
  • option - Akce options použijte k získání volby progress baru, která je ve formě párů klíč: hodnota. Je to metoda s nulovým argumentem.
  • option (option, value) - Akce option (option, value) slouží k nastavení hodnoty volby progress baru, která je spojena se zadanou možností.
  • option (options) - Akce option (options) slouží k nastavení jedné nebo více možností pro ukazatele průběhu. Přijímá jednu možnost argumentu, kterou je mapa k párům hodnota-hodnota.
  • value - Hodnota akce použitá k získání hodnoty možností. Hodnota udává procento výplně na ukazateli průběhu.
  • value (value) - Akce value (value) slouží k nastavení nové hodnoty pro procento, které má být vyplněno v průběhu. Přijímá jednu argumentovou hodnotu, kterou je číslo.
  • widget - Akce widgetu použitá k získání prvku, na kterém je použita lišta průběhu. Je to metoda s nulovým argumentem.

Dále vidíme několik příkladů ukazatele průběhu s některými činnostmi, které jsou zmíněny výše. Uvidíme níže uvedený program pro metodu progressbar () s akcí disable () a option (optionName, value).

Příklad programu č. 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;
)

Toto je příklad ukazatele pro akci Zakázat



Toto je příklad progressbar pro akci maxima a hodnoty

Výstup -

Výše uvedený ukazatel průběhu je deaktivován, proto nezobrazuje průběh a dolní ukazatel průběhu nastavuje možnost max a value s některými hodnotami, takže průběh ve formě výplně ukazuje zleva doprava.

Prvek pro správu lišty průběhu -

Kromě výše uvedeného může být ukazatel průběhu také spravován událostí. Uživatelské rozhraní jQuery poskytuje metodu události, událost se spustí pro konkrétní událost. Některé z událostí, které lze použít ke správě ukazatele pokroku, jsou uvedeny níže -

  • change (event, ui) - Kdykoli se změní hodnota lišty průběhu nebo změny průběhu, tato událost se spustí.
  • complete (event, ui) - Když průběh ar dosáhne konce nebo dosáhne maximální hodnoty, kterou tato událost získá.
  • create (event, ui) - Kdykoli se vytvoří lišta průběhu, tato událost se spustí.

Dále napište některé příklady výše uvedené akce události. Následující příklad ukazuje použití metody události během funkčnosti lišty průběhu. Tento příklad ukazuje použití událostí ke změně a dokončení.

Příklad programu č. 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;
)

Toto je příklad progressbar s událostí



Načítání…

Výstup výše uvedeného programu je ve sledu provádění, který ukazuje níže -

Indikátor průběhu se začne plnit zleva doprava a zastaví, jakmile dosáhne konce.

Závěr

1. Indikátory průběhu jsou prvkem jQueryUI.

2. Indikátor průběhu se používá k zobrazení stavu dokončení úkolu nebo procesu v procentech.

3. Metodu progressbar () lze použít ve dvou formách -

  • $ (element, cont). metoda progressbar (opce)
  • $ (element, cont). progressbar („action“, params) metoda

4. Různé možnosti, které můžeme předat metodě progressbar (), jsou -

zakázáno

  • max
  • hodnota

5. Některé z akcí, které lze předat, jsou v metodě $ (element, cont) .progressbar („action“, params) -

  • zničit
  • zakázat
  • umožnit
  • volba
  • možnost (možnost, hodnota)
  • možnost (možnosti)
  • hodnota
  • hodnota (hodnota)
  • widget

6. Událost, kterou lze použít pro správu ukazatele průběhu, je uvedena níže -

  • kompletní (událost, ui)
  • vytvořit (událost, ui)
  • změna (událost, ui)

Doporučené články

Toto je průvodce JQuery Progress Bar. Zde diskutujeme metody a příklady JQuery Progress Bar se syntaxí a výstupem. Další informace naleznete také v následujících článcích -

  1. Atributy jQuery
  2. jQuery Ajax metody
  3. jQuery Effects
  4. jQuery Alternativy
  5. Top 5 typů Boostrap se ukázkovým kódem
  6. Jak vytvořit ProgressBar v JavaFXu?

Kategorie:

Vývoj softwaru