Est-il possible de remplacer les éléments JQuery Mobile déjà dénommés (boutons, listes, etc.) par un fichier css personnalisé distinct?Remplacement de JQuery Mobile CSS
Si oui, comment procéder pour référencer les éléments.
Merci
Je ne sais pas d'un fonctionnaire, façon élégante de le faire, mais je regarde dans le fichier css non-min pour trouver des classes, puis ajouter des choses comme ça dans un fichier .css inclus après la jquery mobile un:
.ui-header .ui-titre {margin-right: 20px; margin-left: 20px;}
.ui-titre .ui-pied de page {margin-right: 20px; marge -left: 20px; white-space: normal;}
De plus, firebug et dev. outils (chrome) sont vos amis - examiner les éléments et leurs styles.
Libby
Oui, vous pouvez remplacer tous les styles css déjà définis dans le mobile jQuery, mais jetez un oeil sur la façon de le faire dans le bon sens. dans la documentation jQuery a les informations renvoyées à votre question. En particulier:
thèmes Redéfinition
Les thèmes sont conçus comme un point de départ solide, mais sont destinés à être personnalisé pour ajouter les éléments de conception personnalisés qui rendent votre site ou application unique. Comme tout est contrôlé par CSS, il est facile d'utiliser un outil d'inspecteur Web pour identifier les propriétés de style que vous souhaitez modifier. L'ensemble des classes de thèmes (global) et des classes structurelles sémantiques (spécifiques aux widgets) ajoutées aux éléments fournissent un riche ensemble de sélecteurs possibles à . Nous recommandons en ajoutant une feuille de style externe à la tête, placée après la structure et des références de feuille de style de thème, qui contiennent tous vos changements de style . Cela vous permet de mettre facilement à jour les nouvelles versions de la bibliothèque car les remplacements sont conservés séparément du code de la bibliothèque.
+1 pour avoir publié la documentation pour remplacer les thèmes. – botbot
Il y a une énorme malentendu à propos de l'utilisation de vos propres styles avec JQM que j'ai trouvé partout, y compris SO. L'astuce pour utiliser votre propre CSS avec JQM est de savoir comment écrire votre propre CSS. En général, vous devez d'abord spécifier l'élément que vous souhaitez superposer au CSS JQM avec un ID, puis attacher la classe JQM à cet ID. Par exemple, pour supprimer la bordure de lien standard JQM CSS d'un lien d'image, où # img_button_1 est l'ID donné au parent ancre de l'image, vous codez votre CSS comme si ...
Le 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>
Votre remplacement CSS ...
#img_button_1 .ui-btn-inner { border: 0 }
j'ai répondu avant avec quelques exemples de travail qui se trouve ici
Jquery Mobile - Using image as link - Blue line below image
Vous pouvez utiliser la même technique pour résoudre tous vos conflits CSS JQM. Maintenant vous pouvez reconsidérer en utilisant JQM pour atteindre vos résultats désirés sachant combien il est simple de résoudre ces conflits en utilisant la spécificité CSS dans votre propre CSS. J'espère que cela t'aides!
C'était une solution très simple pour moi, merci. – robnick
J'ai essayé d'utiliser l'approche de la classe, mais même si mon css a été chargé après jquery mobile css, il a été remplacé. L'utilisation de l'identifiant a corrigé cela. Merci. –
Assurez-vous de vérifier les notes de mise à jour pour chaque nouvelle version.
Il y a des trucs utiles sur les changements dans la hiérarchie CSS. Bien sûr, cela devient généralement plus stable avec chaque version, mais il y aura probablement quelque chose que vous devez savoir.
1.4 mise à niveau CSS doc: http://jquerymobile.com/upgrade-guide/1.4/#override-with-custom-css
Très utile pour les gens sachent. Je peux voir que c'est un outil fantastique pour personnaliser l'interface utilisateur. – jcrowson
ThemeRoller a été déplacé vers: - http://themeroller.jquerymobile.com/ –