Справочник полезных рецептов для jQuery Mobile

1. Как в jQueryMobile динамически поменять у кнопки атрибут data-theme (jQueryMobile changing button data-theme dynamically) 

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

<a id="waiting_users" data-role="button" 
data-theme="c" data-inline="false" >Waiting for Players...</a>

Кнопка в исходном состоянии

Для того чтобы поменять тему кнопки напишем метод, в который будем передавать id кнопки и задавать новую тему, которую хотим установить

changeButtonTheme: function (id, theme) {
  var currentTheme = $("#" + id).attr('data-theme');
  $("#" + id).attr("data-theme", theme)
    .removeClass("ui-btn-up-" + currentTheme)
    .addClass("ui-btn-up-" + theme);
}

Вызываем наш метод и передаем в него id кнопки и новую тему

changeButtonTheme("waiting_users", "a");

Кнопка после изменения темы

2. Как перехватывать событие нажатия на кнопку очистить в текстовом поле в jQueryMobile (How to attach to the click on clear button in textfield in jQuery Mobile)

Для того, чтобы перехватывать стандартное событие нажатия на кнопку очистить в текстовом поле, например, для того чтобы пользователь не мог удалить текст, который по умолчанию находится в текстовом поле. Необходимо использовать метод jQueryMobile on() и переопределить слушатель события нажатия на кнопку очистить.

HTML-код

<div data-role="content" class="ui-content" role="main">
  <input type="text" data-type="search" name="search" />
</div>

jQuery-код

$(document).on('click', ".ui-input-clear", function (e) {
  alert('click!');
});

или можно еще так

$('.ui-content').on('click', '.ui-input-clear', function(e){
  alert('click!');
});

3. Как добавить несколько кнопок в один ряд (на одну линию) горизонтально.

<div style="text-align: center">
 
    <a data-role="button" data-theme="b" data-inline="true">Первая</a>
    <a data-role="button" data-theme="b" data-inline="true">Вторая</a>
    <a data-role="button" data-theme="b" data-inline="true">Третья</a>
 
</div>

4.  Как поместить текст перед полем ввода

<div data-role="fieldcontain">
 
    <label for="fromCityText">Откуда: </label>
    <input type="text" name="fromCityText" id="fromCityText" />
 
</div>
 
<div data-role="fieldcontain">
 
    <label for="toCityText">Куда: </label>
    <input type="text" name="toCityText" id="toCityText" />
 
</div>

5.  Как сделать кнопку с иконкой и поместить иконку справа

<a data-theme="b" data-role="button" 
    data-inline="true" data-icon="arrow-d" 
    data-iconpos="right">Дополнительно</a>

6. Как добавить набор кнопок с переключением между ними (Group of radio buttons)

<fieldset data-role="controlgroup" data-type="horizontal" style="text-align: center">
    <input data-theme="b" type="radio" name="radio-choice-h-2" id="radio-choice-h-2a"  checked="checked" value="light">
    <label for="radio-choice-h-2a">< 1,5 т</label>
    <input data-theme="b" type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="middle">
     <label for="radio-choice-h-2b">1,5 - 5 т</label>
     <input data-theme="b" type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="hard">
     <label for="radio-choice-h-2c">> 5 т</label>
</fieldset>

7.  Добавляем обработчик клика по элементу

$(document).off('tap', "#materials_cargo_type")
           .on('tap', "#materials_cargo_type", function (e) {
               e.currentTarget.className = 
                   e.currentTarget.className + " ui-focus";
});

8. Предотвращаем обновление страницы после закрытия popup

В jQuery Mobile есть такая штука, связанная с закрытием popup. Когда мы пытаемся закрыть popup, нажав клавишу esc или нажав на любое место на экране, страница перезагружается. Для того, чтобы предотвратить это необходимо прописать следующее в js-файле при инициализации приложения. 

$.mobile.popup.prototype.options.history = false;

9. Ка к добавить несколько кнопок на одну линию, чтобы они занимали все пространство

<fieldset class="ui-grid-a">
  <div class="ui-block-a"><a id="exit_app_button1" 
       data-theme="a" data-role="button" >Выйти</a></div>
  <div class="ui-block-b"><a id="reg_user_button1" 
       data-theme="c" data-role="button" >Войти</a></div>
</fieldset>

10. Как закрыть popup

<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
  <div data-role="header" data-theme="a">
    <h1>Версия приложения устарела</h1>
  </div>
  <div role="main" class="ui-content">
    <div class="simple_content_wrapper">
      <div  style="margin: 20px 25px">
        <a id="old_version_download_new_btn" data-role="button" data-theme="b">Обновить приложение</a>
        <a id="old_version_exip_app_btn" data-role="button" data-theme="b">Выход</a>
      </div>
    </div>
  </div>
</div>

$('#popupDialog').popup('close');

11. Как вызвать Google Play Market

Можно открыть магазин приложений Play Market двумя способами

1.

window.open("https://play.google.com/store/apps/details?id=[ID of your APP in Play]");

2.

window.open("market://details?id=[ID of your APP in Play]");