Antes da produção, configure um ambiente de desenvolvimento.
Abra netbeans6.1, clique com o botão direito no novo projeto na área de trabalho do projeto e selecione Aplicativo Web no diretório Web.
Este exemplo serve para realizar uma operação na página atual, congelar a página e exibir uma caixa de espera antes de sair ou retornar os resultados da operação. A função é avisar ao usuário que a página está carregando. Especialmente para determinadas solicitações de dados de grande volume, essa IU pode aliviar o incômodo dos clientes causado por longas esperas.
Uma breve análise mostra que este exemplo consiste em 2 pontos principais.
1. Elementos estáticos
2. Quando a caixa aparece e quando desaparece. A IU neste efeito é uma caixa de carregamento em um fundo escurecido.
Para elementos estáticos, não importa como apareçam, sua essência é sempre HTML, CSS e JavaScript, exceto, é claro, controles incorporados, como flash. Na verdade, os controles incorporados não estão mais no escopo de elementos estáticos como HTML.
Neste exemplo, a caixa com carregamento é na verdade apenas uma div contendo uma imagem com efeito de rolagem e texto comum. Porém, a div é embelezada com CSS e, em seguida, combinada com as características da página web, JavaScript é usado para controlar o. exibição do div e desaparecer.
Então, como criar tal efeito Para explicar claramente todo o processo de produção, independente do JavaScript por enquanto, crie primeiro o div.
No diretório da página da web, clique com o botão direito, Novo ->html
Selecione html e nomeie o índice do arquivo
Após a criação da página, o único material necessário é a imagem loading.gif com efeito de rolagem. Copie a imagem para a pasta de imagens.
Em seguida, crie um novo arquivo CSS, clique com o botão direito na pasta inc, escolha Novo -> Outro e selecione Cascading Style Sheets em outros diretórios, conforme mostrado na figura:
Nomeie o estilo, clique em Concluir e gere o arquivo CSS. O CSS recém-criado nesta etapa gera automaticamente uma raiz de estilo. Mova o cursor para o intervalo da folha de estilos raiz. é uma janela de visualização do efeito, conforme mostrado abaixo:
A janela do gerador no lado direito do editor fornece configurações GUI para muitos atributos e gera automaticamente o código correspondente Abaixo do editor há uma visualização do estilo. Por exemplo, no painel de fontes, o autor seleciona itálico para o estilo e espessura. Selecione negrito, depois selecione sublinhado e selecione #ff0099 (um tipo de vermelho) para cor. Ao selecionar uma cor, um seletor de cores aparecerá. Selecione a cor correspondente e o efeito de visualização será o seguinte:
O editor gera automaticamente o código, e a caixa de visualização também mostra o efeito após a aplicação.
Deve-se notar que embora o código gerado pela ferramenta seja simples, certamente não é tão flexível e fácil de controlar como a escrita à mão.
Aqui, defina o estilo da caixa de espera que precisamos
.carregando
{
border:2px solid #a3bad9;/* O estilo da borda do objeto de estilo aplicado*/
color:#003366; /* A cor do conteúdo no objeto de estilo aplicado*/
padding:10px /* A distância entre o conteúdo no objeto de estilo aplicado e a borda do estilo (superior, inferior, esquerda, direita) */
margin:0 /* A distância entre o objeto de estilo aplicado e seus elementos circundantes (superior, inferior, esquerda, direita) */
z-index:2000; /* O valor da coordenada z do objeto de estilo aplicado na página web*/
width:205px; /* Largura do objeto de estilo aplicado*/
text-align:center; /* Centraliza o conteúdo no objeto de estilo aplicado*/
position:absolute; /* A posição do objeto de estilo aplicado na página é exibida */
font-weight: negrito /* O estilo da fonte no objeto de estilo aplicado*/
font-size: 13px /* O tamanho da fonte no objeto de estilo aplicado*/
}
Caso o leitor tenha interesse no significado específico de cada atributo, poderá buscar informações para um entendimento mais profundo. Não entrarei em detalhes aqui.
Depois de criar o CSS, adicione o seguinte código ao arquivo index.html que você acabou de criar para importar o estilo CSS.
Participe da área
Se o objeto B for transparente e próximo ao objeto A, se um terceiro tentar entrar em contato com o objeto A e encontrar apenas o objeto B, todos os contatos contra A serão inválidos.
Neste ponto da análise, o que temos que fazer é criar uma div com esse efeito especial. Em última análise, ainda é uma produção e aplicação de CSS.
O efeito de transparência escura pode ser obtido através do atributo filter do CSS e redefinir um novo estilo bgdiv
.bgdiv
{
fundo:#ccc; /* cor de fundo*/
opacidade:.3; /* transparência*/
filtro: alfa(opacidade=30); /* filtro transparente*/
position:absolute; /* A posição do objeto de estilo aplicado na página é exibida */
z-index:1000; /* O valor da coordenada z do objeto de estilo aplicado na página web*/
width:500px /* Largura do objeto de estilo aplicado*/
height:500px /*Altura do objeto de estilo aplicado*/
top: 0px /* A distância entre o objeto de estilo aplicado e o topo da página*/
left: 0px /* A distância entre o objeto de estilo aplicado e a extremidade esquerda da página*/
}
Na área do corpo, adicione:
, execute o arquivo, o efeito é o seguinte:
Neste ponto, o design da UI está concluído, mas o tamanho do div que vemos é 500*500, o que não preenche a página inteira, e a caixa de espera não está centralizada, e o efeito já é visível desde o início. obviamente não pode ser feito diretamente. Ao usá-lo, precisamos que o plano de fundo preencha a página inteira, a caixa de espera precisa ser exibida no centro e precisamos ser capazes de controlar quando o efeito aparece e quando desaparece.
Então essas tarefas precisam ser concluídas por JavaScript.
JavaScript pode controlar quase todos os elementos estáticos da página, e os efeitos acima são alcançados oficialmente controlando o div de fundo e a caixa de espera.
Em JavaScript, a maneira mais simples de obter um elemento na página é atribuir um valor ao atributo ID do objeto de destino e, em seguida, obtê-lo por meio do getElementbyId do JavaScript.
Aqui, primeiro atribua um valor ao atributo ID de bgdiv, como:
Vamos resolver primeiro o primeiro problema, que é definir o tamanho da camada para preencher a página inteira através de javascript.
função mostrarbg()
{
var bgdiv=document.getElementById("bgdiv"); // Obtém o objeto bgdiv
bgdiv.style.width=document.body.clientWidth; //Defina a largura do objeto bgdiv para a largura da área visível da página web
if (document.body.clientHeight>document.body.scrollHeight) //Defina a altura do objeto bgdiv para a altura da área visível da página da web
bgdiv.style.height=document.body.clientHeight;
outro
bgdiv.style.height=document.body.scrollHeight;
}
O que precisa ser explicado aqui é que clientWidh e scrollWidth representam a largura da área visual. A diferença é que se houver barras de rolagem na página da web, então scollWidth será maior que clientWidth, porque scollWidth inclui a barra de rolagem para ?? ??????? parte, enquanto clientWidth não, apenas a parte visível.
Na função acima, clientWidth é usado como largura, porque de acordo com os princípios básicos do web design, é bastante hostil projetar uma página da web que contenha uma barra de rolagem horizontal, porque o mouse só pode rolar para cima e para baixo, mas não para a esquerda para a direita, então aqui tomar clientWidth diretamente significa garantir que nenhuma barra de rolagem horizontal aparecerá em todo o projeto.
A configuração de altura abaixo leva em consideração a compatibilidade com e sem barras de rolagem verticais.
A função acima pode garantir que o bgdiv chamado possa preencher a tela inteira.
Na pasta inc, crie um novo arquivo javascript, copie a função acima nele e adicione o seguinte código à página para apresentar a função
Para facilitar a exibição, adicione onload="showbg();" na tag body Após o carregamento da página, você pode ver que o bgdiv ajustado preencheu a página inteira.
O princípio de ajuste da posição de exibição da caixa de espera é semelhante. A função é:
função showwait()
{
showbg(); // mostra bgdiv
var loading=document.getElementById("loaddiv");//Obtém o objeto de carregamento
loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;//Definir a distância de carregamento do topo
loading.style.left=document.body.clientWidth/2-110;//Definir a distância entre o carregamento e a extremidade esquerda
}
Chame showwait no evento onload para exibir a caixa de espera em um fundo escuro e transparente.
O que precisa ser enfatizado aqui é o atributo position do atributo CSS. Este atributo deve ser definido como absoluto para que o código acima seja eficaz, pois a posição do código acima é definida de acordo com a posição absoluta.
O efeito acima é exibido assim que a página é aberta. Se você deseja controlar se ela é exibida, você precisa usar o atributo CSS display. Quando o valor for bloqueado, ele será exibido, e quando não for nenhum, será exibido. não será exibido.
Adicionamos display: none aos atributos CSS acima, então o efeito não será exibido quando a página for aberta;
Em seguida, adicione bgdiv.style.display="block" na função showbg;
Adicione loading.style.display="none" à função showwait;
Adicione display à área do corpo da página e execute a página. Somente o link de exibição poderá ser visto. Após clicar no link de exibição, o efeito que precisamos será exibido, conforme mostrado na figura:
Os efeitos que aparecem não desaparecerão. Em meu trabalho diário de estudo, o autor também descobriu um fenômeno ao clicar em um link da página (ou seja, enviar uma solicitação ao servidor), quando o servidor não finaliza o processamento e não retorna a página ao cliente, o. a página em si não estará lá, e a chamada velocidade lenta da rede também é assim. Clicar não reflete isso. Quando o servidor conclui o processamento, ele retorna o html ao usuário e a página começa a mudar. Então, se o evento showwait for acionado quando o link for clicado, o efeito aparecerá até que o servidor termine de processar a solicitação e a página seja redirecionada e desapareça.
Por exemplo, se alterarmos o código exibido para exibir e, em seguida, executarmos a página e clicarmos em exibir, podemos ver que a caixa de espera aparece e, quando a página desaparece, a página inicial da Sun aparece.
Vamos olhar para trás. Na verdade, não há nada de especial neste exemplo, apenas os requisitos para HTML, CSS e javascript são muito altos. Somente se você estiver familiarizado com esses três elementos estáticos, você poderá compreendê-los bem. E aqui também existem certos requisitos para os artistas. Deve-se observar que as imagens de rolagem e as imagens de fundo da espera não são feitas pelo autor. São imagens do quadro ext. ramal.
Vale ressaltar que o editor do Netbeans 6.1 possui rico suporte a prompts para JavaScript, não apenas suporte a palavras-chave, mas também prompts para navegadores compatíveis, e ainda fornece alguns exemplos simples.
Este artigo ocupa muito espaço explicando um exemplo simples. O objetivo é fornecer aos leitores uma análise aprofundada de como desenvolver seu próprio RIA por meio de processos detalhados de pensamento e desenvolvimento.
Percebe-se que para fazer esse tipo de RIA, embora ainda seja necessária uma certa base artística e recursos de design de página, as etapas básicas de produção nada mais são do que as duas etapas a seguir:
1. Faça sua própria UI usando HTML e CSS.
2. Estude cuidadosamente o modo de comportamento da página e escreva javascript para controlar a IU.
No próximo artigo, o autor apresentará um exemplo mais complexo e abrangente, incluindo caixas de diálogo pop-up, menus pop-up, camadas de efeitos especiais e janelas de arrastar.