наложение jQuery, загружающее отделение панели
Таким образом, у меня есть таблица данных, и я получаю данные назад с помощью ajax. Когда данные получаются, данные из таблицы исчезают, и появляется маленький небольшой загружающийся круг. Я предпочел бы, чтобы данные остались (я знаю, как сделать это), и чтобы загружающийся круг появился по таблице в центре их (не обязательно вертикально, просто по крайней мере горизонтально), наряду с немного прозрачным фоном, блокирующим представление таблицы немного (не остальная часть веб-страницы). Как я могу заставить отделение появиться по таблице и делаю это?
3 ответа
просто используйте метод jQuery .html () , чтобы вставить новый div с кружком загрузки в div, содержащий таблицу. Затем используйте CSS для его стилизации. возможно, придать ему непрозрачное фоновое изображение. и относительно или абсолютно расположите круг загрузки.
скажем, у вас есть:
<div id="table_container>
<table>
<tr>
<td>something</td>
<td>something</td>
</tr>
</table>
</div>
при загрузке новых данных используйте:
$('div#table_container').html('<div id="overlay"><img src="path/to/loading/img.png" class="loading_circle" alt="loading" /></div>');
и задайте стиль примерно так:
#overlay {
width: 100%;
background: url('path/to/opaque/img.png') repeat;
position: relative;
}
#overlay img.loading_circle {
position: absolute;
top: 50%; // edit these values to give you
left: 50%; // the positioning you're looking for.
}
[Посмотрите на это в действии]
HTML
<div id="overlay">
<img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif"
id="img-load" />
</div>
CSS
#overlay {
display:none;
position:absolute;
background:#fff;
}
#img-load {
position:absolute;
}
Javascript
$t = $("#table"); // CHANGE it to the table's id you have
$("#overlay").css({
opacity : 0.5,
top : $t.offset().top,
width : $t.outerWidth(),
height : $t.outerHeight()
});
$("#img-load").css({
top : ($t.height() / 2),
left : ($t.width() / 2)
});
Затем, когда вы загружаете вещи, вы просто говорите:
$("#overlay").fadeIn();
И когда вы закончите:
$("#overlay").fadeOut();
Примечание: загружаемое изображение выглядит центрируемым как по вертикали, так и по горизонтали, как и требуется. Кроме того, только таблица будет иметь наложение, а не всю страницу, как запрашивается.
ну, вы можете попробовать использовать css position: absolute для круга загрузки