Загрузчик виджет

Загрузчик виджетверсия добавлена: 1.2

Описание: Обрабатывает задачу отображения диалога загрузки, когда jQuery Mobile загружает содержимое через Ajax.

Быстрый доступПримеры

Загрузчик виджет

Загрузчик виджет обрабатывает задачу отображения диалога загрузки, когда jQuery Mobile загружает содержимое через Ajax. Он также может отображаться вручную для пользовательских действий загрузки, используя метод $.mobile.loading (см. документацию по глобальным методам).

Стиль

Загрузчик виджет использует фреймворк CSS jQuery Mobile CSS для настройки своего внешнего вида. Если требуется настройка специфичного для загрузчика стиля, можно использовать следующие имена классов CSS для переопределения или в качестве ключей для classes параметра:

ui-loader: Внешний контейнер для загрузчика виджета. Если используется параметр textvisible, будет добавлена класс ui-loader-verbose. Кроме того, если используется параметр textonly, будет добавлена класс ui-loader-textonly. Во всех остальных случаях, когда текст отсутствует, будет добавлена класс ui-loader-default.
- ui-loader-item: Элемент span загрузчика, представляющий собой иконку
- ui-loader-header: Элемент заголовка загрузчика, представляющий собой текст загрузчика.

Чтобы настроить диалог загрузки глобально, можно задать следующие параметры на его прототипе во время события mobileinit.

Ниже приведены значения по умолчанию:

$( document ).on( "mobileinit", function() {
  $.mobile.loader.prototype.options.text = "loading";
  $.mobile.loader.prototype.options.textVisible = false;
  $.mobile.loader.prototype.options.theme = "a";
  $.mobile.loader.prototype.options.html = "";
});

Эти значения по умолчанию будут заменены только параметрами метода, описанными в документации по глобальным методам в разделе $.mobile.loading.

$.mobile.loading( "show", {
  text: "foo",
  textVisible: true,
  theme: "z",
  html: ""
});

Параметры

классы

Тип: Объект

Значение по умолчанию:

{
        "ui-loader": "ui-corner-all",
        "ui-loader-icon": "ui-icon-loading"
      }

Укажите дополнительные классы, которые нужно добавить к элементам виджета. Любой из классов, указанных в разделе Тематическое оформление, может быть использован в качестве ключа для переопределения его значения. Чтобы узнать больше об этом параметре, ознакомьтесь со статьёй учебного пособия о параметре classes.

Примеры кода:

Инициализируйте загрузчик с указанным параметром classes, изменяя тематическое оформление для класса ui-loader:

$( ".selector" ).loader({
  classes: {
    "ui-loader": "highlight"
  }
});

Получите или задайте свойство параметра classes, после инициализации, здесь читая и изменяя тематическое оформление для класса ui-loader:

// Getter
var themeClass = $( ".selector" ).loader( "option", "classes.ui-loader" );
 
// Setter
$( ".selector" ).loader( "option", "classes.ui-loader", "highlight" );

значения_по_умолчанию

Тип: Булево

Значение по умолчанию: false

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

Этот параметр также доступен как атрибут данных: data-defaults="true".

Примеры кода:

Инициализируйте загрузчик с указанным параметром defaults:

$( ".selector" ).loader({
  defaults: true
});

Получите или задайте параметр defaults, после инициализации:

// Getter
var defaults = $( ".selector" ).loader( "option", "defaults" );
 
// Setter
$( ".selector" ).loader( "option", "defaults", true );

выключен

Тип: Булево

Значение по умолчанию: false

Отключает загрузчик, если установлен в значение true.

Этот параметр также доступен как атрибут данных: data-disabled="true".

Примеры кода:

Инициализируйте загрузчик с указанным параметром disabled:

$( ".selector" ).loader({
  disabled: true
});

Получите или задайте параметр disabled, после инициализации:

// Getter
var disabled = $( ".selector" ).loader( "option", "disabled" );
 
// Setter
$( ".selector" ).loader( "option", "disabled", true );

html

Тип: строка

Значение по умолчанию: ""

Если это установлено в значение, отличное от пустой строки, оно будет использовано для замены всего содержимого внутренней разметки загрузчика.

Примеры кода:

Инициализируйте загрузчик с указанным параметром html:

$( ".selector" ).loader({
  html: "<span class='ui-icon ui-icon-loading'><img src='jquery-logo.png' /><h2>is loading for you ...</h2></span>"
});

Получите или задайте параметр html, после инициализации:

// Getter
var html = $( ".selector" ).loader( "option", "html" );
 
// Setter
$( ".selector" ).loader( "option", "html", "<span class='ui-icon ui-icon-loading'><img src='jquery-logo.png' /><h2>is loading for you ...</h2></span>" );

текст

Тип: строка

Значение по умолчанию: loading

Устанавливает текст сообщения.

Примеры кода:

Инициализируйте загрузчик с указанным параметром text:

$( ".selector" ).loader({
  text: "Loading Page..."
});

Получите или задайте параметр text, после инициализации:

// Getter
var text = $( ".selector" ).loader( "option", "text" );
 
// Setter
$( ".selector" ).loader( "option", "text", "Loading Page..." );

текст_виден

Тип: булево

Значение по умолчанию: false

Если true, значение текста будет использовано под спиннером.

Примеры кода:

Инициализируйте загрузчик с указанным параметром textVisible:

$( ".selector" ).loader({
  textVisible: true
});

Получите или задайте параметр textVisible, после инициализации:

// Getter
var textVisible = $( ".selector" ).loader( "option", "textVisible" );
 
// Setter
$( ".selector" ).loader( "option", "textVisible", true );

только_текст

Тип: булево

Значение по умолчанию: false

Если true, изображение "спиннера" будет скрыто, когда показано сообщение.

Примеры кода:

Инициализируйте загрузчик с указанным параметром textonly:

$( ".selector" ).loader({
  textonly: true
});

Получите или задайте параметр textonly, после инициализации:

// Getter
var textonly = $( ".selector" ).loader( "option", "textonly" );
 
// Setter
$( ".selector" ).loader( "option", "textonly", true );

theme

Тип: Строка

По умолчанию: null, inherited from parent

Устанавливает цветовую схему (образец) для виджета загрузчика. Он принимает одну букву от a до z, которая сопоставляется с образцами, включенными в вашу тему.

Возможные значения: буква образца (a-z).

Этот параметр также доступен как атрибут данных: data-theme="b".

Примеры кода:

Инициализируйте загрузчик со значением параметра theme:

$( ".selector" ).loader({
  theme: "b"
});

Получить или установить параметр theme, после инициализации:

// Getter
var theme = $( ".selector" ).loader( "option", "theme" );
 
// Setter
$( ".selector" ).loader( "option", "theme", "b" );

Методы

checkLoaderPosition()Возвращает: jQuery (только для плагина)

Проверяет позицию загрузчика, чтобы определить, является ли она "фиксированной" по центру.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызовите метод checkLoaderPosition:

$( ".selector" ).loader( "checkLoaderPosition" );

fakeFixLoader()Возвращает: jQuery (только для плагина)

Для браузеров, не поддерживающих фиксированную позицию. Позиционирует по центру по оси y (если поддерживается scrollTop), над активной кнопкой (если определена) или просто на 100px от верха.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызовите метод fakeFixLoader:

$( ".selector" ).loader( "fakeFixLoader" );

hide()Возвращает: jQuery (только для плагина)

Скрыть виджет загрузчика

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызовите метод hide:

$( ".selector" ).loader( "hide" );

loading()Возвращает: jQuery (только для плагина)

Показать или скрыть сообщение о загрузке, которое можно настроить с помощью параметров прототипа $.mobile.loader, как описано в документации по виджетам, или может быть контролироваться через объект параметров.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызовите метод loading:

$( ".selector" ).loader( "loading" );

resetHtml()Возвращает: jQuery (только для плагина)

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызовите метод resetHtml:

$( ".selector" ).loader( "resetHtml" );

show()Возвращает: jQuery (только для плагина)

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызовите метод show:

$( ".selector" ).loader( "show" );

События

create( event, ui )Тип: `loadingcreate`

Срабатывает при создании виджета загрузчика.

event

Тип: Событие
ui

Тип: Объект

Примечание: Объект ui пуст, но включен для согласованности с другими событиями.

Примеры кода:

Инициализируйте загрузчик с указанным обратным вызовом create:

$( ".selector" ).loader({
  create: function( event, ui ) {}
});

Привяжите обработчик событий к событию loadingcreate:

$( ".selector" ).on( "loadingcreate", function( event, ui ) {} );

Пример:

Примеры загрузчика

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>loader 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 role="main" class="ui-content">
    <div data-role="controlgroup">
      <button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="false" data-msgtext="" data-icon="arrow-r" data-iconpos="right">Default loader</button>
      <button class="show-page-loading-msg" data-theme="b" data-textonly="true" data-textvisible="true" data-msgtext="Text only loader" data-icon="arrow-r" data-iconpos="right">Text only</button>
      <button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme a" data-icon="arrow-r" data-iconpos="right">Theme a</button>
      <button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme b" data-icon="arrow-r" data-iconpos="right">Theme b</button>
      <button class="show-page-loading-msg" data-theme="b" data-textonly="true" data-textvisible="true" data-msgtext="Custom Loader" data-icon="arrow-r" data-html="<span class='ui-bar ui-overlay-a ui-corner-all'><img src='../resources/loader/jquery-logo.png' /><h2>is loading for you ...</h2></span>" data-iconpos="right">Custom HTML</button>
      <button class="hide-page-loading-msg" data-icon="delete" data-iconpos="right">Hide</button>
    </div>
  </div>
</div>
 
<script>
$(document).on( "click", ".show-page-loading-msg", function() {
  var $this = $( this ),
  theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
  msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
  textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
  textonly = !!$this.jqmData( "textonly" );
  html = $this.jqmData( "html" ) || "";
$.mobile.loading( 'show', {
  text: msgText,
  textVisible: textVisible,
  theme: theme,
  textonly: textonly,
  html: html
  });
})
.on( "click", ".hide-page-loading-msg", function() {
  $.mobile.loading( "hide" );
});
</script>
 
</body>
</html>

Загрузчик виджет