Настройка скрипта jQuery Mobile

Я новичок в jQuery mobile. Я отлично знаю, как ссылаться на все мои скрипты и файл CSS. Но сейчас я немного смущен тем, как внедрить свой собственный код. Возьмем, например, при кодировании обычного jQuery, который мы используем:

$(document).ready(function (){ // we embedded codes here }); 

Но для jQuery Mobile у меня есть код, который я использую:

 $(document).bind('pageinit',function (){ }); 

Поэтому я вставляю весь свой код внутри.

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

Также в чем разница между mobileinit и pageinit?

Обновить:

jQuery Mobile 1.4

Следующие события устарели и будут удалены на jQuery Mobile 1.5:

  1. pageshow

    • Замена: pagecontainershow
    • Использование: используется для извлечения id предыдущей страницы.

       $(document).on("pagecontainershow", function (e, ui) { var previous = ui.prevPage; }); 
    • Это событие не может быть привязано к определенному идентификатору страницы .

    • Рекомендация: используйте pagebeforeshow вместо этого, чтобы присоединить событие к определенным страницам.

      демонстрация

  2. pagehide

    • Замена: pagecontainerhide
    • Использование: используется для получения id следующей страницы.

       $(document).on("pagecontainerhide", function (e, ui) { var next = ui.nextPage; }); 
    • Это событие не может быть привязано к определенному идентификатору страницы .

    • Рекомендация: вместо этого используйте pagebeforehide для прикрепления события к определенным страницам.

      демонстрация

  3. pageinit

    • Замена: pagecreate

jQuery Mobile 1.3.2 и ниже

Некоторые события устарели, проверьте обновление

Введение:

jQuery Mobile использует Ajax-навигацию для загрузки страниц / представлений в DOM (pagecontainer), повышения (стиля) их, а затем отображения их по запросу. Страница проходит через много шагов (события страницы) с момента ее вставки в DOM до ее удаления. Это относится к обоим моделям, Single-Pages и Multi-Page .

Мероприятия:

Я рассмотрю основные события и наиболее часто используемые в их последовательном порядке.

  • mobileinit : (1)

    Самое первое событие, которое срабатывает при загрузке веб-сайта с использованием jQM. jQM состоит из многих виджетов, которые имеют параметры по умолчанию. Эти виджеты не запускаются во время этого события, поэтому вы можете переопределить глобальные настройки / значения по умолчанию этих виджетов после этого события.

    Важно: ваш код должен идти после jQuery.js и перед jQM.js для успешного изменения значений по умолчанию.

        
  • pagebeforecreate and pagecreate : (1)

    Эти события почти одинаковы. Во время них виджеты автоматически инициализируются и начинают улучшать разметку содержимого. Они полезны для переопределения значений по умолчанию для виджета определенного элемента (ов).

     $(document).on("pagecreate", "[data-role=page]", function () { $(".selector").listview({ icon: "star" }); // changes list items icons to "star" }); 
  • pageinit : (1) (4)

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

     $(document).on("pageinit", "#myPage" , function () { $(this).on("swipeleft", function () { // code }); }); 
  • pagebeforechange : (2)

    Он дважды запускается для страницы, которая не просматривалась раньше и один раз для страницы с кешем / просмотром. Он опускает объект данных toPage и options , они содержат все детали, относящиеся к просматриваемой странице. Очень полезно знать, что пользователь пришел со страницы X и перешел на страницу Y. Во время этого события вы можете запретить пользователю просматривать страницу Y и отправить его на страницу Z.

     $(document).on("pagebeforechange", function (e, data) { if(data.toPage[0].id == "Y") { $.mobile.changePage("Z"); e.preventDefault(); // don't update $.mobile.urlHistory } }); 
  • pagebeforehide : (3)

    Он запускается на текущей активной странице X, но до перехода к странице / анимации.

  • pagebeforeshow : (3)

    Он запускается на странице Y, которая будет отображаться после текущей страницы, но не будет перехода / анимации.

  • pageshow : (3) (4)

    Выполняется переход / анимация и отображается страница Y.

  • pagehide : (3) (4)

    Переход / анимация выполняется на странице X, и она скрыта.

демонстрация


Диаграммы (jQM 1.4) (5)

Многостраничная модель


Модель одиночной страницы

(1) Пожары один раз.

(2) Выполняется дважды для новой страницы и один раз для кэшированной страницы.

(3) Пожары всякий раз, когда это происходит.

(4) Устаревший из jQM 1.4 и будет удален на jQM 1.5

(5) Ресурс: ссылка на страницуContainer Events 1 и ссылка 2

  • JQuery CSS и JS для ограниченных элементов
  • Отключить кнопки в jQuery Mobile
  • jQuery Mobile не применяет стили после динамического добавления контента
  • Динамический заголовок JQuery Mobile 1.4.1
  • Какую версию jQuery следует упомянуть в коде
  • Изменить текст кнопки jquery mobile
  • изменение размера КНОПКИ через CSS
  • Как я могу остановить jQuery mobile для применения стилей к моим конкретным элементам формы
  • как получить значение выбранного элемента в автозаполнении
  • Показать загрузку страницы Spinner on Ajax Call в jQuery Mobile
  • полный календарный выбор ячейки на мобильном устройстве?
  • Давайте будем гением компьютера.