Personalizando o AjaxLoading

Regras do fórum
=============

Antes de postar sua dúvida, por favor leia as regras de utilização do fórum.
emasters.eduardo
Mensagens: 18
Registrado em: 18 Dez 2009, 00:26

Personalizando o AjaxLoading

Mensagem por emasters.eduardo » 15 Set 2012, 20:11

Olá pessoal...

Hoje vou dar uma dica de como melhorar a aparência do controle AjaxLoading do GASWEB.

A dica surgiu da necessidade de ter mais de uma imagem para o AjaxLoading na mesma página, uma no inicio e outra no final, ja que a pagina tem uma rolagem muito extensa. Tentei fazer isso colocando dois AjaxLoading na pagina de dados, mais ao executar a aplicação algum erro no javascript impediu a pagina de mostrar os dois controles. Então, resolvi fazer de outra forma que fosse visível em toda a página, mas somente com um controle.

Modifiquei o CSS aplicado ao AjaxLoading e obtive um resultado parecido com uma LightBox, preenchendo toda a pagina:

Imagem

Para fazer isso, basta você setar a propriedade Z-Index do AjaxLoading para um valor mais alto do que os outros controles da pagina (200, por exemplo) e adicionar o seguinte código CSS na sua página:

Código: Selecionar todos

.GasLoadingAjaxVisible
{
	display: inherit !important;
	position: inherit !important;
	float: center !important;
	top: 0px !important;
	left: 0px !important;
	width: 100% !important;
	height: 100% !important;
	background-color: #fff !important;
	-moz-opacity: 0.8 !important;
	opacity:.80 !important;
	filter: alpha(opacity=80) !important;
	border: solid 1px #fff !important;
}
Div[id*=TabControl] > Div > ul > li > a
{
	z-index: 0 !important;
}
O estilo GasLoadingAjaxVisible modifica a aparencia do controle AjaxLoading. Já o estilo Div[id*=TabControl] > Div > ul > li > a, ajusta alguma TabControl que exista na página mandando as Abas para atrás da Div dp AjaxLoading.

IMPORTANTE: Se houver uma TabControl na sua página, deve existir em algum lugar do nome (ID) do controle o texto "TabControl", caso contrário a CSS não conseguirá localizar a Div e aplicar o estilo.

Para finalizar vou deixar um link para criação de uma imagem de Loading personalizada: http://preloaders.net/

Abraço a todos.

Responder

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 2 visitantes