jQuery.mobile.loadPage() — jQuery Mobile

jQuery.mobile.loadPage( url [, options ] )Возвращает: Promiseверсия устаревшая: 1.4.0

Описание: Загрузка внешней страницы, улучшение её содержимого и вставка в DOM.

Примечание: jQuery.mobile.loadPage устарело начиная с jQuery Mobile 1.4.0 и будет удалено в 1.5.0. Используйте метод pagecontainer виджета load() вместо него.

jQuery.mobile.loadPage( url [, options ] )
- url
  
  Тип: Строка или Объект
- options
  
  Тип: Объект
  
  Свойства:
  - allowSamePageTransition (по умолчанию: false)
    
    Тип: Булево значение
    
    По умолчанию, changePage() игнорирует запросы на изменение на текущую активную страницу. Установка этого параметра в true позволяет выполнить запрос. Разработчики должны учитывать, что некоторые переходы страниц предполагают, что fromPage и toPage запроса changePage разные, поэтому анимация может выполняться не так, как ожидается. Разработчики несут ответственность за предоставление правильного перехода или отключение его в этом конкретном случае.
  - changeHash (по умолчанию: true)
    
    Тип: Булево значение
    
    Определяет, нужно ли обновлять хэш в адресной строке.
  - data (по умолчанию: undefined)
    
    Тип: Объект или Строка
    
    Данные, которые нужно отправить с запросом на Ajax-странице.
  - loadMsgDelay (по умолчанию: 50)
    
    Тип: Число
    
    Вынужденная задержка (в мс) перед отображением сообщения о загрузке. Это необходимо для того, чтобы позволить странице, которая уже была посещена, быть извлеченной из кэша без сообщения о загрузке.
  - pageContainer (по умолчанию: $.mobile.pageContainer)
    
    Тип: Коллекция jQuery
    
    Указывает элемент, который должен содержать страницу.
  - reloadPage (по умолчанию: false)
    
    Тип: Булево значение
    
    Принудительно перезагружает страницу, даже если она уже находится в DOM контейнера страницы.
    Используется только тогда, когда аргумент 'to' функции changePage() является URL.
  - role (по умолчанию: undefined)
    
    Тип: Строка
    
    Значение data-role, которое будет использоваться при отображении страницы. По умолчанию это неопределено, что означает, что нужно полагаться на значение атрибута @data-role, определенного в элементе.
  - showLoadMsg (по умолчанию: true)
    
    Тип: Булево значение
    
    Определяет, отображать ли сообщение о загрузке при загрузке внешних страниц.
  - transition (по умолчанию: $.mobile.defaultPageTransition)
    
    Тип: Строка
    
    Используемый переход при показе страницы.
  - type (по умолчанию: "get")
    
    Тип: Строка
    
    Определяет метод ("get" или "post") для использования при отправке запроса на страницу.
    Используется только тогда, когда аргумент 'to' функции changePage() является URL.

Загрузка внешней страницы, улучшение её содержимого и вставка в DOM. Этот метод вызывается функцией changePage() в том случае, когда её первым аргументом является URL. Эта функция не влияет на текущую активную страницу, поэтому её можно использовать для загрузки страниц в фоновом режиме. Функция возвращает объект отложенного обещания, который выполняется после улучшения страницы и вставки её в документ.

Примеры:

Загрузка страницы "о нас" в DOM.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery.mobile.loadPage demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
  <div data-role="header">
      <h1>loadPage() demo</h1>
    </div><!-- /header -->
 
  <div role="main" class="ui-content">
 
    <p>First check if the 'About us' page is in the DOM, Load the page in the DOM and check again</p>
    <input type="button" id="domcheck" data-inline="true" value="Is 'About us' in the DOM?"/>
    <input type="button" id="loadpage" data-inline="true" value="Load the 'About us' page"/><br />
    <div id="myResult">'About Us' is in the DOM: <span id="result">The result will be displayed here</span></div>
  </div>
 
<script>
  $( "#domcheck" ).on( "click", function() {
    var check = $( "#aboutUs" ).length === 1;
    $( "#result" ).text( check );
  });
  $( "#loadpage" ).on( "click", function() {
    $.mobile.loadPage( "../resources/us.html");
  });
</script>
 
</body>
</html>

Демо:

Загрузка страницы "результаты поиска", используя данные из формы с id "search".

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery.mobile.loadPage demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
  <div role="main" class="ui-content">
 
    <form id="search">
      <p>Please fill in the form below:<br /><br />
      <label for="choice">Favorite framework:</label>
      <input type="text" name="choice" id="choice" value="jQuery Mobile" />
 
      <a href="#formResults" data-role="button" data-inline="true" data-rel="dialog">Show Results</a>
      </p>
    </form>
 
  </div>
 
<script>
$.mobile.loadPage( "../resources/results.php", true, {
  type: "post",
  data: $( "form#search" ).serialize()
});
</script>
 
</body>
</html>