Tengo muy poca experiencia con CSS.Estilo jQuery mobile Casillas de verificación
Me gustaría diseñar el valor predeterminado JQuery Checkboxes para mover el ícono marcado de izquierda a derecha.
He usado mis habilidades de pintura rudo para ilustrar lo que estoy buscando.
Así que no estoy pidiendo que alguien más haga el trabajo, solo algunos consejos en la dirección correcta.
¿Cuál sería la mejor manera de lograrlo?
¡Gracias!
Trate de mirar el resultado representado después de jQuery Mobile analiza el código utilizando Firebug.
Podrá ver la estructura y las clases agregadas al elemento de formulario. Los nombres de clase agregados por jQuery Mobile son bastante fáciles de entender.
--UPDATE--
Aquí está el código HTML de Firebug para la documentación de jQuery Mobile para casillas:
<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>
Aviso la clase "ui-btn-icono-izquierda", me Jugar con eso, puede que no solo puedas cambiarlo a "ui-btn-icon-right", pero puedes jugar con la estructura. He hecho esto para otros elementos, sin embargo, no he probado con casillas de verificación.
jquery-mobile v1.0 tiene un atributo de datos personalizado que puede usar para ajustar el posicionamiento de los iconos. Esto incluye casillas de verificación, botones de opción, barras de navegación y otros elementos.
Documentación: http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html
Para crear la casilla de verificación que ha dibujado en su pregunta anterior, el código sería:
<input type="checkbox" name="checkbox-name" id="checkbox-id" />
<label for="checkbox-id" data-iconpos="right">I agree</label>
en cuenta que data-iconpos se aplica a la label. Esto se debe a que jQuery Mobile le da un gran énfasis a este elemento para que actúe como elemento de IU en el front-end. En otras palabras, con este atributo, está posicionando el icono marcado/no marcado en el lado derecho de label.
Nota: Si intenta solucionar este atributo y agrega class="ui-btn-icon-right" a sus elementos, jQuery Mobile puede soltar esas clases cuando se procesa la página.
Ésta es ahora parte de JQM uso de la API estándar mediante el establecimiento de data-iconpos="right" Ver http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconposition para más detalles
Bien, estoy usando las mismas casillas de verificación exactas que están presentes en el Docs. página de Jquery aquí: http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/forms/checkboxes/index.html Aparte de eso, traté de jugar directamente en el JQuery css pero solo terminé rompiendo todo, así que estoy esperando algunas indicaciones porque no tengo idea de cómo lograr esto y Google no está realmente ayudando// – JFFF
I +1 Tu pregunta por tus habilidades de pintura rudas – akousmata