jQuery UI: Modal Dialog и Progress Bar
Сегодня будет вторая статья из цикла о jQueryUI. На самом деле я не хочу вам рассказывать про Modal Dialog и Progress Bar, просто потому что я готовил эту статью с чувством что меня наебали. Наебали тем что оба эти виджета абсолютны не пригодны к реальному использованию, и если Modal Dialog еще как-то можно простить отсутствие у него свойства closeable, то отсутствие каких либо свойств кроме заполненности у ползунка простить нельзя.
Итак приступим к трепанации. Делаем ползунок на модальном не закрывающемся окошке с отображением процентов. Первый хак касается именно незакрываеймости окошка, поскольку параметрами убрать кнопку "Х" никак нельзя, начинаем стучать в бубен.
// создаем новый див
var dialog = $("<div/>")
// и делаем из него диалог с параметрами
.dialog({modal:true,title:"Заголовок",resizable:false,
// делаем недоступной остальные элементы страницы
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),
// а это - ползунок
progressbar = $("<div/>")
.progressbar({value:50})
.appendTo(dialog);
Ну вот почти все готово, осталось собрать это все вместе и присоединить к какому то медленному процессу, индикацию которого мы будем показывать. К сожалению самый лакомый процесс загрузки файла мы не можем показать поэтому поставим обновление индикатора просто на таймер, по 10% каждые пол секунды. Когда процесс достигнет 100% модальное окошко просто исчезнет и страницей снова можно будет пользоваться :)
<!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>Modal Dialog + Progress Bar</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),
// и ползунком
progressbar = $("<div/>")
.progressbar({value:0,change:function(event,ui){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);
});
</script>
</head>
<body>
</body>
</html>
PS: Как выяснилось при подготовке статьи метод "destroy" не до конца разрушает созданый "на лету" div и после него надо еще вызывать метод "remove", чтобы не засорять html.
его можно скачать с http://jqueryui.com/