Comment faire de l'override, modifier le style, jQuery mobile ?

de , le , 1 5 3 9321 vues
jQuery mobile permet de faire rapidement un interface, néanmoins il est utile de le personnaliser un minimum. 2 solutions s'offrent à vous : Soit vous utilisez le ThemeRoller soit vous faites de l'override CSS.

C'est quoi l'override ?


Le script jQuery Mobile va analyser votre DOM ( vos balises ) et les reformuler en de nouvelles balises intégrant le style jQuery Mobile. Si vous regardez le code de votre page après le passage de jQuery Mobile (F12), vous vous rendrez compte que ces nouvelles balises sont nombreuses, et qu'il aurait été fastidieux de les écrire soit même. Grâce à jQuery Mobile nous n'avons donc qu'à rentrer quelques "data" paramètres et jQuery Mobile se charge du reste.

Avant le passage de jQuery Mobile :
<div data-role="header" data-position="fixed"><h1>Titre de l'application</h1></div>
Après le passage de jQuery Mobile :
<div data-role="header" data-position="fixed" class="ui-header ui-bar-a ui-header-fixed slidedown" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">Titre de l'application</h1>
</div>
Pour modifier le style il faut donc intervenir après jQ Mobile. Mais changer le style après revient à devoir manipuler des classes nouvelles et nombreuses. Il va donc falloir s'armer de patience, de connaissances en CSS, et surtout de "l'inspecteur de l'élément" ( F12 ).

Un exemple : modifier la couleur de la header bar


Avant l'exemple,je précise que vous devrez injecter votre feuille de style override css "override-votrenom.css" après toute la librairie jQuery Mobile !
<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.mobile.js"></script>
<link rel="stylesheet" href="override.css" /> !position importante
Si l'on prend l'exemple de la header bar (data-role="header") précédente, on se rend compte après traitement qu'elle contient la classe ui-bar-a. Dès qu'il s’agit de couleur, la classe est suivie d'une lettre exprimant les différents thèmes de base jQuery Mobile. Pour modifier la couleur de notre barre il faut simplement réécrire (override) cette classe dans notre fichier "override.css".

De base elle ressemble à cela :
.ui-bar-a{
border: 1px solid #333;
background: #111;
color: white;
font-weight: bold;
text-shadow: 0 -1px 1px black;
background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
background-image: -webkit-linear-gradient(#DB1212,#111);
background-image: -moz-linear-gradient(#3C3C3C,#111);
background-image: -ms-linear-gradient(#3C3C3C,#111);
background-image: -o-linear-gradient(#3C3C3C,#111);
background-image: linear-gradient(#3C3C3C,#111);
}
Si vous voulez tout mettre en rouge, copiez/collez cette classe dans votre override.css, et modifiez la comme ceci :
.ui-bar-a{
border: 1px solid red;
background: red;
color: white;
font-weight: bold;
text-shadow: 0 -1px 1px black;
// si vous voulez du dégradé, modifiez le dégradé comme bon vous semble.
}