J'ai très peu d'expérience avec CSS.Styling jQuery Mobile cases à cocher
J'aimerais définir le style par défaut JQuery Checkboxes pour déplacer l'icône cochée de gauche à droite. J'ai utilisé mes compétences Badass Paint pour illustrer ce que je cherchais. Donc, je ne demande pas à quelqu'un d'autre de faire le travail, juste quelques indications dans la bonne direction.
Quel serait le meilleur moyen d'y parvenir?
Merci!
Essayez de regarder la sortie rendue après jQuery Mobile votre code à l'aide parse Firebug.
Vous pourrez voir la structure et les classes ajoutées à l'élément de formulaire. Les noms de classes ajoutés par jQuery Mobile sont assez stricts pour comprendre.
--UPDATE--
Voici le code HTML Firebug pour la documentation jQuery Mobile pour cases:
<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>
Notez la classe "gauche ui-btn-icon-", je Si vous jouez avec ça, vous ne pourrez peut-être pas simplement le changer en "ui-btn-icon-right" mais vous pouvez jouer avec la structure. Je l'ai fait pour d'autres éléments mais je n'ai pas testé avec des cases à cocher.
jquery-mobile v1.0 possède un attribut de données personnalisé que vous pouvez utiliser pour ajuster le positionnement des icônes. Cela inclut les cases à cocher, les boutons radio, les barres de navigation et d'autres éléments.
Documentation: http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html
Pour créer la case à cocher que vous avez dessiné votre question ci-dessus, votre code serait:
<input type="checkbox" name="checkbox-name" id="checkbox-id" />
<label for="checkbox-id" data-iconpos="right">I agree</label>
Notez que data-iconpos est appliqué au label. C'est parce que jQuery Mobile stylise lourdement cet élément pour agir comme élément de l'interface utilisateur dans le frontal. En d'autres termes, avec cet attribut, vous positionnez l'icône cochée/non cochée sur le côté droit du label.
Remarque: Si vous tentez de contourner cet attribut et d'ajouter class="ui-btn-icon-right" à vos éléments, jQuery Mobile peut supprimer ces classes lorsque la page s'affiche.
Ce fait maintenant partie de JQM en utilisant les API standard en réglant data-iconpos="right" Voir http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconposition pour plus de détails
Eh bien, je suis en utilisant les mêmes cases exactes qui sont présents sur la documentation. page de Jquery ici: http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/forms/checkboxes/index.html A part cela, j'ai essayé de jouer directement dans le css JQuery mais j'ai fini par tout casser donc j'attends quelques pointeurs car je n'ai aucune idée de comment y parvenir et Google n'aide pas vraiment =/ – JFFF
I +1 'd votre question à cause de votre badass Paint skills – akousmata