jQuery.mobile.changePage() — jQuery Mobile

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

Описание: Программно переключиться с одной страницы на другую.

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

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

Программно переключиться с одной страницы на другую. Этот метод используется для загрузки и перехода страниц, происходящих в результате нажатия на ссылку или отправки формы, когда эти функции включены.

Примеры:

Переход на страницу "о нас" с переходом slideup.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery.mobile.changePage 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="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div role="main" class="ui-content">
  </div>
</div>
 
<script>
//Adding the changeHash: false to avoid an issue with the iframe
$.mobile.changePage( "../resources/us.html", { transition: "slideup", changeHash: false });
</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.changePage 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="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <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" />
      </p>
    </form>
  </div>
</div>
 
<script>
$.mobile.changePage( "../resources/results.php", {
  type: "post",
  data: $( "form#search" ).serialize(),
  changeHash: false
});
</script>
 
</body>
</html>

Демо:

Переход на страницу "подтверждение" с переходом "pop" без отслеживания в истории.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery.mobile.changePage 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="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div role="main" class="ui-content">
  </div>
</div>
 
<script>
$.mobile.changePage( "../resources/confirm.html", {
  transition: "pop",
  reverse: false,
  changeHash: false
});
</script>
 
</body>
</html>