PHP Lang
  1. PHP Lang
  3. Как сделать Gmail как индикатор выполнения загрузки
Intereting Posts
Dns добавить www префикс? Лучший способ сделать ссылки кликабельными в блоке текста как считать пространство в текстовом выражении в php Ошибка PHP Parse: синтаксическая ошибка, неожиданный T_PUBLIC Передача безопасных файлов cookie на PHP через AJAX Недопустимое смешивание ошибок mysql? regexp разделяет строку запятыми и пробелами, но игнорирует внутренние кавычки и круглые скобки Как настроить иерархические маршруты отдыха Zend? Запрос предварительной проверки CORS, возвращающий HTTP 405 php для сопоставления внешних переменных в один объект независимо от GET или POST Laravel ORM из таблицы саморегуляции получает N уровня иерархии JSON Когда фильтровать / дезинфицировать данные: перед вставкой базы данных или перед отображением? Вычислить значение пропуска для данной записи для отсортированного поискового вызова Пропустить композитор Требование PHP Не удается сохранить файл в каталог с помощью FPDF

Как сделать Gmail как индикатор выполнения загрузки

Я хочу создать индикатор выполнения загрузки, например Gmail в центре и на верхней части страницы, и работать во всех браузерах

это базовый код 

<!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' xml:lang='en' lang='en'> <head> <style> body{ margin:0px; } #state{ width:100px; height:30px; background:#FEE27C; position:fixed !important; position:absolute /* fallback for IE6 */; } </style> <script language=javascript type='text/javascript' > function set(){ var s = screen_now_size(); margin_right = (s['width']-100)/2; //append or change margin right size var state_layer = document.getElementById("state"); state_layer.style.right = margin_right+"px" } function screen_now_size(){ // get screen current size var a=new Array(); if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){ a["width"]=document.documentElement.clientWidth; a["height"]=document.documentElement.scrollTop+document.body.clientHeight; }else{ a["width"]=document.body.clientWidth; a["height"]=document.body.scrollTop+document.documentElement.clientHeight; } return a; } </script> </head> <body onload='set()'> <div id='state'></div> <!--for test:--> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> for test </body> </html>

Вы можете использовать плагин JQuery UI Progressbar . Когда ваша страница загружает нужные данные, обновите значение индикатора выполнения.

Вы должны использовать $(document).ajaxStart() и $(document).ajaxStop() чтобы достичь этого с помощью jQuery.

http://api.jquery.com/ajaxStart/
http://api.jquery.com/ajaxStop/

Это может быть не совсем то, что вы ищете, но это поможет вам начать работу: http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in- JavaScript /

Вам нужно будет использовать сочетание jQueryUI ProgressBar и jQuery FancyBox, которые могут содержать контент (например, progressbar).