Criação de layouts dinâmicos

Este artigo resolve um antigo problema, como ele olha para a criação de um interface de utilizador dinâmico, que muda o seu layout, dependendo de qual resolução ou do agente de usuário é a exposição ou a visualização da interface do usuário. Problema Você deseja criar uma interface de usuário dinâmica, que é definida como lógica e em letra legível, é repartido por uma variedade de diferentes agentes do utilizador (incluindo diferentes resoluções, navegadores, dispositivos, e assim por diante), e faz uso da tela sensível imobiliários disponíveis. Teoria Pense no que acontece quando você navegar para uma página HTML como http://www.eweek.com.

Nota Não estou criticando eWeek especificamente, mas apenas como um exemplo, porque quase todo site tem a mesma falha. A realidade é que nenhum deles é melhor, porque cada um tem vantagens e desvantagens. No entanto, nem é a ideal. Quando a Web inicialmente começou a se tornar popular, a maioria dos dispositivos de computação teve a mesma resolução da tela, e as pessoas raramente navegado na Internet em aparelhos de telefone celular. Necessidades de computação Agora dispositivos de computação são extremamente poderosos, mas variam de um extremo na sua resolução de tela. Pessoais podem variar de um mínimo de 800 × 480 e um máximo de 4500 × 1200 para uma tela dupla. Não faz sentido fixar a resolução da tela. A proporção usada no navegador de pequeno porte são uma coluna, uma coluna e uma coluna. Entanto, o maior navegador usa uma coluna, duas colunas e duas colunas. O que você está fazendo é reajustando o espaço de modo que na janela menor, apenas uma coluna é ilustrada. Na janela maior, mais colunas podem ser ilustradas. Solução Este artigo explica a solução em pedaços, começando com o global página HTML que chama o algoritmo de dimensionamento e, em seguida, o algoritmo de dimensionamento em si. O código a seguir compreende a página HTML em geral.

 Fonte: / website / ROOT / artigos ajax / dhtml / dynamiclayout.html 

Olhando o código da página HTML, você pode ver que um tipo chamado FLEXBOX é instanciado e atribuído ao FLEXBOX variável global. O tipo FLEXBOX é o algoritmo de dimensionamento. A ação de instanciar e chamar o tipo FLEXBOX é realizado no InitializePage função, que é chamado pelo event.2 body.onload Você quer instanciar o tipo FLEXBOX no caso body.onload, porque esse é o primeiro local seguro para código para operar em um modelo DOM completo. Quando FLEXBOX é instanciado, ele precisa de um parâmetro de construtor, no caso do exemplo, que é o buffer de "conteúdo". O buffer de "conteúdo" é uma referência de identidade para um elemento HTML que serve como base para os elementos HTML que será redimensionada. No exemplo, as referências de conteúdo identificação de um elemento div, que contém elementos div criança. Neste algoritmo de dimensionamento, referências de um elemento div criança elementos div. Na implementação deste artigo, você não precisa fazer isso. Este algoritmo de dimensionamento ilustra um elemento HTML que contém um número de blocos de conteúdo, que servem como as colunas que serão redimensionados. Quando você atribuir uma instância de FLEXBOX para FLEXBOX, FLEXBOX primeiro inicializa próprio e reordena os elementos div em uma estrutura de tabela. Executando o construtor FLEXBOX faz com que reordenar os elementos div com o seguinte HTML:

 
A reordenação do HTML a um elemento da tabela é uma necessidade. Dois modos proporcionalmente alinhar os elementos em uma página HTML: coordenadas absolutas e relativas coordenadas. Por padrão, o HTML utiliza coordenadas relativas, que o navegador calcula. Em relação coordenar modo, você só precisa definir quais os elementos que seguem a outros elementos. Usando coordenadas absolutas resolve os problemas de alinhamento dos três elementos div criança, mas o resto da página HTML pode ser estranhamente alinhados, como alguns elementos não podem usar absoluta coordenadas. A maneira mais simples para alinhar o conteúdo em uma página HTML usando coordenadas relativas é usar uma tabela. Assim, o algoritmo de dimensionamento olha o elemento div pai, cria uma tabela, e cria uma célula da tabela para cada elemento div criança. Alguns leitores podem pensar que teria sido mais fácil para definir tabela de elementos em div e depois ter o trabalho algoritmo com os elementos da tabela diretamente. É verdade que o uso de um elemento da tabela teria sido mais fácil, mas esse algoritmo ilustra como você pode substituir elementos HTML com novos elementos de HTML. Voltando ao código-fonte da página HTML de chamada, o setCharacteristics método é chamado uma vez FLEXBOX foi atribuído . Você passa uma definição de objeto com um número de objetos incorporados a setCharacteristics. O objetivo do setCharacteristics é definir as larguras de coluna proporcional dos elementos div criança. Assim, o objeto incorporado tem um número de propriedades que correspondem um-para-um com as identificações dos elementos div criança. No exemplo, o objeto incorporado define as seguintes restrições:
• col1: Cada coluna deve ser 200 pixels de largura, e não há amaximum de apenas uma única coluna.
• col2: Cada coluna deve ser de 100 pixels de largura, e há um máximo de quatro colunas.
• col3: Cada coluna deve ser 200 pixels de largura, e pode haver tantas colunas como não há espaço. Para compreender as restrições, você precisa entender a natureza do algoritmo de dimensionamento. A idéia do algoritmo de dimensionamento consiste em definir as proporções que permitir que um aplicativo cliente para ordenar o conteúdo de forma adequada. Ao aumentar a largura do navegador, você pode montar mais blocos de conteúdos lado a lado. A leitura da página HTML é melhorada, porque há menos de rolagem, e na página HTML que se assemelha a de um jornal. A diferença com a página HTML é que ao contrário de um jornal, o número de colunas exibidas depende do tamanho da janela do cliente. A vantagem é que se você olhar para a página HTML a partir do dispositivo ou de um UMPC notearticle wide-screen, você ainda receber uma boa aparência e sentir. Este artigo eo foco algoritmo de dimensionamento sobre a consciência de dar o feedback que uma página HTML célula da tabela agora tem espaço para uma, duas ou três colunas de conteúdo. Como o conteúdo é exibido depende do HTML e está fora do âmbito de aplicação do algoritmo de dimensionamento. Voltando ao código-fonte da página HTML de chamada, o setContentCallback função é chamada depois de chamar setCharacteristics. 
O objetivo do setContentCallback função é definir um callback de usuário que é atualizado com as novas informações do usuário como muitos restrito colunas pode caber em uma célula. No exemplo, o Código do Cliente exibe os parâmetros na célula da tabela. Reproportion Para a mesa, você chamar o método de atualização. A atualização é chamado pela primeira vez, é a partir do evento onload corpo. O evento onload corpo é acionado apenas uma vez e não será chamado novamente se o cliente redimensiona o browser do cliente. Para que o método de atualização chamado sempre que o navegador é redimensionado, o evento window.onresize é atribuído. No exemplo, você atribui window.onresize ao updateClientArea função, o que torna uma única chamada de método para flexbox.update, que em atualidades virar as proporções da tabela. Agora que a teoria do algoritmo de dimensionamento foi explicada a partir do nível abstrato , vamos discutir os detalhes do algoritmo de dimensionamento. O código a seguir mostra a implementação completa do algoritmo de dimensionamento. Note que o algoritmo de dimensionamento é uma aplicação personalizada, e você pode escolher uma estratégia diferente em sua própria situação:
função FLEXBOX (parentIdentifier) (if (typeof (parentIdentifier) == "string") (this.parentIdentifier = document.getElementById (parentIdentifier);) else (this.parentIdentifier = parentIdentifier;) this.table = document.createElement ( "table"); this.table.border = 1; TableRow this.table.insertRow var = (-1); tempArray = new Array (); for (var c1 = 0; c1 <this.parentIdentifier.childNodes.length; c1 + +) ( tempArray [c1] = this.parentIdentifier.childNodes [c1]; ) for (var c1 = 0; c1 <tempArray.length; c1 + +) ( var child = tempArray [c1]; if (child.nodeName.toLowerCase () == "div") ( var cell = tablerow.insertCell (-1); infantil (cell.appendChild); if (child.id) ( cell.id = child.id; ) ) )this.parentIdentifier.appendChild (this.table);) FlexBox.prototype.setCharacteristics = function (características) (this.characteristics características =; FlexBox.prototype.setContentCallback = function (cbContent) this.cbContent (= cbContent; FlexBox.prototype. função de atualização = () (var linha = this.table.rows [0]; totalCells var = row.cells.length; availableLength var = document.body.clientWidth; for (var index in this.characteristics) (this.characteristics [ cols index]. = 0;) Incremento var if (this.characteristics.updateAlgorithm) (Increment this.characteristics.updateAlgorithm =;) else ( Incremento = function (ref) ( takenWidth var = 0; for (var index in ref.characteristics) ( takenWidth + = ref.characteristics [index]. cols * ref.characteristics [index]. largura; ) didIncrement var = false; for (var index in ref.characteristics) ( var obj = ref.characteristics [index]; if ((takenWidth + obj.width) <availableLength) ( if (obj.maxCols) ( if (obj.cols <obj.maxCols) ( obj.cols + +; didIncrement = true; ) ) else ( obj.cols + +; didIncrement = true; ) ) ) if (didIncrement) ( Increment (ref); )Incremento) (this); for (var c1 = 0; c1 <row.cells.length; c1 + +) (if (row.Cells [C1]. Id) (var id = row.Cells [C1]. Id; if (this.characteristics [id] & & this.characteristics [id] width.) (row.Cells [C1]. width = this.characteristics [id]. width * this.characteristics [id]. cols; if (this. cbContent & & this.cbContent.updateContent) (this.cbContent.updateContent (row.Cells [c1], row.Cells [C1]. childNodes [0], this.characteristics [id]. cols, this.characteristics [id]) ;)))))
Para a maioria, não o código que aparece em negrito é o código de suporte para o código em negrito. A secção de código de negrito primeira implementa a lógica utilizada para converter os elementos div div e filho em uma tabela que contém os elementos div criança. A secção de código de negrito segundo implementa a lógica para a proporção de células da tabela. Vamos começar por dissecar o primeiro bloco de código e da manipulação da tabela e os elementos div criança. Você pode manipular o DOM em uma de duas maneiras: Você pode usar a propriedade innerHTML, ou você pode manipular objetos usando métodos. Este artigo manipula objetos usando métodos, porque essa abordagem é mais simples. Os elementos div criança poderia conter algumas bastante sofisticadas código HTML que você não quer serializar e anular a serialização. Usando objetos e movê-los no DOM não danificar os elementos div criança. Observe os seguintes itens do código:
• Use o método document.createElement instanciar um elemento HTML: A instância elemento retornado HTML é instanciado, mas não é parte da página HTML e precisa de ser adicionado.
• Se um elemento representa um elemento HTML específico, como uma tabela, em seguida, associar o métodos do elemento HTML com o elemento instância: No exemplo, uma tabela é instanciado, linhas e tabelas de referência.
• Utilizar uma variável temporária para armazenar os elementos antes de serem reordenadas: Lembre-se antes, quando eu disse que o algoritmo de calibragem não é necessário converter os elementos div a mesa? Antes de olhar para a explicação do algoritmo de dimensionamento, aviso no primeiro bloco de código em negrito como os elementos são salvos em uma matriz temporária (tempArray) antes sendo adicionado de volta para o documento HTML como elementos filho de uma tabela. Essa etapa de salvar temporariamente as referências é absolutamente crucial quando você está manipulando um modelo de objeto de documento. Se você não salvar temporariamente, você pode experimentar alguns efeitos colaterais muito funky. Esta etapa adicional foi adicionado ao artigo para ilustrar como manipular um documento corretamente.
• Adicionar uma instância do elemento HTML com a hierarquia HTML usando um método DOM tal como appendChild: Se a instância passada para appendChild é um elemento já se encontra na página HTML, em seguida, chamar um removeChild antes de chamar appendChild. A convocação da removeChild acontece de forma transparente. O segundo bloco de código de negrito implementa o algoritmo de partição da tabela. A lógica é uma técnica de força bruta que distribui a largura entre as células da tabela e vê se a distribuição é mais ou menos do que a largura disponível. A melhor maneira de ilustrar a lógica é ir para a página HTML exemplo. As restrições da página HTML exemplo, foram descritas em forma de bala de um par de páginas para trás. A lógica lê as restrições e para a primeira iteração, as tentativas de colocar uma única coluna em cada célula da tabela. As larguras de cada coluna são somados e testado contra a largura da área cliente. Se a largura adicionado é menor que a largura da área cliente, e depois outra iteração é executada. No exemplo, a primeira célula da tabela só pode conter uma largura de coluna única. Outra iteração é realizado, e segundo a tabela de contagem de células da coluna é incrementado. O padrão de iterações resulta em um padrão de contagem de coluna que se assemelha a seguinte:
1 1 1 1 2 1 1 2 2 1 3 2 1 3 3 1 4 3 ...
Você utiliza a técnica de força bruta, porque você deseja distribuir as colunas igualmente entre todas as células da tabela. Se você quiser usar o seu algoritmo de distribuição própria, em seguida, a instância do objeto passado para o método setCharacteristics precisa ter um updateAlgorithm membro de dados. Ao implementar seu próprio algoritmo, tenha em mente que você quiser distribuir as larguras de coluna entre as células da tabela. Lembre-se o seguinte:
• Com a tecnologia de hoje, uma ampla variedade de dispositivos têm diferenças extremas em resolução de tela.
• Largura Fixa ou totalmente baseado em percentagens páginas HTML boa olhada apenas em dimensões de ecrã específico. Se a tela está para além dessas dimensões, a página HTML parece ruim.
• Quando acomodar diferentes resoluções de tela, considere o layout da página dinamicamente, nas dimensões horizontal e vertical. A maioria das páginas apenas considerar a página em HTML como sendo dinâmica na dimensão vertical.
• Não utilizar coordenadas absolutas ao usar proporções algorítmicos, porque isso exige adaptação de todos os elementos na página HTML inteiro. Use coordenadas relativas, que implicam elementos de tabela HTML.
• Ao mover o conteúdo de uma forma horizontal e vertical, use um algoritmo de distribuição que distribui uniformemente sobre o conteúdo da página HTML.
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 "Criação de layouts dinâmicos" 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. 



  
  
       









  
 

 Online: 271 users browsing the articles directory