JQTouch - Cada vez que se produce la carga, añadir una clase de carga?

Question

Estoy usando jQTouch y en jQTouch varios de los enlaces están siendo carga a través de AJAX y luego deslizando. El problema es que no hay ninguna indicación de carga proporcionada a los usuarios.

Me gustaría tener una manera de añadir una clase de carga con un spinner AJAX, cuando cada vez que el Ajax es una llamada de carga, y tienen la clase elimina cuando se realiza la carga, y se muestra la página.

Algunas ideas?

Answer 1

Este es el comportamiento básico si sus enlaces son li class = elementos "flecha". ¿Cómo estás mostrando sus enlaces y dónde desea que la carga-spinner a la pantalla?

Answer 2

el showPageByHref () respuesta es parcialmente correcta.

Sin embargo, en lugar de

$('body').append('<div id="loadinginprogress">Loading...</div>');

QUE NECESITA

$('.current').append('<div id="loadinginprogress">Loading...</div>');

El cuerpo es demasiado general para jQTouch, necesidad de ser específicos para el DIV-página que se muestra actualmente

Answer 3

función

showPageByHref () en js jQTouch es un comienzo bueno. he añadido la derecha por ajax llamada así que la espera por favor, no parpadeo cuando se haga clic en el enlace que ya está cargado, etc.

En pocas palabras - div carga Agregar (loadinginprogress id en exmaple) justo antes de la llamada AJAX y retirar posteriormente el "éxito" o "error". la sección llamada ajax sería algo así (acortado):

function showPageByHref(href, options) {
...
if (href != '#'){
    $('body').append('<div id="loadinginprogress">Loading...</div>');
    $.ajax({
        url: href,
        data: settings.data,
        type: settings.method,
        success: function (data, textStatus) {
            $('#loadinginprogress').remove()
            var firstPage = insertPages(data, settings.animation);
            if (firstPage)
            {
                if (settings.method == 'GET' && jQTSettings.cacheGetRequests && settings.$referrer)
                {
                    settings.$referrer.attr('href', '#' + firstPage.attr('id'));
                }
                if (settings.callback) {
                    settings.callback(true);
                }
            }
        },
        error: function (data) {
            $('#loadinginprogress').remove()
            if (settings.$referrer) settings.$referrer.unselect();
            if (settings.callback) {
                settings.callback(false);
            }
        }
    });
}
...
}

div css para la carga sería algo como:

#loadinginprogress {
    -webkit-border-radius: 10px;
    background-color: rgba(0,0,0,.5);
    color: white;
    font-size: 18px;
    font-weight: bold;
    height: 80px;
    left: 60px;
    line-height: 80px;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 120px;
    width: 200px;
    z-index: 5000;
}

Answer 4

Gracias por sus diferentes puestos de ti. Me ayudaron mucho.

Tengo una solución a proponer sin parchear el código jQtouch sobre el que se basa jQTouch. Utiliza las capacidades de ajax de jQuery.

$(document).ready(function() {
...
  $('#jqt').ajaxStart(function() {
    console.log("ajaxStart");
    ...
  }).ajaxSuccess(function() {
    console.log("ajaxSuccess");
    ... 
  }).ajaxError(function() {
    console.log("ajaxError");
    .... 
  });
....
});

Más detalles disponibles en esta página doc jQuery .

Answer 5

Se podría añadir un controlador de eventos personalizado, y desencadenar el cada vez de loading.gif el clic en el elemento específico que se hizo.

Answer 6

Me acaba de responder de Darin Parker . Sólo echa un vistazo puede ayudarle.