Implementando as caixas de diálogo

Como o artigo anterior insinuada, você pode usar um elemento div como um bloco de conteúdo que imita o comportamento de uma caixa de diálogo. Este artigo analisa, mais especificamente na aplicação efectiva caixas de diálogo em modernas aplicações web. Problema Você deseja implementar eficazes caixas de diálogo em aplicações web. Teoria O título para este artigo mostra as palavras "caixas de diálogo" entre aspas, porque o elemento div não é um caixa de diálogo verdadeiro. Em vez disso, ela está restrita aos limites da página HTML. Normalmente, você pode colocar as caixas de diálogo real em qualquer lugar da tela do computador. Real caixas de diálogo não são de interesse neste artigo. O que interessa é como criar uma caixa de diálogo HTML "." Por exemplo, ao escrever páginas HTML, você pode usar caixas de diálogo para uma série de coisas, como

• Para fornecer meta informação associada a um hotspot em uma página HTML

• Para solicitar informações adicionais quando o preenchimento de um formulário ou o processamento de um fluxo de trabalho

• Menus

• Para se comportar como um ícone de esperar Você também pode usar janelas pop-up para indicar falhas; janelas popup olhar diferente de caixas de diálogo, mas a técnica usada para criá-los é idêntico. Solução Duas coisas devem acontecer no fim de um elemento div comportar-se como uma caixa de diálogo. Primeiro, você deve colocar o elemento div no código HTML usando coordenadas absolutas. Em segundo lugar, você precisa fazer o elemento div atento aos movimentos do mouse. O exemplo a seguir coloca dois elementos div 100 pixels da esquerda e 100 pixels da parte superior da janela do navegador do cliente.

 Fonte: / website / ROOT / artigos ajax / dhtml / divdialogessentials.html  Essentials DIV diálogo  Começo  Olá 
 Fim

O exemplo de código em HTML que contém dois elementos div, uma aninhada dentro da outra. Ignore o atributo de classe, como ele é usado para colorir os elementos div. Em vez disso, olhar atentamente para o atributo de estilo, que tem três propriedades: left, top, e posição. A propriedade position eo valor absoluto indica que o posicionamento do elemento usa coordenadas absolutas. O absoluto coordenadas do canto superior esquerdo da mão são dadas pelo topo propriedades e esquerda, respectivamente. A largura e altura, que indicam como largura e altura do elemento div será, estão faltando. Quando essas propriedades estiverem ausentes, o navegador calcula dinamicamente a largura e altura. No exemplo de código HTML, um elemento div é encapsulado dentro do outro. Ambos os elementos são colocados div 100 pixels do topo e 100 pixels da esquerda. À primeira vista, as coordenadas absolutas indicaria que ambos os elementos div estão localizados no mesmo local. Entretanto, este não é o que o navegador exibe.

Os dois elementos div não estão em cima uns dos outros, mas uma é em relação ao outro. Isso é um pouco intrigante, na posição de atributo é definida como absoluta, por isso as coordenadas deve ser absoluta. A verdadeira questão é: "Qual é absoluto?" Por exemplo, você precisa calcular todas as coordenadas absolutas no que diz respeito ao elemento pai? Imagine se um elemento div que não está posicionado usando coordenadas absolutas contém um elemento div que é posicionado usando coordenadas absolutas. Que coordena seria a utilização elemento contido div? A resposta é que ele irá usar o último elemento que seja posicionado: absolute ou position: relative (posição: herdar é o padrão). Isto é como você começa o posicionamento absoluto no posicionamento relativo. Usando coordenadas de torna possível ter um elemento div aparecer e mostrar a sua informação como uma caixa de diálogo. Você pode adicionar funcionalidade, onde um link na caixa de diálogo "seria ocultar a caixa de diálogo pop-up. Para ser capaz de saber onde fazer um diálogo aparecer, você precisa capturar a mensagem "onclick e processá-lo. O código-fonte a seguir torna um elemento div aparecer quando os usuários clicam no ecrã. O elemento div contém um link que é usado para ocultar o elemento div.

 Fonte: / website / ROOT / artigos ajax / dhtml / clickappeardiv.html  Essentials DIV diálogo  Olá algum texto Esconda-me

Na página HTML exemplo, o corpo é um elemento div único, que não é apresentado quando a página HTML é carregada. O elemento div é o único elemento div que será colocado em algum lugar na página HTML quando o mouse é clicado. Observe a largura, altura e posição são atribuídas propriedades na declaração do elemento div. Essas propriedades são padrões que podem ser definidas em tempo de projeto, reduzindo assim a quantidade de código que você precisa para definir quando exibir o elemento div.

O exemplo de código contém duas funções: DisplayDiv e HideDiv. A função DisplayDiv é usado para mostrar o elemento div. A função HideDiv é usado para ocultar o elemento div. O manipulador body.onclick chama a função DisplayDiv. O elemento do corpo é usado porque o evento onclick bolhas para cima da criança ao pai, eo elemento div deve ser colocado em algum lugar na página HTML exibido. A função HideDiv é chamado clicando no link que é exibido quando o elemento div é exibida. Quando o carregamento da página HTML, os usuários são apresentados com uma tela em branco. Quando clicam em qualquer lugar da tela, o elemento do corpo capta o evento clique e passa o caso para a função DisplayDiv. Na execução do DisplayDiv, a evt objeto evento é testado usando uma única linha. A única linha é necessária para compatibilidade cross-browser. Uma vez que o objeto de evento completo foi recuperado e atribuído a evt, presume-se que um evento do mouse está sendo enviado. Um navegador enviado evento do mouse tem as propriedades clientX e clientY, que contêm as coordenadas do clique no quadro da página HTML.

As coordenadas de posição do elemento div usando as propriedades e style.left style.top. Após o elemento div tem sido posicionado, você exibi-lo usando a style.display propriedade. Pode ocultar o elemento div, clicando no link Esconda-me, o que então os resultados em uma página HTML em branco. A exibir e ocultar o elemento div é bastante elementar, mas há uma pegadinha escondida. Se um elemento div usa coordenadas absolutas e é encapsulado dentro de outro elemento div que usa coordenadas absolutas, em seguida, definindo as coordenadas irá resultar em um elemento mal posicionado. Isso acontece porque o evento clique utilizações coordenadas em relação ao browser, e encapsulado usa elemento div coordenadas em relação ao elemento pai. Para solucionar este problema, você precisará fazer referência a propriedades diferentes, como o seguinte reescrita função DisplayDiv ilustra:

função DisplayDiv (evt) (evt = (evt)? evt: ((event)? evento: null); if (evt.layerX) ( x = evt.layerX; y = evt.layerY; ) else if (evt.offsetX) ( x = evt.offsetX; y = evt.offsetY; )var element = document.getElementById ( "display"); element.style.left = x, y = element.style.top; element.style.display = "block";)

O código em negrito representa o código usado para encontrar as coordenadas do evento de clique em relação ao elemento que está sendo clicado. O código tem dois testes para a existência de qualquer layerX ou offsetX. Se layerX existe, então você está usando aMozilla navegador compatível, e se offsetX existe, então você está usando o Microsoft Internet Explorer. Este código modificado irá trabalhar em situações simples, mas não é confiável, pois as coordenadas são relativas ao elemento que está sendo clicado. Por exemplo, se você tiver um elemento div encapsulados dentro de um elemento div encapsulados dentro de um elemento div, e clicar no elemento div média, a relação coordenadas será errado. Em poucas palavras, uma vez que você começar a utilizar coordenadas absolutas dentro de elementos que são posicionado usando coordenadas absolutas, você vai ter problemas para descobrir a posição real. Em vez disso, use clientX e clientY, e calcular as coordenadas absolutas dos elementos HTML usando uma iteração recursiva. A capacidade de exibir elementos div onde os usuários clicam permite implementar a funcionalidade de menu tipo. Você pode implementar manipuladores de exibição de erro e outras mensagens informativas que têm de ser posicionados. A única coisa que você não pode fazer é mostrar AMessage ou funcionalidade que você pode arrastar para outra posição na página HTML. Para isso, a solução mais simples é a aplicação do mouse para baixo, mover mouse e mouse-up de eventos. Isso parece simples, mas requer um pouco de trabalho extra para fazê-lo vigorosamente.

Para começar, você não pode usar o evento onclick, porque este evento é enviado quando o botão do mouse é liberado. Para implementar uma operação de arrastar, você deve capturar o onmousedown, onmousemove, onmouseup e eventos. O restante deste artigo utiliza uma solução predefinidos, porque muito poucos detalhes estão envolvidos, e você pode aplicar esta solução base em múltiplos contextos. A solução é usar um arquivo do site aweb chamado Dynamic Drive (ou dom-drag.js ) 4, que apenas exige que os usuários especifiquem qual elemento HTML deve ser arrastáveis. O dom-drag.js manipula todos execução do menor nível de detalhes do evento clique do mouse. A barra de ferramentas é reconhecido como um hotspot usado para arrastar o elemento div na página HTML. Não é necessário definir um elemento div usando a notação tradicional caixa de diálogo. O código HTML a seguir, mostra como é possível definir um elemento div como um hotspot:

 Drag DIV  Drag Me 
 ligação de qualquer conteúdo

Aviso do Código de layout quanto e código de script existe. O código de layout ultrapassa o código de script, que é o que mais provavelmente vai acontecer em suas implementações caixa de diálogo. Com o dom solução drag.js, seu foco principal está na adição de valor em termos de aparência e textura. O dom-drag.js solução não requer o uso de um elemento div, como você poderia ter criado um elemento da tabela arrastáveis. Lembre-se as seguintes coisas quando implantação de caixas de diálogo:

• Para implementar uma caixa de diálogo em HTML, utilizar coordenadas absolutas; o início de imóveis, para a esquerda e mostrar, e onclick ou onmousedown, onmousemove, onmouseup e eventos do mouse.

• Ao aplicar caixas de diálogo, você vai ser confrontado com dois problemas principais: obter o direito de coordenadas, e certificando-se o elemento que dispara o evento tem alguma relação com o elemento que irá ser manipulado. Por exemplo, você não quer que apareça um menu no canto superior direito canto inferior esquerdo, quando o canto é clicado. Esse comportamento pode confundir os usuários.

• Sempre delegado arrastar-e-soltar para outra biblioteca. Este artigo usou o dom-drag.js solução, mas muitas outras soluções abundam, e você é aconselhado a experimentá-los.

um artigo submetido por Sonja Lande

Isenção de responsabilidade:O nosso site não se responsabiliza pelo conteúdo deste artigo. Webarticles é uma fonte de informação livre.
Importante: Este artigo "Aplicação de caixas de diálogo" foi traduzida por um software automático. Nós sentimos muito por quaisquer erros de ortografia que pode ter ocorrido. Obrigado pela sua compreensão.