css personnalisé ne pas rendre sur la page mobile jquery

Quelqu'un peut-il éclairer mon pourquoi mon css ne montrent pas. J'ai un CSS personnalisé dans un fichier avec seulement cette ligne:css personnalisé ne pas rendre sur la page mobile jquery

my_own_stylesheet:

.test { 
    color: #f00; /* Red */ 
}

Et une page simple comme ceci:

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
    <title> 
    </title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" /> 
    <link rel="stylesheet" href="css/my_own_stylesheet.css" /> 
    <script src="js/jquery-1.9.1.min.js"> 
    </script> 
    <script src="js/jquery.mobile-1.3.0.min.js"> 
    </script> 
    <script type="text/javascript" src="cordova-2.5.0.js"> 
    </script> 
    </head> 
    <body> 
    <!-- Home --> 
    <div data-role="page" id="sedelPage"> 
     <div data-diveme="a" data-role="header"> 
      <h3> 
       Sedel 
      </h3> 
     </div> 
     <div data-role="content"> 
      <h2 class="test">Test</h2>  <!-- this is supposed to be red --> 

     </div> <!--content--> 
    </div><!--page--> 

    </body> 
</html>

Je ne peux pas comprendre cela. N'est-il pas possible de styliser ses propres éléments dans jquery-mobile?

Source

2013-04-05 patriques

Vous devez l'utiliser comme ceci:

.test { 
    color: #f00 !important; /* Red */ 
}

parce que la position étiquette ont déjà mis le style couleur vous devez la remplacer par importante!.

Il pourrait également y avoir une autre possibilité. Disons que c'est votre deuxième page. Lorsque jQuery Moible charge les pages après la première (avec ajax), il chargera uniquement son contenu BODY, ce qui signifie que tout fichier js ou css initialisé dans HEAD (et s'il n'est pas initialisé dans le premier HTML chargé) sera ignoré. Donc, tous vos CSS personnalisés ne seront jamais appliqués.

Exemple de travail: http://jsfiddle.net/Gajotres/yKE8W/

Exemple fabriqué à partir de votre propre code:

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
    <title> 
    </title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <style> 
     .test { 
      color: #f00 !important; /* Red */ 
     } 
    </style> 
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"> 
    </script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
    </head> 
    <body> 
    <!-- Home --> 
    <div data-role="page" id="sedelPage"> 
     <div data-diveme="a" data-role="header"> 
      <h3> 
       Sedel 
      </h3> 
     </div> 
     <div data-role="content"> 
      <h2 class="test">Test</h2>  <!-- this is supposed to be red --> 

     </div> <!--content--> 
    </div><!--page--> 

    </body> 
</html>

Si vous voulez en savoir plus que jeter un oeil à mon autre réponse: Why I have to put all the script to index.html in jquery mobile

Source

2013-04-05 11:30:34 Gajotres

J'ai essayé mais ça ne marche pas. La page rend toujours l'étiquette h2 noire. Merci quand même .. – patriques

Il ne peut être. Si ça marche dans mon exemple, ça devrait marcher aussi dans le tien. Dis moi une chose. Votre page, est-ce la première page à charger? Parce que si ce n'est pas que cela pourrait être le problème. – Gajotres

Ce n'est pas, comment se fait-il que ce soit le problème? J'ai un CSS personnalisé pour cette page seulement – patriques

css personnalisé ne pas rendre sur la page mobile jquery

Répondre

Questions connexes