JQTOUCH - В любое время происходит загрузка, добавляет класс загрузки?

Question

Я использую JQTOUCH и в JQTOUCH несколько ссылок загружаются через AJAX, а затем сдвигаются. Проблема заключается в том, что пользователям нет указаний на загрузку.

Я хотел бы добавить способ загрузки класса с помощью AJAX spinner, когда когда-либо загружается вызов ajax и удаляется класс при загрузке и отображается страница.

Любые идеи?

Answer 1

Это основное поведение, если ваши ссылки являются элементами li class = "arrow". как вы показываете свои ссылки и где вы хотите, чтобы экран-счетчик отображался?

Answer 2

Функция showPageByHref() в jqtouch js - хорошее начало. Я добавил его прямо в ajax-вызов, поэтому, пожалуйста, подождите, пока не начнет мигать, когда вы нажмете ссылку, которая уже загружена и т. д.

Вкратце - добавьте загрузку div (id loadinprogress в exmaple) прямо перед вызовом ajax и удалите позже " успех "или" ошибка ". раздел Ajax вызов будет выглядеть примерно так (укороченный его):

 
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); 
      } 
     } 
    }); 
} 
... 
} 

CSS для загрузки DIV будет что-то вроде:

 
#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 3

Вы можете добавить обработчик событий, и вызвать загрузку. gif каждый раз, когда клик по конкретному элементу был выполнен.

Answer 4

ответ showPageByHref() частично верен.

Но вместо

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

Вам нужно

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

тела является слишком общим для jqtouch, должны быть специфическими для отображаемого в данный момент DIV-страницы

Answer 5

Я просто ответил Дарина Parker's question. Просто проверьте это, это может вам помочь.

Answer 6

Благодарим вас за разные посты. Они мне очень помогли.

У меня есть решение предложить без исправления кода jQtouch, на который полагается jQTouch. Он использует возможности jQuery ajax.

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

более подробная информация доступна в this jQuery doc page.