T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
« Javascript – delci uporabne kode
Napiši svoj PHP error handler (obdelovalec napak:P) »
9th March

AJAX Gmail indikator – prikaz statusnega okna pri AJAX operacijah

Uporabniki (večina) ne razlikujejo ali interneta (spletna) stran pri določeni operaciji uporabi AJAX ali normalno pošiljanje zahtevka na strežnik (osvežitev strani). Pri drugi opciji uporabnik vidi, da se je zadeva osvežila oz. lahko vidi status (indikator) nalaganja, pri AJAX-u pa ne more.

Zato moramo uporabniku pri uporabi AJAX-a to sporočiti mi. Kot ste lahko opazili pri svoji AJAX knjižici uporabljam funkcijo setLoading, ki nastavlja vidnost indikatorju statusu:

PLAIN TEXT
JAVASCRIPT:
  1. function setLoading(mode, text){
  2.     var lo = document.getElementById('lo');
  3.  
  4.     if (lo === null) {
  5.         return false;
  6.     }
  7.  
  8.     //RM09062007 If text is not define, use default
  9.     if (typeof text == "undefined") {
  10.         text = LOADING_TEXT;
  11.     }
  12.  
  13.     if (mode === 'show'){
  14.         lo.style.display = '';
  15.     }else{
  16.         lo.style.display = 'none';
  17.     }
  18.  
  19.     lo.innerHTML = LOADING_TEXT;
  20. }

Dokument z ID-jam lo je kopija tistega, kar lahko vidite na Gmail-u z malenkostnimi popravki. HTML koda elementa (div-a):

PLAIN TEXT
HTML:
  1. <div style="padding: 2px; background: rgb(204, 68, 68) none repeat scroll 0%; position: fixed; z-index: 3; color: white; font-size: 100%; top: 1px; right: 5px; display: none;" id="lo">Nalagam...</div>

Zgoraj napisana koda poskrbi, da je AJAX statusni indikator vedno na desnem vrhu brskalnika oz. vsebine saj je pozicija relativna na trenutno pozicijo uporabnika na internetni strani. Tako zagotovimo, da je statusni indikator vedno prisoten na uporabnikovem ekranu. S tem pa zagotovimo, da je uporabnik vedno obveščen kaj se dogaja.

Dodatne informacije:

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. AJAX na enostaven način
  2. Javascript dodatki za prikaz oken oz. foto-galerije (ThickBox, Lightbox, GreyBox, Highslide)
  3. Stalno osveževanje del spletne vsebine – ajax jquery.get – javascript setinterval
  4. AJAX iskanje in dodajanje v seznam (select) z dodatnimi informacijami
  5. Google AJAX Suggest kopija
  6. AJAX iskanje datotek, dodajanje v seznam ter predogled le teh (PDF, jpeg)
  7. Avtomatska preusmeritev pri uporabniku prijaznem sporočilu o napaki
  8. jQuery each snippet
  9. IE8 lahko emulira IE7 prikaz (render mode)
  10. IE6 težave pri izdelavi spletnih strani

Roky || Sunday, March 9th, 2008 ob 8:36 pm || Splet, Splet (Javascript, Ajax) || RSS 2.0 | Dodaj komentar || Trackback


Dodaj komentar