Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Затемнить поле


Автор: armor85 12.5.2008, 15:45
Здравствуйте,

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

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

Автор: smartov 12.5.2008, 16:49
http://forum.vingrad.ru/forum/topic-203314/anchor-entry1459611/0.html

Автор: ksnk 12.5.2008, 17:04
Цитата(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'. При клике на ячейку контент подгружается и тень с "подождите" автоматически ремувится...

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

Автор: armor85 13.5.2008, 14:39
Всем спасибо, разобрался. 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)