JQuery Mobile: Загрузите страницу DIV перед переходом

Question

Здравствуйте!

У меня есть вопрос, и я не нашел решение для него в любом месте ...

Итак, у меня есть кнопка, ссылки на внутренние страницы сНу (# PAGE2) с очень длинным списком , мне нужно, чтобы внутренняя страница DIV будет «загружен» до перехода начнет ...

Вот очень простой пример кода:

<!-- Page #1 --> 
<!-- ... --> 
     <div data-role="content">  
     <p>View internal page: <a href="#page2">goto Page 2</a></p> 
     </div> 
<!-- ... --> 
    <!-- Start of Page #2 --> 
    <div data-role="page" id="page2"> 
     <div data-role="header"> 
      <h1>Bar</h1> 
     </div><!-- /header --> 
     <div data-role="content"> 
    <ul><li>...</li> 
    <li>...</li> 
    <!-- About 300+ of: <li>...</li> --> 
    </ul> 
    </div> 

S o, Щелчок по ссылке на # page2 должен дать вам jquery mobile «Loading ...» И после этого «загрузился» контент, с которого должен начаться переход. Причина, по которой я делаю это на той же странице, которую я вставляю на странице # 2 динамически все деление с друзьями Facebook (длинный список), и это занимает много времени от Щелк и до перехода начинают ...

Вот хороший пример того, что мне нужно: http://www.mpdtunes.com Просто перейти к: Live Demo-> Войти -> Click Artists ...

Любые предложения приветствуются!

спасибо! !!

Answer 1

В основном вы хотите сделать это:

1. Используйте кнопку, как это:

   <a href="#" id="to-page2">goto Page 2</a> 
   

2. Добавить событие щелчка к нему:

   $(document).on('pagebeforeshow', '#index', function(){ 
       $(document).on('click', '#to-page2', function(){ 
        // Load internal page content 
       });  
   }); 
   

   Где #index это идентификатор вас r, содержащую страницу.

3. Показать загрузки анимации ака Аякса погрузчик

   setTimeout(function(){ 
       $.mobile.loading('show'); 
   },1); 
   

   SetTimeout необходима потому, что веб-браузеры набора имеют проблемы с динамически срабатывает загрузчика AJAX.

4. Загрузите содержимое своей внутренней страницы. Теперь, если вы используете 1 страницу HTML с несколькими страницами, вы можете сразу добавить новый контент в список. Это связано с тем, что listview уже загружен в DOM. Если вы используете несколько HTML-страниц, сохраните содержимое своей страницы в localstorage переменная.

5. Скрыть загрузчик ajax, снова с setTimeout.

6. Главная страница перехода с:

   $.mobile.changePage("#page2"); 
   

7. Если у вас есть 1 HTML страницы, то это он.Если вы сохранили содержание страницы внутри localstorage, то вам нужно будет загрузить его в течение pagebeforeshow случае второй страницы, как это:

   $(document).on('pagebeforeshow', '#page2', function(){ 
       // Load internal page content from local-storage and append it 
   }); 
   

8. Последний шаг ListView страница инициализации содержимого. Для этого взгляните на мой другой answer, просто найдите тему, относящуюся к списку.