JQuery UI пример - прогресс бар (Progressbar)
Дисплей определенный процесс или состояние неопределенности.
Для получения более подробной информации о пользователе Progressbar см API документации прогресс бар элемент (Progressbar виджетов) .
По умолчанию функция
По умолчанию определяется прогресс бар.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Jquery UI прогресс бар (Progressbar) - функция по умолчанию </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#progressbar") .progressbar ({
Значение: 37
});
});
</ Script>
</ Head>
<Body>
<Div ID = "ProgressBar"> </ DIV>
</ Body>
</ HTML>
Пользовательские этикетки
Пользовательские этикетки обновления.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Jquery UI прогресс бар (Progressbar) - Пользовательская вкладка </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-ProgressBar {
позиция: относительная;
}
.progress метки {
позицию: абсолютная;
Слева направо: 50%;
верх: 4px;
шрифта: жирный;
Текст-тень: 1px 1px 0 #fff;
}
</ Style>
<Script>
$ (Function () {
переменная ProgressBar = $ ( "#progressbar"),
progressLabel = $ ( ".progress-метка");
progressbar.progressbar ({
Значение: ложь,
изменить: функция () {
progressLabel.text (progressbar.progressbar ( "значение") + "%");
},
завершения: функция () {
progressLabel.text ( "Complete!");
}
});
прогресс функция () {
вар Вэл = progressbar.progressbar ( "значение") || 0;
progressbar.progressbar ( "значение", Вэл + 1);
если (значение <99) {
setTimeout (прогресс, 100);
}
}
setTimeout (прогресс, 3000);
});
</ Script>
</ Head>
<Body>
<Div ID = "ProgressBar"> <DIV класс = "Прогресс-метка"> Загрузка ... </ DIV> </ DIV>
</ Body>
</ HTML>
Неопределенное значение
Неопределенный индикатор хода выполнения, и может переключаться между определенным и неопределенным стилем.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Jquery UI прогресс бар (Progressbar) - неопределенные значение </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#progressbar") .progressbar ({
Значение: ложная
});
$ ( "Button") .он ( "щелчок", функцию (событие) {
целевая переменная = $ (event.target),
ProgressBar = $ ( "#progressbar"),
progressbarValue = progressbar.find ( ".ui-ProgressBar-значение");
если (target.is ( "#numButton")) {
progressbar.progressbar ( "вариант", {
Значение: Math.floor (Math.random () * 100)
});
} Иначе, если (target.is ( "#colorButton")) {
progressbarValue.css ({
"Фон": '#' + Math.floor (Math.random () * 16777215) .ToString (16)
});
} Иначе, если (target.is ( "#falseButton")) {
progressbar.progressbar ( "вариант", "значение", ложь);
}
});
});
</ Script>
<Style>
#progressbar .ui-ProgressBar значение {
цвет фона: #ccc;
}
</ Style>
</ Head>
<Body>
<Div ID = "ProgressBar"> </ DIV>
Кнопка <ID = "numButton"> случайная величина - OK Кнопка </>
Кнопка <ID = "falseButton"> Конечно, </ кнопка>
Кнопка <ID = "ColorButton"> случайные цвета </ кнопка>
</ Body>
</ HTML>