Pasek postępu JQuery - Przewodnik po przykładach paska postępu JQuery

• Wprowadzenie do paska postępu JQuery
• Jest to domyślna funkcjonalność paska postępu
• Jest to domyślna funkcjonalność paska postępu
• To jest przykład paska postępu dla max = 400 i wartości = 40%
• To jest przykład paska postępu dla akcji Wyłącz
• To jest przykład paska postępu dla akcji maks. I wartości
• To jest przykład paska postępu ze zdarzeniem

Wprowadzenie do paska postępu JQuery

Paski postępu są elementem jQueryUI. Podczas gdy wiemy, że jQuery jest biblioteką JavaScript, która jest używana w kodzie html, a powód użycia jQuery w kodzie html służy do łatwego tworzenia lub rozwijania komponentów interfejsu użytkownika (interfejsu użytkownika) przez javascript. Dzięki jQuery możemy sprawić, że nasza strona internetowa będzie nie tylko bardziej atrakcyjna, ale także bardziej interaktywna. Pasek postępu jest także jednym ze składników interfejsu użytkownika jQuery, który służy do procentowego wyświetlania stanu ukończenia zadania lub procesu.

Możemy pokazać pasek postępu w dwóch formach, takich jak „pasek postępu wyznaczania” i „pasek postępu nieokreślony”.

1. Określ pasek postępu - Określ pasek postępu, którego używamy w scenariuszu, w którym możemy pokazać dokładny postęp lub status zadania. Na przykład liczba wysyłanych plików, procent kopiowania danych, procent pobierania pliku itp. Ponieważ pasek postępu Określanie może wyświetlać postęp w procentach liczby formularzy, np. 54%, lub wiersz wypełniał formularz od lewej do prawej.
2. Nieokreślony pasek postępu - nieokreślony pasek postępu używamy w scenariuszu, w którym dokładny postęp lub status zadania jest nieznany lub nie można go ustalić. Na przykład nie możemy określić postępu, gdy żądanie połączenia z serwerem będzie kontynuowane.

Składnia metody progressbar ()

Metodę progressbar () można stosować w dwóch formach -

• $ (element, cd). metoda paska postępu (opcja)
• $ (element, cd). metoda progressbar („akcja”, parametry)

Elementem, dla którego musimy zarządzać postępem, możemy zastosować $ (element, cd). metoda progressbar (opt) na elemencie HTML do i zarządzana w formie paska postępu. Opcja jest parametrem używanym do przekazywania różnych wartości w celu określenia, w jaki sposób paski postępu mają być zachowaniem i wyglądem. Na przykład $ („#elementid”). Pasek postępu ((wartość: 30)), tutaj wartość jest opcją, a 30 jest wartością podaną dla opcji wartości.

Podobnie, możemy przekazać nie tylko jedną opcję, ale możemy również przekazać więcej niż jedną opcję tylko każdą opcję oddzieloną przecinkiem, jak podano poniżej -

$ (selektor, kontekst). pasek postępu ((opcja1: wartość1, opcja2: wartość2… ..));

Różne opcje, które możemy przekazać do paska postępu, podano poniżej -

• disabled - opcja disabled, jeśli ustawiona na true, wyłącza paski postępu, a false jest domyślną wartością wyłączoną.
• max - Opcja max ustawia maksymalną wartość dla paska postępu. Domyślna wartość maksimum to 100.
• wartość - Opcja wartości używana do ustawienia początkowej wartości paska postępu. Domyślna wartość to 0.

Przykłady paska postępu JQuery

Domyślna funkcjonalność metody progressbar () -

Następnie zacznijmy kilka przykładów na pasku postępu, aby zrozumieć jego funkcjonalność. Najpierw piszemy kilka przykładów, aby zobaczyć domyślną funkcjonalność paska postępu bez przekazywania żadnych parametrów do metody progressbar (). Ponieważ pasek postępu jest elementem interfejsu jQuery interfejsu użytkownika, pierwszym krokiem jest dołączenie plików zewnętrznych jquery poprzez określenie atrybutu src tego elementu.

Przykład programu nr 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((
));
));



Jest to domyślna funkcjonalność paska postępu

Wynik -

Następnie używamy opcji wartości i przekazujemy ją 40, co oznacza, że ​​postęp 40% na pasku postępu, jak podano w poniższym kodzie -

Przykład programu nr 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
));
));



Jest to domyślna funkcjonalność paska postępu

Wynik -

Następnie ustawiamy opcje maks. I wartości odpowiednio na wartość 400 i 40% w metodzie paska postępu JqueryUI.

Przykład programu nr 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;
)



To jest przykład paska postępu dla max = 400 i wartości = 40%

Wynik -

Pasek postępu zaczyna się wypełniać od lewej do prawej i zatrzymuje się, gdy osiągnie wartość 400. Jeśli żadna wartość nie przewiduje opcji maksymalnej, wówczas wypełnianie zatrzymuje się tylko na prawym końcu.

Elementem, dla którego musimy zarządzać postępem, możemy zastosować metodę $ (element, cd) .progressbar („akcja”, parametry) na elemencie HTML, aby zarządzać i wykonać akcję na pasku postępu. w formie paska postępu. Akcja jest parametrem, który określono jako ciąg w pierwszym argumencie. Na przykład $ („#elementid”) .progressbar („wyłącz”), tutaj wyłącz opcję wyłącz pasek postępu.

Niektóre akcje, które można przekazać w metodzie $ (element, cd) .progressbar („akcja”, parametry) podano poniżej -

• destroy - akcja zniszczenia używana do całkowitego usunięcia funkcji paska postępu elementu i powrotu do stanu sprzed inicjacji elementu. Jest to metoda z zerowym argumentem.
• disable - czynność disable wyłącza funkcję paska postępu elementu. Jest to metoda z zerowym argumentem.
• enable - akcja enable włącza funkcję paska postępu elementu. Jest to metoda z zerowym argumentem.
• opcja (opcja) - czynność opcja (opcja) służy do uzyskania wartości z określonego elementu. Akceptuje jedną opcję argumentu, która jest ciągiem.
• opcja - akcja opcji służy do uzyskania opcji paska postępu w postaci par klucz: wartość. Jest to metoda z zerowym argumentem.
• opcja (opcja, wartość) - czynność opcja (opcja, wartość) służy do ustawiania wartości opcji paska postępu, która jest powiązana z określoną opcją.
• opcja (opcje) - Akcja opcja (opcje) służy do ustawiania jednej lub więcej opcji dla pasków postępu. Akceptuje jedną opcję argumentu, która jest odwzorowaniem na pary opcja-wartość.
• wartość - akcja wartości używana do uzyskania wartości opcji. Wartość wskazuje procent wypełnienia paska postępu.
• wartość (wartość) - działanie wartość (wartość) służy do ustawienia nowej wartości procentowej do wypełnienia na pasku postępu. Akceptuje jedną wartość argumentu, którą jest liczba.
• widget - akcja widgetu używana do uzyskania elementu, do którego zastosowano pasek postępu. Jest to metoda z zerowym argumentem.

Następnie widzimy przykłady paska postępu z pewnymi działaniami wymienionymi powyżej. Pozwala zobaczyć poniższy program dla metody progressbar () z działaniem disable () i opcjonalnym (optionName, value).

Przykład programu nr 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;
)



To jest przykład paska postępu dla akcji Wyłącz

To jest przykład paska postępu dla akcji maks. I wartości

Wynik -

Powyższy pasek postępu jest wyłączony, dlatego nie pokazuje postępu, a poniższy pasek postępu ustawia opcję wartości maksymalnej i wartości z pewnymi wartościami, więc postęp w postaci wypełnienia jest wyświetlany od lewej do prawej.

Element paska postępu zarządza zdarzeniami -

Oprócz powyższego, pasek postępu może być również zarządzany przez zdarzenie. Interfejs użytkownika jQuery zapewnia metodę zdarzenia, zdarzenie jest wyzwalane dla określonego zdarzenia. Niektóre zdarzenia, które można wykorzystać do zarządzania paskiem postępu, podano poniżej -

• change (event, ui) - Za każdym razem, gdy zmienia się wartość paska postępu lub zmienia się postęp, to zdarzenie jest wywoływane.
• complete (event, ui) - Gdy postęp ar osiągnie koniec lub osiągnie maksymalną wartość, to zdarzenie zostanie wygenerowane.
• create (event, ui) - Za każdym razem, gdy tworzony jest pasek postępu, to zdarzenie jest uruchamiane.

Następnie napisz kilka przykładów powyższej akcji zdarzenia. Poniższy przykład pokazuje użycie metody zdarzenia podczas działania paska postępu. Ten przykład pokazuje użycie zdarzeń do zmiany i zakończenia.

Przykład programu nr 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;
)



To jest przykład paska postępu ze zdarzeniem

Ładowanie…

Dane wyjściowe powyższego programu znajdują się w sekwencji wykonania pokazanej poniżej -

Pasek postępu zaczyna się wypełniać od lewej do prawej i zatrzymuje się po osiągnięciu końca.

Wniosek

1. Paski postępu są elementem jQueryUI.

2. Pasek postępu służy do procentowego przedstawienia stanu zadania lub zakończenia procesu.

3. Metoda progressbar () może być używana w dwóch formach -

• $ (element, cd). metoda paska postępu (opcja)
• $ (element, cd). metoda progressbar („akcja”, parametry)

4. Różne opcje, które możemy przekazać do metody progressbar () to:

niepełnosprawny

• max
• wartość

5. Niektóre akcje, które można przekazać w metodzie $ (element, cd) .progressbar („akcja”, parametry) to -

• zniszczyć
• wyłączyć
• włączyć
• opcja
• opcja (opcja, wartość)
• opcja (opcje)
• wartość
• wartość (wartość)
• widżet

6. Zdarzenie, które można wykorzystać do zarządzania paskiem postępu, podano poniżej -

• Complete (zdarzenie, interfejs użytkownika)
• Utwórz (wydarzenie, interfejs użytkownika)
• zmiana (zdarzenie, interfejs użytkownika)

Polecane artykuły

To jest przewodnik po pasku postępu JQuery. Tutaj omawiamy metody i przykłady paska postępu JQuery ze składnią i danymi wyjściowymi. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej -

1. Atrybuty jQuery
2. Metody jQuery Ajax
3. Efekty jQuery
4. jQuery Alternatywy
5. Top 5 rodzajów Boostrap z przykładowym kodem
6. Jak utworzyć pasek postępu w JavaFX?