Стиль JQuery для мобильных флажки

Question

У меня очень мало опыта работы с CSS.

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

Я использовал свои навыки рисования, чтобы проиллюстрировать то, что я ищу.

Так что я не прошу кого-то другого делать работу, просто некоторые указатели в правильном направлении.

Каков наилучший способ достичь этого?

Спасибо!

Answer 1

jquery-mobile v1.0 имеет пользовательский атрибут данных, который можно использовать для настройки расположения значков. Сюда входят флажки, переключатели, навигационные панели и другие элементы.

Документация: http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html

Чтобы создать флажок, который вы нарисовали в своем вопросе выше, ваш код будет:

  <input type="checkbox" name="checkbox-name" id="checkbox-id" />
  <label for="checkbox-id" data-iconpos="right">I agree</label>

Обратите внимание, что data-iconpos применяется к label. Это связано с тем, что jQuery Mobile стилизует этот элемент в качестве элемента пользовательского интерфейса во внешнем интерфейсе. Другими словами, с этим атрибутом вы помещаете отмеченный / не отмеченный значок справа от label.

Примечание. Если вы попытаетесь обойти этот атрибут и добавить class="ui-btn-icon-right" к своим элементам, jQuery Mobile может отбросить эти классы при отображении страницы.

Answer 2

Попробуйте посмотреть результат рендеринга после того, как jQuery Mobile проанализирует ваш код, используя Firebug .

Вы сможете увидеть структуру и классы, добавленные к элементу формы. Имена классов, добавленные jQuery Mobile, довольно просты для понимания.

- ОБНОВЛЕНИЕ -

Вот HTML-код из firebug для документации jQuery Mobile для флажков:

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
        <fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"><div class="ui-controlgroup-label" role="heading">Agree to the terms:</div><div class="ui-controlgroup-controls">

            <div class="ui-checkbox"><input type="checkbox" class="custom" id="checkbox-1" name="checkbox-1"><label for="checkbox-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-controlgroup-last ui-checkbox-on ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">I agree</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span></span></label></div>

        </div></fieldset>
    </div>

Обратите внимание на класс "ui-btn-icon-left", я бы поиграл с ним, вы можете не просто изменить его на "ui-btn-icon-right", но вы можете поиграть со структурой. Я сделал это для других элементов, однако я не проверял с флажками.

Answer 3

Теперь это часть JQM, использующая стандартные API, установив data-iconpos="right" Подробнее см. http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconposition