jQuery UI: Progress Bar with custom event

Начитался Брэндона Аарона и решил создать небольшое практическое пособие для начинающих по пользовательским событиям (custom events). Напомню что пользовательские события это такие же события как onclick только запускает их не браузер а сам jQuery. Такими событиями являются, например, события «mouseenter», «mouseleave», «ready» и целый набор ajax’овых событий.

jQuery также дает возможность создавать пользовательские события, чем я и воспользуюсь, создав собственное событие с помощью которого буду обновлять ползунок из Modal Dialog и Progress Bar. Практическая польза от этого скрипта нулевая, но для демонстрации самое то что доктор прописал. На самом деле весь код описанный в событии можно перенести в стандартный callback ‘change’. Итак задача: обновлять ползунок при помощи пользовательского события, при срабатывании события ползунок увеличивается и меняет цвет.


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

$("#example").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),
		// создаю пользовательское событие myEvent
		// вторым параметром можно передавать null потому что он не используеться в примере
		// но я предпочитаю передавать this, тут this является контекстом функцией переданой параметром в jQuery().ready
		// тоесть window, но если этот объект не window то это единственный способ получить к нему доступ.
		// пример такого использования можно посмотреть в плагине autocomplete
		progressbar = $("<div/>").bind("myEvent", this, function (event, data) {
			// event.data хранит данные переданые при создании события
			// тоесть event.data == window
			// data хранит данные переданые при срабатывании события
			// тоесть data == {counter:counter}
			var c = data.counter,
				// процет цвета который заполняет ползунок
				seed = Math.round(255 * c / 100),
				// в HEX
				green = seed.toString(16),
				// форматируем до двух знаков
				green = green.length == 1 ? "0" + green : green,
				// процент цвета который покидает ползунок
				red = (255 - seed).toString(16),
				// его тоже форматируем
				red = red.length == 1 ? "0" + red : red;
				// увеличиваез значение индикатора
			indicator.text(c + "%");
			// удлиняем ползунок
			$(this).progressbar("value", counter);
			// закрашиваем ползунок новым цветом
			$("div", this).css({background: "#" + red + green + "00"});
		})
			.progressbar({value: 0})
			.appendTo(dialog),
		// имитируем длительный процесс
		interval = setInterval(function () {
			counter += 1;
			progressbar.trigger("myEvent", {counter: counter});
			if (counter == 100) {
				clearInterval(interval);
				setTimeout(function () {
					progressbar.progressbar("destroy");
					dialog.dialog("destroy").remove();
					indicator.remove();
				}, 50);
			}
		}, 50);
});

Более подробные комментарии можно посмотреть в Modal Dialog и Progress Bar


2 Комментарии “jQuery UI: Progress Bar with custom event

  1. чета «позырить результат» никуда не шлет.

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