Настройка значений по умолчанию

Работа с автоматической инициализацией jQuery Mobile

В отличие от других проектов jQuery, таких как jQuery и jQuery UI, jQuery Mobile автоматически применяет множество улучшений разметки сразу после загрузки (задолго до того, как сработает событие document.ready). Эти улучшения применяются на основе значений по умолчанию jQuery Mobile, которые разработаны для работы со стандартными сценариями. Если требуются изменения настроек, их легко настроить.

Событие mobileinit

Когда jQuery Mobile запускается, он вызывает событие mobileinit на объекте document. Чтобы переопределить значения по умолчанию, привяжите обработчик к событию mobileinit.

$( document ).on( "mobileinit", function() {
  //apply overrides here
});

Поскольку событие mobileinit срабатывает немедленно, вам нужно будет привязать обработчик события до загрузки jQuery Mobile. Свяжите файлы JavaScript в следующем порядке:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Вы можете переопределить значения по умолчанию, расширяя объект $.mobile с помощью метода jQuery $.extend.

$( document ).on( "mobileinit", function() {
  $.extend( $.mobile , {
    foo: bar
  });
});

В качестве альтернативы, вы можете установить их с помощью обозначения свойств объекта.

$( document ).on( "mobileinit", function() {
  $.mobile.foo = bar;
});

Настраиваемые параметры

Следующие значения по умолчанию настраиваются через объект $.mobile:

activeBtnClass string, default: "ui-btn-active"

Класс CSS, используемый для состояния "активной" кнопки.

Устарело в версии 1.4 и будет удалено в версии 1.5. Класс "ui-btn-active" по-прежнему будет применяться к элементам, как и прежде.

activePageClass string, default: "ui-page-active"

Класс CSS, используемый для страницы, которая в данный момент отображается или находится в процессе перехода.

Устарело в версии 1.4 и будет удалено в версии 1.5. Класс "ui-page-active" по-прежнему будет применяться к элементам, как и прежде.

ajaxEnabled boolean, default: true

jQuery Mobile автоматически обрабатывает нажатия ссылок и отправку форм через Ajax, когда это возможно. Если false, отслеживание URL-хэша также будет отключено, и URL будут загружаться как обычные HTTP-запросы.

allowCrossDomainPages boolean, default: false

Когда jQuery Mobile пытается загрузить внешнюю страницу, запрос проходит через $.mobile.loadPage(). Это позволит выполнять запросы между доменами только в том случае, если $.mobile.allowCrossDomainPages установлено в значение true. Поскольку фреймворк jQuery Mobile отслеживает, какая страница просматривается в хэше расположения браузера, может произойти атака XSS (межсайтовый скриптинг), если код XSS может манипулировать хэшем и установить его на URL другого домена по своему выбору. Это основная причина, по которой значение по умолчанию для $.mobile.allowCrossDomainPages установлено в false. В приложениях PhoneGap, которые должны «связываться» с удаленным сервером, загружая ресурсы с него, оба значения $.support.cors И $.mobile.allowCrossDomainPages должны быть установлены в true.

autoInitializePage boolean, default: true

После подготовки DOM, фреймворк должен автоматически вызвать $.mobile.initializePage. Если false, страница не будет инициализирована и будет визуально скрыта до тех пор, пока $.mobile.initializePage не будет вызвана вручную.

buttonMarkup.hoverDelay integer, default: 200

Установите задержку для сенсорных устройств, чтобы добавлять классы hover и down при взаимодействии с сенсорными кнопками во всем фреймворке. Уменьшение этой задержки приводит к более отзывчивому пользовательскому интерфейсу, но часто приводит к тому, что состояние down будет применено во время прокрутки страницы.

Устарело в версии 1.4 - используйте $.mobile.hoverDelay вместо этого.

defaultDialogTransition string, default: 'pop'

Установите значение по умолчанию для перехода при изменении диалога с использованием Ajax. Установите 'none' для отсутствия переходов.

Устарело в версии 1.4.

При использовании страниц, стилизованных как диалоговые окна (data-role="page" data-dialog="true"), если вы хотите, чтобы у них был другой переход, чем у обычных страниц, вы должны указать переход в ссылке, открывающей их, добавив атрибут data-transition="pop" к ссылке. "pop" — просто пример. Вы можете указать любой переход, например, "slide", "flip" или "none".

Аналогично, при вызове метода change() pagecontainer также необходимо явно указать переход, если вы хотите, чтобы он отличался от $.mobile.defaultPageTransition:

$( ":mobile-pagecontainer" )
  .pagecontainer( "change", "dialog.html", { transition: "pop" } );

$.mobile.defaultDialogTransition устарел.

defaultPageTransition string, default: 'fade'

Установите значение по умолчанию для перехода при изменении страницы с использованием Ajax. Примечание: значение по умолчанию было изменено с 'slide' на 'fade' в версии 1.1. Установите 'none' для отсутствия переходов.

degradeInputs object

"color", default: false

Тип ввода, в который преобразуются элементы input типа "color".

"date", default: false

Тип ввода, в который преобразуются элементы input типа "date".

"datetime", default: false

Тип ввода, в который преобразуются элементы input типа "datetime".

"datetime-local", default: false

Тип ввода, в который преобразуются элементы input типа "datetime-local".

"email", default: false

Тип ввода, в который преобразуются элементы input типа "email".

"month", default: false

Тип ввода, в который преобразуются элементы input типа "month".

"number", default: false

Тип ввода, в который преобразуются элементы input типа "number".

"range", default: "number"

Тип ввода, в который преобразуются элементы input типа "range".

"search", default: "text"

Тип ввода, в который преобразуются элементы input типа "search".

"tel", default: false

Тип ввода, в который преобразуются элементы input типа "tel".

"time", default: false

Тип ввода, в который преобразуются элементы input типа "time".

"url", default: false

Тип ввода, в который преобразуются элементы input типа "url".

"week", default: false

Тип ввода, в который преобразуются элементы input типа "week".

dynamicBaseEnabled boolean, default: true

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

focusClass string, default: "ui-focus"

Класс CSS, используемый для состояния "активной" кнопки.

Устарело в версии 1.4 и будет удалено в версии 1.5. Класс "ui-focus" по-прежнему будет применяться к элементам, как и прежде.

getMaxScrollForTransition function

Устанавливает разрыв прокрутки для переходов. Если позиция прокрутки больше значения, возвращаемого этой функцией, переход "none" будет использоваться. По умолчанию функция возвращает утроенную высоту окна.

gradeA функция, возвращающая boolean, default: функция, возвращающая значение $.support.mediaquery

Любые условия поддержки, которые должны быть выполнены для продолжения.

hashListeningEnabled boolean, default: true

jQuery Mobile автоматически отслеживает и обрабатывает изменения в location.hash. Отключение этого параметра предотвратит обработку jQuery Mobile изменений хэша, что позволит вам обработать их самостоятельно или использовать простые глубокие ссылки в документе, которые прокручивают к определенному идентификатору.

ignoreContentEnabled boolean, default: false

Предупреждение: Установка этого свойства в значение true приведет к снижению производительности при улучшении. После установки все автоматические улучшения, вносимые фреймворком к каждому улучшаемому элементу разметки пользователя, сначала проверят наличие data-enhance=false родительского узла. Если он найден, разметка будет проигнорирована. Это свойство и соответствующий атрибут данных предоставляют механизм для предотвращения улучшения больших фрагментов разметки.

keepNative Селектор, default: ":jqmData(role='none'), :jqmData(role='nojs')"

Элементы, соответствующие селектору, указанному в этом параметре, никогда не будут улучшаться. Это отличается от ignoreContentEnabled, потому что это не влияет на потомков элементов, соответствующих этому селектору.

linkBindingEnabled boolean, default: true

jQuery Mobile автоматически привязывает нажатия на якоря в вашем документе. Установка этого параметра в false предотвратит всю обработку нажатия якорей, включая добавление активного состояния кнопки и затухания альтернативных ссылок. Это следует использовать только при попытке делегировать управление нажатием другой библиотеке или пользовательскому коду.

maxTransitionWidth целое число, логическое значение, default: false

Установите максимальную ширину для переходов. Параметр принимает любое число, представляющее ширину в пикселях, и его значение по умолчанию false. Если задано числовое значение, переход "none" будет использоваться, если ширина окна больше заданного значения.

minScrollBack целое число, default: 0

Минимальное расстояние прокрутки, которое будет сохранено при возвращении на страницу.

Устарело в версии 1.4 и будет удалено в версии 1.5. Любая прокрутка будет сохраняться. Это соответствует поведению нативных браузеров. Старое значение по умолчанию 250 изменено на 0 во время периода устаревания.

ns string, default: ""

Используемый в атрибутах данных (например, data-role) префикс. Может быть установлен в любое строковое значение, включая пустую строку, которая является значением по умолчанию. При использовании рекомендуется включать префикс с тире, например, "mynamespace-", что соответствует data-mynamespace-foo="...".

Если вы используете именование по префиксам данных, вам нужно обновить/переопределить один селектор в CSS темы. Следующие селекторы данных должны включать используемый вами префикс:

.ui-mobile [data-mynamespace-role=page], .ui-mobile [data-mynamespace-role=dialog], .ui-page { ...

pageLoadErrorMessage string, default: "Ошибка загрузки страницы"

Установите текст, отображаемый при неудачной загрузке страницы через Ajax.

pageLoadErrorMessageTheme string, default: "e"

Установите тему для окна сообщения об ошибке.

phonegapNavigationEnabled boolean, default: false

Заменить вызовы window.history.back помощником для навигации PhoneGap, где он доступен. Это решает проблемы навигации при обновлении страницы в приложениях Android PhoneGap, использующих jQuery Mobile.

pushStateEnabled boolean, default: true

Улучшение, использующее history.replaceState в поддерживаемых браузерах, для преобразования Ajax-URL на основе хэша в полный путь к документу. Рекомендуется отключить эту функцию, если Ajax отключен или если широко используются внешние ссылки.

subPageUrlKey строка, по умолчанию: "ui-page"

Параметр URL, используемый для ссылки на подстраницы, сгенерированные виджетом (например, сгенерированные вложенными списками). Переводится в example.html&ui-page=идентификатор_подстраницы. Сегмент хеша перед &ui-page= используется фреймворком для отправки запроса Ajax на URL, где находится подстраница.

Устаревший с версии 1.4 и будет удалён в версии 1.5.

transitionFallbacks.[transition] строка, по умолчанию: "fade"

Установите резервный переход для браузеров, которые не поддерживают 3D-трансформации для определённого типа перехода.