Introduktion till JQuery Progress Bar

Framstegsfält är ett jQueryUI-element. Medan vi vet att jQuery är ett JavaScript-bibliotek, som används i html-kod och anledningen till att jQuery används i en html-kod används för att enkelt skapa eller utveckla UI-komponenter (användargränssnitt) med javascript. Så med hjälp av jQuery kan vi göra vår webbplats inte bara mer attraktiv och mer interaktiv. Framstegsfältet är också en av jQuery UI-komponenterna, som används för att visa uppgiften eller processens slutförande i procent.

Vi kan visa framstegsfält i två former som "bestämma framstegsfält" och "obestämd framstegsfält".

  1. Bestäm framstegsfält - Bestäm framstegsfält vi använder i ett scenario där vi kan visa den exakta framsteg eller status för uppgiften. Till exempel antalet skickade filer, procentandel av datakopian, procentsats för nedladdning av filer osv. Eftersom bestämningsfältet Bestämmer kan visa framsteg i formnummeprocenten som 54%, eller så fyllde raden från vänster till höger.
  2. Obestämd framstegsfält - obestämd framstegsfält vi använder i ett scenario där den exakta framsteg eller status för uppgiften är okänd eller inte kan fastställas. Vi kan till exempel inte fastställa framstegen när begäran om att ansluta servern fortsätter.

Syntax av metoden för framstegsfältet ()

Metoden Progressbar () kan användas i två former -

  • $ (element, fortsättning). progressbar-metod
  • $ (element, fortsättning). progressbar-metoden ("action", params)

Det element som vi behöver för att hantera framstegen för kan vi tillämpa $ (element, fortsättning). progressbar (opt) -metod på html-elementet till och hanteras i form av en framstegsfält. Medan alternativet är en parameter som används för att skicka de olika värdena för att ange hur framstegsfältet ska vara beteende och visas. Exempelvis $ ("#elementid") .progressbar ((värde: 30)), här är värdet ett alternativ och 30 är det angivna värdet för alternativet.

På liknande sätt kan vi passera inte bara ett alternativ, men vi kan också passera mer än ett alternativ bara varje alternativ separerat med komma enligt nedan -

$ (väljare, sammanhang) .progressbar ((option1: value1, option2: value2… ..));

De olika alternativen som vi kan skicka till framstegsfältet ges nedan -

  • inaktiverat - Det inaktiverade alternativet om det är satt till så inaktiverar det framstegsfält och falskt är ett standardvärde för inaktiverat.
  • max - Max-alternativet anger maxvärdet för en framstegsfält. Standardvärdet för max är 100.
  • värde - Det värdealternativ som används för att ställa in initialvärdet på framstegsfältet. Standardvärdet för värdet är 0.

Exempel på JQuery Progress Bar

Standardfunktionen för metoden Progressbar () -

Låt oss nu börja några av exemplen på framstegsfältet för att förstå dess funktionalitet. Först skriver vi några exempel för att se standardfunktionen i framstegsfältet utan att överföra några parametrar till framstegsfältet () -metoden. Eftersom framstegsfältet är ett element i ui jQuery, så är det första steget att inkludera jquery externa filer genom att ange till src-attributet för elementet.

Programexempel # 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((
));
));

Detta är standardfunktionen i framstegsfältet

Utgång -

Därefter använder vi värdealternativet och skickar det 40, vilket indikerar att framsteget 40% i framstegsfältet som anges i koden nedan -

Programexempel # 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
));
));

Detta är standardfunktionen i framstegsfältet

Utgång -

Därefter sätter vi till max- och värdealternativ som 400 respektive 40% värde i framstegsfältmetoden för JqueryUI.

Programexempel # 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;
)

Detta är exemplet på framstegsfältet för max = 400 och värden = 40%

Utgång -

Framstegsfältet börjar fylla från vänster till höger och stannar när det nådde 400. Om inget värde tillhandahåller maxalternativet stannar bara fyllningen i höger ände.

Det element som vi behöver för att hantera framstegen för kan vi tillämpa $ (element, fortsättning) .progressbar (“action”, params) metod på html-elementet för att hantera och utföra en åtgärd i framstegsfältet. i form av en framstegsfält. Åtgärden är en parameter som anges som en sträng i det första argumentet. Till exempel $ ("#elementid") .progressbar ('inaktivera'), här avaktivera alternativet inaktivera framstegsfältet.

Några av de åtgärder som kan passeras i $ (element, fortsättning) .progressbar ("action", params) metod ges nedan -

  • förstöra - Den förstörande åtgärden som ska användas för att ta bort framstegsfunktionens funktionalitet för ett element helt och återgå till det initiella tillståndet för ett element. Det är en metod med noll-argument.
  • avaktivera - Avaktivera åtgärden inaktiverar elementets framstegsfunktionsfunktion. Det är en metod med noll-argument.
  • enable - Aktiveringsåtgärden aktiverar elementets framstegsfunktionsfunktion. Det är en metod med noll-argument.
  • option (option) - Handlingsalternativet (option) använder för att få värde från det angivna elementet. Det accepterar ett argumentalternativ, som är en sträng.
  • option - Alternativets åtgärd används för att få ett framstegsfält som är i form av nyckel: värdepar. Det är en metod med noll-argument.
  • option (option, value) - Alternativet (option, value) som används för att ställa in alternativvärdet för progress bar som är associerat med det angivna alternativet.
  • option (optioner) - Funktionen alternativ (alternativ) använder för att ställa in ett eller flera alternativ för framstegsfältet. Den accepterar ett argumentalternativ som är en karta för par med alternativvärde.
  • värde - Den värdeåtgärd som används för att få värdet på alternativ. Värdet indikerar andelen fyllning i framstegsfältet.
  • värde (värde) - Handlingen värde (värde) som används för att ställa in ett nytt värde för procent som ska fyllas i framstegsfältet. Den accepterar ett argumentvärde som är nummer.
  • widget - Den widget-åtgärd som används för att få det element som framstegsfältet används på. Det är en metod med noll-argument.

Därefter ser vi några exempel på framstegsfältet med några åtgärder som nämns ovan. Låter oss se nedanstående program för metod för framstegsfält () med inaktivera () och alternativ (alternativ Namn, värde).

Programexempel # 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;
)

Detta är exemplet på framstegsfältet för Inaktivera åtgärder



Detta är exemplet på framstegsfältet för max- och värdeåtgärder

Utgång -

Ovanstående framstegsfält är inaktiverat, det är därför det inte visar framstegen och nedanför framstegsfältet ställer in max- och värdetalternativet med vissa värden, så framstegen i form av fyllning som visas från vänster till höger.

Element i framstegsfältet hanterar händelser -

Utöver ovanstående kan framstegsfältet också hanteras av evenemanget. JQuery UI tillhandahåller händelsemetod, händelsen aktiveras för en viss händelse. Några av händelserna som kan användas för att hantera framstegsfält ges nedan -

  • förändring (händelse, ui) - När framstegsfältets värde ändras eller förändringar förändras denna händelse.
  • komplett (händelse, ui) - När framsteget når slutet eller når det maximala värdet som denna händelse blir genererad.
  • skapa (händelse, ui) - När framstegsfält skapas, aktiveras denna händelse.

Skriv sedan några av exemplen på ovanstående händelseåtgärd. Följande exempel visar händelsemetodens användning under framstegsfältets funktionalitet. Detta exempel visar användningen av händelser för att ändra och slutföra.

Programexempel # 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;
)

Detta är exemplet på framstegsfältet med händelse



Läser in…

Utgången från ovanstående program är i sekvensen för utförandet som visas nedan -

Framstegsfältet börjar fyllas från vänster till höger och stoppar när det nådde slutet.

Slutsats

1. Framstegsfält är ett jQueryUI-element.

2. Framstegsfältet används för att visa uppgiften eller processens slutförande i procent.

3. Metoden Progressbar () kan användas i två former -

  • $ (element, fortsättning). progressbar-metod
  • $ (element, fortsättning). progressbar-metoden ("action", params)

4. De olika alternativen som vi kan skicka till metoden Progressbar () är -

Inaktiverad

  • max
  • värde

5. Några av de åtgärder som kan passeras i $ (element, fortsättning) .progressbar ("action", params) -metoden är -

  • förstöra
  • disable
  • Gör det möjligt
  • alternativ
  • alternativ (alternativ, värde)
  • alternativ (alternativ)
  • värde
  • värde (värde)
  • widget

6. Händelsen som kan användas för att hantera framstegsfält ges nedan -

  • komplett (händelse, ui)
  • skapa (händelse, ui)
  • förändring (händelse, ui)

Rekommenderade artiklar

Detta är en guide till JQuery Progress Bar. Här diskuterar vi JQuery Progress Bar-metoder och exempel med syntax och output. Du kan också titta på följande artiklar för att lära dig mer -

  1. jQuery Attribut
  2. jQuery Ajax-metoder
  3. jQuery Effects
  4. jQuery-alternativ
  5. Topp 5 typer av Boostrap med provkod
  6. Hur skapar jag en ProgressBar i JavaFX?

Kategori:

Mjukvaruutveckling