jquery mobile personalizzato css?

Question

hi Ho appena finito di progettare un'app Web mobile e ora voglio iniziare il processo di sviluppo. Stavo leggendo che è molto difficile usare il css personalizzato con JQuery Mobile e quindi il design che ho appena completato non può essere utilizzato con tale framework.

C'è una soluzione o forse un altro framework che supporta le funzionalità di JQM ma allo stesso tempo consente allo sviluppatore la libertà di utilizzare il proprio design.

Answer 1

Non so se stavi leggendo che è difficile usare il css personalizzato con jquery mobile. È progettato per essere facilmente personalizzato. Controllare http://jquerymobile.com/themeroller/

Se siete interessati a contenuti personalizzati sul tuo sito controllare questa parte della documentazione: http://jquerymobile.com/demos/1.0.1/docs/content/index.html - per le griglie esempio di layout può aiutare con il progetto individuale

altro quadro che posso suggerire è Yui http://yuilibrary.com/ (ad esempio la parte di griglia di css nella documentazione può anche aiutarlo con il vostro disegno su ordinazione)

Buona fortuna!

Answer 2

Anch'io ho avuto problemi simili con JQM ma ho preso una decisione in anticipo e sono passato a jQTouch per la sua semplicità. Ovviamente, non offre tanti widget quanti JQM.

Guardando la vostra esigenza, vi consiglio di andare per jQTouch in quanto ha il minimo CSS (non così ingombrante come Sencha tocco o jQm). Dovresti essere in grado di stampare il tuo tema in poche ore.

Answer 3

C'è un grosso malinteso sull'utilizzo dei propri stili con JQM che ho trovato ovunque, incluso SO. Il trucco per usare il tuo CSS con JQM è come scrivi il tuo CSS. In generale, è necessario innanzitutto specificare l'elemento che si desidera sovrascrivere il CSS JQM con un ID, quindi collegare la classe JQM a tale ID. Ad esempio, per rimuovere il CSS del bordo del collegamento standard JQM da un collegamento immagine, dove # img_button_1 è l'ID assegnato all'ancora genitore dell'immagine, si codificherà il CSS in questo modo ...

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

tuo Override CSS ...

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

ho risposto prima con alcuni esempi di lavoro che possono essere trovati qui

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

È possibile utilizzare la stessa tecnica per risolvere tutti i conflitti CSS JQM. Ora puoi riconsiderare l'utilizzo di JQM per ottenere i risultati desiderati, sapendo quanto sia semplice risolvere questi conflitti usando la specicività CSS nel tuo CSS. Spero che questo ti aiuti!

Answer 4

jQm non è facilmente personalizzabile vedere qui:

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

Il modo più rapido e sporco è quello di aggiungere un tag "stile" direttamente al/ingresso/area di testo div, quello che hai. Questo sovrascrive facilmente il css jQuery predefinito.

Oppure, se si modifica lo stile di tutti gli input, ad esempio, è possibile copiare la classe di stile jquery e incollarla nel proprio css. Ciò sovrascriverà anche lo stile JQM, ma si noti che facendo ciò cambia ogni istanza in cui viene visualizzata quella particolare classe.

Answer 5

In realtà, ho facilmente personalizzato le applicazioni mobili di jQuery nel design. Il lavoro è di avere il tuo stile = "" scritto dopo le lezioni; che regola gli script in precedenza. Potrebbe non essere tradizionalmente pulito, ma è una soluzione rapida finché non viene trovata una soluzione migliore.

Ad esempio:

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

Un'ottima alternativa che ho trovato è quello di inserire la classe CSS personalizzato dopo tutte le altre classi ui di jQuery, e specificare ciascuno dei principali proprietà della classe rilevante come "importante! ". Questa è la soluzione che uso ora.