jquery mobile custom css?

Question

hola Acabo de terminar de diseñar una aplicación web móvil y ahora quiero comenzar el proceso de desarrollo. Estaba leyendo que es muy difícil usar CSS personalizado con JQuery Mobile y, por lo tanto, el diseño que acabo de completar no se puede utilizar con dicho marco.

Existe una solución o tal vez otro marco que admita las características de JQM pero que al mismo tiempo le permita al desarrollador la libertad de usar su propio diseño.

Answer 1

No sé si estaba leyendo que es difícil de usar el css personalizado con jquery mobile. Está diseñado para ser fácilmente personalizado. Compruebe http://jquerymobile.com/themeroller/

Si usted está interesado en el contenido personalizado en su sitio comprobar esta parte de la documentación: http://jquerymobile.com/demos/1.0.1/docs/content/index.html - para las redes Ejemplo de composición le puede ayudar con su diseño individual

otro marco que puedo sugerir es Yui http://yuilibrary.com/ (por ejemplo, la parte de la cuadrícula CSS en la documentación también puede ayudarlo con su diseño personalizado)

¡Buena suerte!

Answer 2

Yo también tuve un problema similar con JQM pero tomé la decisión antes y cambié a jQTouch por su simplicidad. Por supuesto, no ofrece tantos widgets como JQM.

En cuanto a su requerimiento, le recomiendo que vaya para jQTouch, ya que tiene un mínimo de CSS (no tan voluminoso como Sencha Touch o JQM). Debería poder desplegar su propio tema en pocas horas.

Answer 3

Existe un gran error al utilizar sus propios estilos con JQM que he encontrado en todas partes, incluido SO. El truco para usar tu propio CSS con JQM está en cómo escribes tu propio CSS. En general, primero debe especificar el elemento que desea sobreescribir el CSS de JQM con una identificación, y luego adjuntar la clase de JQM a esa ID. Por ejemplo, para eliminar el borde del enlace estándar de JQM CSS de un enlace de imagen, donde # img_button_1 es la identificación proporcionada al elemento principal de anclaje de la imagen, usted codificaría su CSS como ...

El HTML ...

<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true" 
    href="http://www.google.com" target="_blank"> 
    <img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" /> 
</a> 

Su anulación CSS ...

#img_button_1 .ui-btn-inner { border: 0 } 

me respondió esto antes con algunos ejemplos de trabajo que se pueden encontrar aquí

Jquery Mobile - Using image as link - Blue line below image

Puede usar la misma técnica para resolver todos sus conflictos de JQM CSS. Ahora puede reconsiderar el uso de JQM para lograr los resultados deseados, sabiendo lo simple que es resolver estos conflictos utilizando la especificidad de CSS en su propio CSS. ¡Espero que esto ayude!

Answer 4

JQM no es fácilmente personalizable ver aquí:

http://forum.jquery.com/topic/use-custom-css-with-jquerymobile

La forma más rápida y sucia es agregar una etiqueta de "estilo" directamente a la zona div/input/texto, lo que sea. Esto anula fácilmente el jQuery css predeterminado.

O, si está cambiando el estilo de todas las entradas, por ejemplo, puede copiar la clase de estilo jquery y pegarla en su CSS. Esto también anulará el estilo de JQM, pero tenga en cuenta que al hacerlo cambia cada instancia donde se muestra esa clase en particular.

Answer 5

En realidad, he personalizado fácilmente las aplicaciones móviles jQuery en el diseño. El trabajo alrededor es tener su estilo = "" escrito después de las clases; que ajusta los scripts antes. Puede que no sea tradicionalmente limpio, pero es una solución rápida hasta que se encuentre una mejor solución.

Por ejemplo:

<div data-role="header" role="banner" style="background:none; border:none;"> 
    <div class="ui-logo" ></div> 
</div> 

Una gran alternativa que he encontrado es colocar la clase CSS personalizado después de todas las otras clases de interfaz de usuario jQuery, y especificar cada una de las principales propiedades de la clase pertinente como "importante! ". Esta es la solución que uso ahora.