VPF::Затемнить поле - Форум программистов

armor85

Дата 12.5.2008, 15:45 (ссылка)

(нет голосов)

Загрузка ...

Злой программер

Профиль
Группа: Участник
Сообщений: 246
Регистрация: 6.2.2007
Где: Сочи, блин!

Репутация: нет
Всего: -1

Здравствуйте,

хочу сделать такой эффект, при ожидании ajax запроса затемнить таблицу, куда загружается
информация из запроса. А сверху вывести какой нибудь gif загрузки, типа "Loading...", а по
окончанию запроса всё это убрать.

Подскажите как проще это сделать, использование jQuery приветствуется.

smartov

Дата 12.5.2008, 16:49 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259

http://forum.vingrad.ru/forum/topic-203314...y1459611/0.html

ksnk

Дата 12.5.2008, 17:04 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(armor85 @ 12.5.2008, 15:45

)

затемнить таблицу

Это как это? Вот, в ячейки таблицы чего-то загрузить можно примеро так.

Код


<script type='text/javascript' src='jquery'></script>
<script type='text/javascript' >
function load(e,url){
    $(e).append($('#container').html()).load(url);
    setTimeout(function(){$(e).find('.shadow').css({opacity:0.5})},1);
 }
</script>
<style>
.wait, .shadow {
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%; 
}
.shadow {background:gray;}
.wait div {width:100px; border: 1px solid red; background:white;}
</style>
<body>
<div id='container' style="display:none;">
    <table class='shadow'><tr><td>&nbsp;</td></tr></table>
    <table class='wait' ><tr><td align='center'><div>Wait a little</div></td></tr></table>
</div>

<table border=1 width='400px'>
<tr><td>
    <div  style="position:relative;height:100%;" onclick="load(this,'test.php')">
         Hello!<br>
        it's sell 1
    </div>
</td>
<td>
    <div  style="position:relative;height:100%;" onclick="load(this,'test.php')">
         Hello!<br>
        it's sell 2
    </div>
</td>
</tr>
<tr><td>
    <div  style="position:relative;height:100%;" onclick="load(this,'test.php')">
         Hello!<br>
        it's sell 3
    </div>
</td><td>    
<div  style="position:relative;height:100%;" onclick="load(this,'test.php')">
         Hello!<br>
        it's sell 4
    </div>
</td></tr>
</table>

В ячейках обязан сидеть div. Картинку для "подождите, pls..." нужно посадить в id='container'. При клике на ячейку контент подгружается и тень с "подождите" автоматически ремувится...

Это сообщение отредактировал(а) ksnk - 12.5.2008, 18:56

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

krundetz

Дата 13.5.2008, 11:31 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69

В ссылке которую разместил smartov в принципе всё что нужно по javascript и css обяснено поэтому пройдусь по jQuery.
1. создаете функцию которая будет вызываться при клике на элемент который будет вызывать загрузку.
2. в ней вам нужно создать или сделать видимыми слой затемнеия и картинку подгрузки.
если создаете то удобно использовать jQuery функцию append, если делаете видисой то лучше всего делать так css("visibility", "visible"), тоесть сначала отрисовать элемент а потом уже сделать его видимым, это необходимо из-за того что IE с задержкой отрисовывает фильтр.
3. далее делаете сам запрос.
Я использую функцию load и предаю в неё функцию которая обработает результат а потом уберет затемнение и картинку загрузки с экрана.

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

armor85

Дата 13.5.2008, 14:39 (ссылка)

(нет голосов)

Загрузка ...

Злой программер

Профиль
Группа: Участник
Сообщений: 246
Регистрация: 6.2.2007
Где: Сочи, блин!

Репутация: нет
Всего: -1

Всем спасибо, разобрался.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »