jQuery UI: Progress Bar with custom event
Начитался Брэндона Аарона и решил создать небольшое практическое пособие для начинающих по пользовательским событиям (custom events). Напомню что пользовательские события это такие же события как onclick только запускает их не браузер а сам jQuery. Такими событиями являются, например, события "mouseenter", "mouseleave", "ready" и целый набор ajax'овых событий.
jQuery также дает возможность создавать пользовательские события, чем я и воспользуюсь, создав собственное событие с помощью которого буду обновлять ползунок из Modal Dialog и Progress Bar. Практическая польза от этого скрипта нулевая, но для демонстрации самое то что доктор прописал. На самом деле весь код описанный в событии можно перенести в стандартный callback 'change'. Итак задача: обновлять ползунок при помощи пользовательского события, при срабатывании события ползунок увеличивается и меняет цвет.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Progress Bar with custom event</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="ui/ui.core.js" type="text/javascript"></script>
<script src="ui/ui.resizable.js" type="text/javascript"></script>
<script src="ui/ui.draggable.js" type="text/javascript"></script>
<script src="ui/ui.dialog.js" type="text/javascript"></script>
<script src="ui/ui.progressbar.js" type="text/javascript"></script>
<link href="themes/smoothness/ui.core.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.theme.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.resizable.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.dialog.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.progressbar.css" type="text/css" rel="stylesheet" />
<style>
.ui-progressbar-indicator{
line-height:40px;
position:absolute;
text-indent:-20px;
left:50%;
}
</style>
<script type="text/javascript">
jQuery().ready(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");
indicator.remove();
},50);
}
}, 50);
});
</script>
</head>
<body>
</body>
</html>
Более подробные комментарии можно посмотреть в Modal Dialog и Progress Bar
Свежие комментарии