jQuery UI: Modal Dialog и Progress Bar

Сегодня будет вторая статья из цикла о jQueryUI. На самом деле я не хочу вам рассказывать про Modal Dialog и Progress Bar, просто потому что я готовил эту статью с чувством что меня наебали. Наебали тем что оба эти виджета абсолютны не пригодны к реальному использованию, и если Modal Dialog еще как-то можно простить отсутствие у него свойства closeable, то отсутствие каких либо свойств кроме заполненности у ползунка простить нельзя.

Итак приступим к трепанации. Делаем ползунок на модальном не закрывающемся окошке с отображением процентов. Первый хак касается именно незакрываеймости окошка, поскольку параметрами убрать кнопку «Х» никак нельзя, начинаем стучать в бубен.


$("#example1").click(function () {
	$("
") .dialog({ modal: true, title: "Заголовок", overlay: { backgroundColor: "#000", opacity: 0.5 }, buttons: { OK: function () { $(this).dialog("destroy").remove(); } } }) .parent().find(".ui-dialog-titlebar-close").hide(); });

Родительский элемент приходиться брать потому что текущий указывает на тот див из которого мы построили Modal Dialog, а находиться он в самом центра этого самого Modal Dialog’a, чтобы текст этого дива сразу стал сообщением. В принципе удобно, но у нас тут немного другой случай.

Второй хак — это прикручивание индикатора с цифрами, положим его в верхний слой относительно полоски, для этого немного пошаманим с CSS.


.ui-progressbar-indicator{
	line-height:40px;
	position:absolute;
	text-indent:-15px;
	left:50%;
}

// это будет цифровой индикатор
var indicator = $("<div/>")
	.addClass("ui-progressbar-indicator")
	.text("50%")
	.appendTo(dialog);
// а это - ползунок
var progressbar = $("<div/>")
	.progressbar({value:50})
	.appendTo(dialog);

Ну вот почти все готово, осталось собрать это все вместе и присоединить к какому то медленному процессу, индикацию которого мы будем показывать. К сожалению самый лакомый процесс загрузки файла мы не можем показать поэтому поставим обновление индикатора просто на таймер, по 10% каждые пол секунды. Когда процесс достигнет 100% модальное окошко просто исчезнет и страницей снова можно будет пользоваться :)


.ui-progressbar-indicator{
	line-height:40px;
	position:absolute;
	text-indent:-20px;
	left:50%;
}

$("#example3").click(function () {
	var counter = 0,
		dialog = $("<div/>")
			.dialog({
				modal: true,
				title: "Заголовок",
				overlay: {
					backgroundColor: "#000",
					opacity: 0.5
				}
			})
			.parent().find(".ui-dialog-titlebar-close").hide().end().end(),
		indicator = $("<div/>").addClass("ui-progressbar-indicator").text("0").appendTo(dialog),
		progressbar = $("<div/>")
			.progressbar({value: 0, change: function () {
				indicator.text(counter + "%")
			}})
			.appendTo(dialog),
		interval = setInterval(function () {
			counter += 10;
			progressbar.progressbar("value", counter);
			if (counter == 100) {
				clearInterval(interval);
				setTimeout(function () {
					progressbar.progressbar("destroy");
					dialog.dialog("destroy").remove();
				}, 500);

			}
		}, 500);
});

PS: Как выяснилось при подготовке статьи метод «destroy» не до конца разрушает созданый «на лету» div и после него надо еще вызывать метод «remove», чтобы не засорять html.

4 Комментарии “jQuery UI: Modal Dialog и Progress Bar

  1. А не могли бы вы исходники архивом выложить, а то не понятно откуда JS Query плагины качать.

Комментарии закрыты