Матаясь по буксам на скрипте Спартака я обнаружил на каждом такой индикатор загрузки страницы, как на скрине. В этой статье я распишу, как сделать подобный себе…Матаясь по буксам на скрипте Спартака я обнаружил на каждом такой индикатор загрузки страницы, как на скрине. В этой статье я распишу, как сделать подобный себе…
Итак, начнёмс… Первым делом распишем Java-скрипт. После тега:
Добавим:
<script>function spaizGetElementById(id){
if (document.getElementById(id)) {
return document.getElementById(id);
} else if (document.all[id]) {
return document.all[id];
} else if (document.layers & document.layers[id]) {
return (document.layers[id]);
} else {
return false;
}
}
function toggle_visibility(id, flag) {
if (spaizGetElementById(id)) {
spaizGetElementById(id).style.visibility = (flag) ? 'visible' : 'hidden';
}
}</script>
Далее добавим код окошка с индикатором:
<div id="wait" style="position:fixed; left:40%; top:50%; visibility:hidden; background-color: #FFBF69; border: 1px solid #FF0000; padding: 5px">
<center><img src="http://wm-sar.ru/img/load3.gif" height="12" align="middle" alt="image" /><br /><b>Идёт передача данных</b><br />Пожалуйста, подождите…</center>
</div>
Остановимся и рассмотрим код окошка:
id=\»wait\» — ID начала и конца окошка.
style=\»…\» — стиль окошка.
Рассмотрим стиль:
position: fixed — окошко зафиксировано и при прокрутке остаётся в центре экрана.
left:40% — отступ слева.
top:50% — отступ сверху.
visiblity:hidden — не показывать (яваскрпит сам открывает и скрывает)
background-color: #FFBF69 — задаём цвет фона окошка.
border: 1px solid #FF0000 — задаём цвет,толщину и тип границ.
padding: 5px — отступ от краёв окошка.
http://wm-sar.ru/img/load3.gif — ссылка на изображение в окошко (анимация загрузки)
Далее идёт понятный всем текст, который также можно отредактировать.
Следом за вставленным кодом запустим яваскрипт:
<script type='text/javascript'>
toggle_visibility('wait', 1);
</script>
Т.е. окошко будет показано. Но нам надо, чтобы при окончании загрузки оно исчезало. Открываем footer.php и перед тегом:
</body>
Добавим скриптик:
<script type='text/javascript'>toggle_visibility('wait', 0);</script>
Он спрячет наш индикатор.
Всё. Комментируем.
Автор публикации
Отправить комментарий
Вы должны быть зарегистрированы чтобы оставить комментарий.
Вы должны быть зарегистрированы чтобы оставить комментарий.