Бар прогресу JQuery - Посібник з прикладів панелі просування JQuery

• Вступ до панелі прогресу JQuery
• Це функціональна функція панелі прогресу
• Це функціональна функція панелі прогресу
• Це приклад панелі прогресу для max = 400 та значень = 40%
• Це приклад панелі прогресу для дії "Відключити"
• Це приклад панелі прогресу для дії макс та значення
• Це приклад панелі прогресу з подією

Вступ до панелі прогресу JQuery

Штрихи прогресу - це елемент jQueryUI. Тоді як нам відомо, що jQuery - це бібліотека JavaScript, яка використовується в html-коді, а причина використання jQuery в коді html використовується для легкого створення або розвитку компонентів інтерфейсу користувача (інтерфейсу користувача) за допомогою JavaScript. Тож за допомогою jQuery ми можемо зробити наш веб-сайт не тільки більш привабливим, а й більш інтерактивним. Рядок «Прогрес» також є одним із компонентів інтерфейсу jQuery, який використовується для відображення у відсотках стану завдання або процесу завершення.

Ми можемо показати панель прогресу у двох формах, таких як "визначити смугу прогресу" та "невизначена смуга прогресу".

1. Визначення смуги прогресу. Визначте смугу прогресу, яку ми використовуємо в сценарії, де ми можемо показати точний хід виконання або стан завдання. Наприклад, кількість відправлених файлів, відсоток копії даних, відсоток завантаження файлу тощо. Так як на панелі "Визначити хід виконання" може відображатися прогрес у кількості відсотків форми, як 54%, або рядок заповнює форму зліва направо.
2. Індетермінантна смуга прогресу - невизначена смуга прогресу, яку ми використовуємо в сценарії, коли точний хід або стан завдання невідомий або не може бути визначений. Наприклад, ми не можемо визначити прогрес, коли надходить запит на підключення сервера.

Синтаксис методу progressbar ()

Метод progressbar () може використовуватися у двох формах -

• $ (елемент, продовження). метод панелі прогресу (варіант)
• $ (елемент, продовження). метод пробігу ("дія", парами)

Елемент, для якого нам потрібно керувати прогресом, ми можемо застосувати $ (element, cont). метод progressbar (opt) для елемента html до та керується у вигляді рядка прогресу. Тоді як параметр - це параметр, який використовується для передачі різних значень, щоб визначити, як мають бути поведінки та виглядають смуги прогресу. Наприклад, $ ("#elementid") .progressbar ((значення: 30)), тут значення є опцією, а 30 - наданим значенням для параметра значення.

Аналогічно, ми можемо передавати не лише один варіант, але також можемо пропустити більше одного варіанта, лише кожен варіант, розділений комою, як зазначено нижче -

$ (селектор, контекст) .progressbar ((option1: value1, option2: value2… ..));

Нижче наведено різні варіанти, які ми можемо передати панелі прогресу -

• вимкнено - параметр "Відключено", якщо встановлено значення "Істинне", тоді він відключає смуги прогресу, а значення "false" - значення за замовчуванням.
• max - Параметр max встановлює максимальне значення для смуги прогресу. Значення за замовчуванням макс. 100.
• value - Параметр значення, який використовується для встановлення початкового значення панелі прогресу. Значення за замовчуванням значення 0.

Приклади панелі прогресу JQuery

Функція за замовчуванням методу progressbar () -

Далі почнемо кілька прикладів на панелі прогресу, щоб зрозуміти її функціональність. Спочатку ми пишемо кілька прикладів, щоб побачити функціональну функцію панелі прогресу за замовчуванням, не передаючи жодних параметрів методу панелі прогресу (). Оскільки панель прогресу є елементом ui jQuery, тому першим кроком є ​​включення зовнішніх файлів jquery, вказавши атрибут src елемента.

Приклад програми №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((
));
));



Це функціональна функція панелі прогресу

Вихід -

Далі ми використовуємо параметр значення і передаємо його 40, що вказує на те, що прогрес 40% на панелі прогресу, як зазначено в коді нижче -

Приклад програми №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
));
));



Це функціональна функція панелі прогресу

Вихід -

Далі ми встановлюємо параметри max і value як значення 400 і 40% відповідно в методі JqueryUI на панелі прогресу.

Приклад програми №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;
)



Це приклад панелі прогресу для max = 400 та значень = 40%

Вихід -

Рядок прогресу починає заповнюватися зліва направо і зупиняється, коли вона досягає 400. Якщо значення не передбачає значення max, тоді заливка зупиняється лише на правому кінці.

Елемент, для якого нам потрібно керувати прогресом, ми можемо застосувати метод $ (element, cont) .progressbar ("дія", парами) для елемента html для керування та виконання дії на панелі прогресу. у вигляді смужки прогресу. Дія - це параметр, який вказаний як рядок у першому аргументі. Наприклад, $ ("#elementid") .progressbar ("відключити"), тут вимкнено опцію відключення панелі прогресу.

Деякі дії, які можна виконати, у методі $ (елемент, продовження) .прогресу ("дія", парами) наведені нижче -

• знищити - Дія знищення, яка використовується для повного видалення функціональності панелі прогресу елемента та повернення до попереднього стану елемента. Це метод з нульовим аргументом.
• відключити - Дія відключення відключає функціональність панелі прогресу елемента. Це метод з нульовим аргументом.
• enable - дія увімкнення дозволяє функціональній панелі прогресу елемента. Це метод з нульовим аргументом.
• option (option) - використання параметра (option), щоб отримати значення із зазначеного елемента. Він приймає один варіант аргументу, який є String.
• параметр - Опція дії використовується для отримання параметра рядка прогресу, який знаходиться у вигляді ключа: пари значень. Це метод з нульовим аргументом.
• Опція (опція, значення) - дія опції (опція, значення) використовує для встановлення значення опції рядка прогресу, яке пов'язане із зазначеним параметром.
• option (options) - дія опції (options) використовується для встановлення одного або декількох параметрів для панелей прогресу. Він приймає один параметр аргументу, який є картою для пар параметрів і значень.
• value - Дія значення, яка використовується для отримання значення опцій. Значення вказує відсоток заповнення в рядку прогресу.
• value (value) - значення (value), яке використовується для встановлення нового значення для відсотка, який потрібно заповнити в рядку ходу. Він приймає одне значення аргументу, яке є числом.
• віджет - дія віджета, яка використовується для отримання елемента, на який застосовується панель прогресу. Це метод з нульовим аргументом.

Далі ми бачимо кілька прикладів смуги прогресу з деякими діями, про які згадувалося вище. Перегляньте нижче програму для методу barbar () з дією відключення () та опції (опція, назва, значення).

Приклад програми №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;
)



Це приклад панелі прогресу для дії "Відключити"

Це приклад панелі прогресу для дії макс та значення

Вихід -

Наведена вище панель прогресу відключена, тому вона не відображає прогрес, а нижня панель прогресу встановлює параметр максимуму та значення з деякими значеннями, тому прогрес у формі заливки відображається зліва направо.

Елемент панелі прогресу керує подіями -

На додаток до вищезазначеного, смугою прогресу може керуватися також подія. Користувальницький інтерфейс jQuery забезпечує метод події, подія запускається для певної події. Деякі події, за допомогою яких можна керувати смугою прогресу, наведені нижче -

• change (event, ui) - щоразу, коли змінюється значення рядка прогресу або змінюються зміни, ця подія запускається.
• завершено (подія, ui) - Коли ar прогресу доходить до кінця або досягає максимального значення, яке ця подія отримує.
• create (event, ui) - щоразу, коли створюється смуга прогресу, ця подія запускається.

Далі напишіть кілька прикладів вищевказаної дії події. Наступний приклад демонструє використання методу події під час роботи бар функції прогресу. Цей приклад демонструє використання подій для зміни та завершення.

Приклад програми №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;
)



Це приклад панелі прогресу з подією

Завантаження …

Вихід вищевказаної програми знаходиться в послідовності виконання, показаній нижче -

Рядок прогресу починає заповнюватися зліва направо і зупиняється, коли він досяг кінця.

Висновок

1. Штрихи прогресу - елемент jQueryUI.

2. Рядок прогресу використовується для показу стану або завдання завершення процесу у відсотках.

3. Метод progressbar () може використовуватися у двох формах -

• $ (елемент, продовження). метод панелі прогресу (варіант)
• $ (елемент, продовження). метод пробігу ("дія", парами)

4. Різні варіанти, які ми можемо передати методу progressbar (), -

інвалід

• макс
• значення

5. Деякі дії, що можуть бути передані методом $ (елемент, продовження) .progressbar ("дія", парами), -

• знищити
• відключити
• включити
• варіант
• опція (опція, значення)
• варіант (варіанти)
• значення
• значення (значення)
• віджет

6. Подія, за допомогою якої можна керувати смугою прогресу, наведено нижче -

• завершено (подія, ui)
• творити (подія, інтерфейс)
• зміна (подія, ui)

Рекомендовані статті

Це посібник до JQuery Progress Bar. Тут ми обговорюємо методи та приклади панелі прогресу JQuery із синтаксисом та результатом. Ви також можете переглянути наступні статті, щоб дізнатися більше -

1. Атрибути jQuery
2. Методи jQuery Ajax
3. Ефекти jQuery
4. Альтернативи jQuery
5. Топ-5 типів завантаження із зразком коду
6. Як створити ProgressBar в JavaFX?