Styling-jQuery mobile Checkboxen

Habe ich sehr wenig Erfahrung mit CSS.

Ich würde gerne im Stil der Standard - JQuery Checkboxen zu bewegen, das aktiviert-Symbol von Links nach rechts.

Habe ich meine badass-Paint-Fähigkeiten, um zu verdeutlichen, was ich Suche.

So, ich bin nicht zu Fragen, für jemand anderen, den job zu erledigen, nur einige Hinweise in die richtige Richtung.

Was wäre der beste Weg, dies zu erreichen ?

Danke !

Styling-jQuery mobile Checkboxen

Gut, ich bin mit der exakt gleichen Checkboxen, die vorhanden sind, auf die Docs. Seite von Jquery hier: jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/forms/... Andere als das, ich versuchte, spielen direkt in der JQuery-css, aber endete nur brechen alles also ich warte auf ein paar Tipps, weil ich habe keine Ahnung, wie das zu erreichen ist und Google nicht wirklich helfen =/
Ich +1 würden Sie Ihre Frage aufgrund Ihrer badass-Paint Fähigkeiten

InformationsquelleAutor JFFF | 2011-08-09

  1. 3

    Versuchen Sie die gerenderte Ausgabe nach jQuery Mobile parst Ihren code mithilfe Firebug.

    Werden Sie in der Lage sein, um die Struktur zu sehen und Klassen Hinzugefügt, um das form-element. Die Klassennamen Hinzugefügt von jQuery Mobile sind ziemlich strait-forward zu verstehen.

    --UPDATE--

    Hier ist der HTML-Code aus firebug für das jQuery-Mobile-Dokumentation für den check-Boxen:

    <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>

    Beachten Sie die "ui-btn-icon-left" - Klasse, würde ich spielen, können Sie nicht nur in der Lage sein, um es zu ändern "ui-btn-icon-right", aber Sie können spielen mit der Struktur. Ich habe dies für andere Elemente, aber ich habe nicht getestet mit check-Boxen.

    Ok.. so bekomme ich das <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"></span> was ist das kleine Kästchen. Aber ich weiß immer noch nicht, wie um es zu bewegen von Links nach rechts.
    Chaging es zu Recht ist der trick... das war einfacher, als ich erwartet hatte. Vielen Dank.

    InformationsquelleAutor Jasper

  2. 20

    jquery-mobile v1.0 hat ein custom data attribute, die Sie verwenden können, um anzupassen Symbol positionieren. Dies beinhaltet Checkboxen, radio-buttons, nav bars und andere Elemente.

    Dokumentation:
    http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html

    Um das Kontrollkästchen zu erzeugen, die Sie gezeichnet haben in Ihrer Frage oben, würde der code sein:

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

    Beachten Sie, dass data-iconpos angewendet wird, um die label. Das ist, weil jQuery Mobile Stile, die dieses element stark zu wirken, als das UI-element in der front-end. In anderen Worten, mit diesem Attribut, du bist die Positionierung der checked/unchecked-Symbol auf der rechten Seite des label.

    Hinweis: Wenn Sie versuchen, einen workaround für dieses Attribut und fügen Sie class="ui-btn-icon-right" an den Elementen, jQuery Mobile drop-diejenigen Klassen, wenn die Seite gerendert wird.

    InformationsquelleAutor Chris C.

  3. 0

    Dies ist nun Teil von JQM mithilfe der standard-APIs durch Einstellung data-iconpos="right"
    Sehen http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconposition für mehr details

    InformationsquelleAutor Oded Peer

Schreibe einen Kommentar