Make your own AJAX progress bar Faça a sua própria barra de progresso AJAX

Posted on July 7, 2008 at 5:28 am Postado em 7 de julho de 2008, 5:28 am

A synchronous Ja vascript with X ML, commonly called Um síncrono Ja vascript com X ML, comumente denominada AJAX , drives an increasing number of Web 2.0 applications and sites such as Gmail, Google Maps and many others. , Drives de um número crescente de Web sites e de 2,0 aplicações, como o Gmail, Google Maps e muitos outros. Its popularity has to do with several factors, an important one of which is the ability to update a page without a complete refresh. Sua popularidade tem a ver com vários factores, um dos quais uma importante é a capacidade de se atualizar uma página sem uma atualização completa.

When a user refreshes a non-AJAX page, though, they know what’s going on and will wait for the refresh to occur. Quando um usuário atualiza uma página não-AJAX, porém, eles sabem o que está acontecendo e vai aguardar a refrescar a ocorrer. With AJAX, a click on a widget can cause an update to begin but the user won’t know that it’s in progress, or complete, unless the programming behind the widget gives the user an indicator such as a progress bar or spinning ball, or even GMAIL’s unpretentious Loading…. red text indicator. Com o AJAX, um clique em um item pode causar uma atualização para começar, mas o usuário não sabe se ele está em curso, ou concluída, a menos que a programação por trás do widget dá ao usuário um indicador como uma barra de progresso ou de fiação bola , Ou até mesmo do Gmail despretensioso Carregando…. Indicador vermelho texto.

But, you want to do better than a text indicator! Mas, você quer fazer melhor do que um texto indicador! And even though you, like me, might be graphically challenged or just plain too busy to twiddle with Photoshop or other tools for hours perfecting the perfect animated GIF file for your site, you are in luck! E apesar de você, como eu, poderia ser contestada graficamente ou simplesmente demasiado ocupado com a twiddle Photoshop ou outros instrumentos para aperfeiçoar a hora perfeita arquivo GIF animado para seu site, você está na sorte!

The folks behind the ajaxload.info site have prepared a nifty Web 2.0 interface for you to select a graphical progress indicator from a range of righteous options. A gente vai atrás da ajaxload.info ter preparado um site bacana 2,0 interface Web para que você selecione um indicador de progresso gráfica um leque de opções virtuosos. Then, quickly customize the background and foreground colors using easy menu options and set a few other details. Então, rapidamente personalizar as cores de fundo e de novos conhecimentos utilizando fácil definir opções do menu e alguns outros detalhes.

It takes all of two minutes, not counting the time you waste spend studying the possibilities. You preview online, and when happy (or exhausted!) download your shiny new Web 2.0-style animated indicator, and install it on your site. Demora de todos os dois minutos, não contando o tempo que você resíduos passam a estudar as possibilidades. Você visualização on-line, e sempre felizes (ou esgotados!) Download do seu brilhante novo Web 2.0-estilo indicador animado, e instalá-lo em seu site.

To try it, point your browser over at Para experimentar, ponto ao longo do seu navegador em ajaxload.info and the simple and clear interface will step you through the process. e à interface simples e claro que você vai intensificar ao longo do processo.

This is it! Isso é que é! This is all you have to deal with, now we begin to look at the options. Using the drop down, scan through the list of more than thirty progress animations. Mac and Windows styles are included. Isso é tudo que você tem de lidar, agora nós começamos a olhar para as opções. Utilizar o menu suspenso, varredura através da lista de mais de trinta progresso animações. Mac e Windows estilos estão incluídos.

There are more than thirty options available already, and more being created. Há mais de trinta opções já disponíveis, e mais que está sendo criado. As you see, they start off as black and white templates. Como você vê, eles começar a preto e branco como modelos. What you don’t see here (but will at O que você não vê aqui (mas em vão ajaxload.info ) is that these are all animated indicators - which you will add to your site and turn on and off as part of your AJAX widget update / execute process. ) É que esses indicadores são todas animadas - que vai acrescentar ao seu site e ligar e desligar, como parte de sua atualização AJAX widget / executar processo.

Once you’ve selected a style from the options in the first drop-down, use the color-picker widget to select the foreground and background colors. Depois de selecionar um estilo a partir das opções no primeiro drop-down, use o seletor de cores widget para selecionar os novos conhecimentos e cores de fundo. You also select a transparency option for the colors. Você também pode seleccionar uma opção para a transparência das cores. Click Generate It! Clique em Gerar-lo! And you will quickly see your indicator displayed in the preview box below the creation palette. E você vai ver rapidamente o seu indicador exibido na caixa abaixo o preview da criação paleta.

If you like what you see, you download the animated GIF file. Se você gostar do que vê, você faça o download do arquivo GIF animado. If you need to experiment with other progress options or colors, go back to the palette and make your adjustments, the click Generate It! Se você precisa de experiência com outros progressos opções ou cores, volte para a paleta e fazer os ajustes, ao clicar em Gerar It! Until you like what you see. Até você gostar do que vê.

Ajaxload.info is currently in beta, but functions well and is free to use. Ajaxload.info está atualmente na versão beta, mas funciona bem e é livre de usar. It’s sure to save you loads of time over the alternative of using a graphics tool, and it will both help your users, and give your site that spiffy Web 2.0-ness that you crave. É certo para economizar muito do seu tempo durante a alternativa de utilizar uma ferramenta gráfica, e tanto ele irá ajudar os seus utilizadores, e dar o seu site que spiffy Web 2.0-vidade que você anseiam.

Pete Kushmeider, writer and blogger Pete Kushmeider, escritor e blogger

Technorati Tags: Technorati Tags: AJAX , ajaxload.info , Free AJAX applets Livre AJAX applets

If you enjoyed this post, make sure you Se você gostou deste post, certifique-se de subscribe to my RSS feed assinar o meu feed RSS ! !

» Filed Under »Arquivado em Cool Websites Cool Websites

One Response to “Make your own AJAX progress bar” Uma resposta a "Faça a sua própria barra de progresso AJAX"

abhishek abhishek said on : disse sobre: July 7th, 2008 at 2:06 pm Dia 7 de julho, 2008, 2:06 pm
looks great…will make some thing with this. Parece grande… irá fazer algumas coisa com isso.