2011-05-16 13 views
9

Me preguntaba si alguien podría arrojar algo de luz sobre cómo podría agregar un preloader giratorio (como los usos de apple) usando el complemento de jQuery Block UI. El preloader debería girar hasta que se cargue el contenido de AJAX. ¿Es esto posible con la IU de Bloque?Preloader giratorio de UI de bloque

Cualquier dirección sería útil, ¡gracias!

Respuesta

16

Encontrar una buena imagen animada Throbber fuera de la web, así: throbber

Configura un div throbber oculto para mostrarlo.

<div id="throbber" style="display:none;"> 
    <img src="/img/busy.gif" /> 
</div> 

Dile a blockUI que use ese div como mensaje.

$.blockUI({ message: $('#throbber') }); 

Una vez finalizada la llamada AJAX, matar a los Throbber:

$.ajax({ 
    complete: function(data) { 
     // kill the block on either success or error 
     $.unblockUI(); 
    } 
}); 

También puede utilizar devoluciones de llamada de éxito/error de Ajax para controlar blockUI de manera diferente en cada resultado, en lugar de completo.

2

He tomado la respuesta proporcionada por mujimu y he solucionado un problema leve con ella. Tengo múltiples usos del "throbber" que ocurren simultáneamente. Lo que encontré fue que se estropeaba y el latido dejaba de funcionar si lo encendía antes de que se desbloqueara uno existente.

Esta es mi solución ...

function ReloadDetails(id) { 
    $('#' + id + '_Details').block({ message: $('<img src="/images/ajax-loader.gif"/>') }); 
    $.get(...); 
} 

Este ajaxLoaderPath es proporcionada por mi cshtml de moverse por problemas con los directorios virtuales.

Cuestiones relacionadas