Обновление стиля jQueryMobile на радио-кнопках на лету - PullRequest
Новая
       4

Обновление стиля jQueryMobile на радио-кнопках на лету

4 голосов
/ 20 марта 2012

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

Моя цель состоит в том, чтобы изменить тему выбранного переключателя (в любом случае связанные элементы управления), чтобы он выделился больше при выборе. 

<div data-role="content">

    ...

    <fieldset data-role="controlgroup" id="showChooser">
        <legend><h3>Which show are you attending?</h3></legend>

        <input type="radio" name="activeShow" id="activeShow1" value="1" />
        <label for="activeShow1">
            <h2>Choice 1</h2>
            <p>03/25/2012 - 03/27/2012</p>
        </label>

        <input type="radio" name="activeShow" id="activeShow2" value="2" />
        <label for="activeShow2">
            <h2>Choice 2</h2>
            <p>03/25/2012 - 03/27/2012</p>
        </label>

        <input type="radio" name="activeShow" id="activeShow3" value="3" />
        <label for="activeShow3">
            <h2>Choice 3</h2>
            <p>03/25/2012 - 03/27/2012</p>
        </label>

        ...

    </fieldset>

    ...

</div>

В результате отображается следующий список:

базовое состояние http://img.skitch.com/20120319-8wfa4ep6txwdtgjy475k6b5c3k.png

Итак, при нажатии одного из них я запускаю следующий код: 

$('#showChooser input:radio').click(function(e) {
    $("#showChooser label").attr('data-theme','c');
    $(this).next().attr('data-theme','e');
    $("#settings").page();
});

Первая строка, теоретически, должна их сброситьвсе до базового состояния темы 'C', а затем во второй строке будет выделен выбранный элемент.Я могу пройти и увидеть, что эти HTML-изменения сделаны, поэтому очевидно, что в следующий раз jQuery Mobile должен будет выполнить повторный анализ и обновить отображение.

Обратите внимание на отчаянную попытку обновить всю страницус .page() в конце - даже если это не приведет к желаемому эффекту.

При первом щелчке один из них дает желаемый эффект:

state 2

Но последующие щелчки, кажется, не отменяют выделение ранее выбранных строк:

state 3

Я также пробовал $("#showChooser").listview("refresh") и некоторые другие подобные вещи, которые яне могу вспомнить, но ни один не имеет желаемого эффекта.Так что я пропускаю / делаю неправильно?

1 Ответ

7 голосов
/ 20 марта 2012

У меня была точно такая же проблема. 

$('#showChooser input:radio').click(function(e) {
    $("#showChooser label").attr('data-theme','c').removeClass('ui-btn-up-e');
    $(this).next().attr('data-theme','e').addClass('ui-btn-up-e');
});

См. это сообщение на форуме jQuery .

...