Стильные jQuery мобильные флажки

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

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

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

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

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

Спасибо!

enter image description here

ОТВЕТЫ

Ответ 1

Попробуйте просмотреть полученный результат после того, как 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", но вы можете играть со структурой. Я сделал это для других элементов, но я не проверял флажки.

Ответ 2

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 может отбросить эти классы при отображении страницы.