Форум программистов, компьютерный форум CyberForum.ru Форум программистов | Компьютерный форум | Форум web-программистов | Форум по электронике и бытовой технике | Форум о софте | Научный форум | Карьера и бизнес
CyberForum.ru - форум программистов и сисадминов > Форум Форум web-программистов > Форум JavaScript > Форум jQuery
Восстановить пароль Регистрация

Ответ Создать новую тему
 
16.08.2011, 17:38   #1
Karpo
Форумчанин
Регистрация: 03.12.2009
Сообщений: 195
Репутация: 5 (6)
Лучшие ответы: 1
Индикатор загрузки / jQuery

Хочу сделать для ajax загрузок индикатор. С помощью методов ajaxStart и ajaxStop можно инициировать создание индикатора-изображения на одном из DOM элементов, но решение это не универсальное, так как заведомо неизвестно какая часть страницы в данный момент отображается, т.е. непонятно где рисовать индикатор. На Яндекс.Метрике и некоторых других сайтах видел иной тип индикации загрузки страницы. В центре возникает диалоговое окно с индикатором или индикатор без окна, остальная часть страницы затемняется. При этом возможно прокручивание страницы, при котором индикатор остаётся по центру. Подскажите как сделать такой индикатор.
16.08.2011, 17:38
AdAgent
Объявления
17.08.2011, 01:57   #2
Bomboos
Форумчанин
Регистрация: 04.10.2009
Сообщений: 219
Репутация: 15 (15)
Лучшие ответы: 1
Индикатор загрузки

юзайте JQuery UI, http://jquery.com виджет progressbar
Другие темы раздела
Ajax запрос отправка данных(json) на сервер и data=type init!? jQuery
Как в этот ajax запрос вставить данные, у меня тут указано data: "type = init", но мне нужно еще 1-у переменную передать, допустим x, куда ее вставлять в таком случае? $.ajax({ url: "myarray.php", type: "post", async: false, data: "type = init", dataType: "json", ...
Перестаёт работать jQuery на элементе, подгруженном с помощью ajax jQuery
Разметка: <div class = "view"> <div class="comment-view-block" style="display : block"> <a class="data-edit-block-show">Редактировать</a> </div> <div class = "comment-edit-block" style="display : none"> <input class="data-edit-block-unshow" name="but"...
17.08.2011, 12:56  [ТС]   #3
Karpo
Форумчанин
Регистрация: 03.12.2009
Сообщений: 195
Репутация: 5 (6)
Лучшие ответы: 1
Индикатор загрузки

Bomboos, это не то. Мне не нужен прогресс - бар, мне достаточно крутящегося колёсика. Вся суть в диалоговом окне, которое затемняет задний план, и остаётся на своём месте при скроллинге. Как этого добиться?
17.08.2011, 14:10   #4
Bomboos
Форумчанин
Регистрация: 04.10.2009
Сообщений: 219
Репутация: 15 (15)
Лучшие ответы: 1
Индикатор загрузки

Цитата Сообщение от Karpo Посмотреть сообщение
Вся суть в диалоговом окне, которое затемняет задний план, и остаётся на своём месте при скроллинге.



JQuery UI виджет dialog его можно сделать модальным т.е. когда он открыт ничего нажать не получиться. Пример: http://jqueryui.com/demos/dialog/#modal-message
17.08.2011, 14:10
AdAgent
Объявления
19.08.2011, 02:11  [ТС]   #5
Karpo
Форумчанин
Регистрация: 03.12.2009
Сообщений: 195
Репутация: 5 (6)
Лучшие ответы: 1
Индикатор загрузки

Bomboos, это почти то, что нужно. Но в демке окно при скроллинге смещается вместе со страницей. Нужно, чтобы окно оставалось на месте
19.08.2011, 07:33   #6
Xander Bass
Йошь
Регистрация: 22.02.2009
Сообщений: 613
Репутация: 116 (110)
Лучшие ответы: 2
Индикатор загрузки

Код HTML:
Код HTML5
1
2
3
4
5
<div class="wrapper" id="loadwnd"><center>
  <div class="wndLoading">
    <img src="loading.gif"/>
  </div>
</center></div>
Стили:
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wrapper
{
 width: 100%;
 height: 70%;
 padding-top: 30%;
 background: rgba(0,0,0,0.5);
 position: fixed;
 left:0;
 top: 0; 
}
.wndLoading 
{
 width: 30%;
 height: 10%;
 padding-top: 10%;
 background: white;
 border: 1px solid gray;
}
Код js, рассчитанный на исчезновение окошка после полной загрузки страницы:
Код JavaScript
1
2
3
$(function(){
 $('#loadwnd').fadeOut(200);
});
В стилях вместо rgba для большей кроссбраузерности можно подставить PNG-рисунок 1 на 1 пиксель с альфаканалом. Да, и ещё это решение не совсем кроссбраузерно. "Осёл" не понимает значение fixed свойства position.
19.08.2011, 12:36   #7
Bomboos
Форумчанин
Регистрация: 04.10.2009
Сообщений: 219
Репутация: 15 (15)
Лучшие ответы: 1
Индикатор загрузки

Цитата Сообщение от Karpo Посмотреть сообщение
Bomboos, это почти то, что нужно. Но в демке окно при скроллинге смещается вместе со страницей. Нужно, чтобы окно оставалось на месте
Ничего страшного, оно настраивается!

Код JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    $(function() {
        // a workaround for a flaw in the demo system ([url]http://dev.jqueryui.com/ticket/4375[/url]), ignore!
        $( "#dialog:ui-dialog" ).dialog( "destroy" );
    
        $( "#dialog-modal" ).dialog({
                        draggable : false,
                        resizable : false, 
            height: 140,
            modal: true
        });
    });
    </script>

Теперь окошко нельзя будет перетащить, и изменить его размер (растянуть). Это кроссбраузерно по идее)
Миниатюры
Индикатор загрузки  
19.08.2011, 13:47   #8
Bomboos
Форумчанин
Регистрация: 04.10.2009
Сообщений: 219
Репутация: 15 (15)
Лучшие ответы: 1
Индикатор загрузки

Не по теме:

Цитата Сообщение от Xander Bass Посмотреть сообщение
Код js, рассчитанный на исчезновение окошка после полной загрузки страницы:
Код JavaScript
1
2
3
$(function(){
$('#loadwnd').fadeOut(200);
});
Этот код расчитан на исчезновение, не зависимо от статуса загрузки.



$.ajaxStart();
Код JavaScript
1
2
3
 $("#loadwnd").ajaxStop(function(){
   $(this).show();
 });
$.ajaxStop();
Код JavaScript
1
2
3
 $("#loadwnd").ajaxStop(function(){
   $(this).hide();
 });

Не по теме:

Добавлено через 1 час 8 минут
IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, and Google Chrome.

20.08.2011, 13:51  [ТС]   #9
Karpo
Форумчанин
Регистрация: 03.12.2009
Сообщений: 195
Репутация: 5 (6)
Лучшие ответы: 1
Индикатор загрузки

Bomboos, Получается, что элемент #dialog-modal должен заведомо находиться в теле страницы? Я не очень понял как работает библиотека, но не хотелось бы, чтобы в шаблоне был элемент, который вызывается только при ajax запросах. И ещё, раз позиция элемента фиксирована, то окно будет появляться всегда там, где оно прописано, не зависимо от того, в какой части страницы я нахожусь, я правильно понял?
22.08.2011, 01:11  [ТС]   #10
Karpo
Форумчанин
Регистрация: 03.12.2009
Сообщений: 195
Репутация: 5 (6)
Лучшие ответы: 1
Индикатор загрузки / jQuery

Спасибо,разобрался
22.08.2011, 01:11
Yandex
Объявления
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Раздел Автор Дата
Delphi Индикатор загрузки
Здравствуйте, использую Delphi 7 и мне потребовалось для одной из программ сделать индикатор загрузки из Image.Компонент "Progress bar" мне без надобности.Так вот, я столкнулся с проблемой, не знаю как сделать процент отображающий размер индикатора.Например:если 1%, то Image1.Width:=(допустим 50).Я...
Delphi: графика, звук, видео Rudy_Wade 03.06.2013 11:09
JavaScript Кнопка загрузки файла и индикатор загрузки в этой же кнопке
Как из двух input <form action="change_avatar.php" method="post" enctype="multipart/form-data"> <input type="file" name="file" id="file" /> <input type="submit" value="Update" /> </form> сделать одну кнопку с помощью которой можно будет выбрать файл на компьютере, затем после...
JavaScript MarkoPolo 10.02.2013 02:18
C# Индикатор загрузки ЦП
Помогите реализовать c помощью ProcessBar загрузку ЦП. И ProcessBar должен находиться в StatusStrip.
C# для начинающих CBOJlO4 05.01.2012 02:55
C# WPF Silverlight. Индикатор загрузки
Хочу использовать индикатор загрузки такой же, как при загрузке самого Silverlight контрола (синенький анимированый кружечок с цифрами прогресса загрузки в середине). Может кто знает где его выцепить, или хотя бы похожий), можно без цифр в середине).
C#: WPF и Silverlight nicolas2008 05.01.2011 20:02
XML/XSL Индикатор загрузки XML
Принимаю через XMLHTTP объект с сервера несколько довольно "упитанных" файлов. Можно ли как-то отображать пользователю индикатор - сколько процентов принято и сколько осталось. Нечто подобное делалось с помощью контрола Internet Transfer Control (создан под wininet.dll) при асинхронной загрузке....
XML/XSL Legioner 04.07.2006 03:25
Опции темы


Текущее время: 13:48. Часовой пояс GMT +4.
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.