JQuery Mobile - changement dynamique de css avec Javascript

Question

J'ai un problème en essayant de changer le css d'un bouton dans JQuery Mobile. Je n'utilise pas l'en-tête de page par défaut ie. dans l'en-tête j'ai imbriqué un div avec un logo etc., donc la hauteur de l'en-tête est environ le double de la valeur par défaut.

Le problème est avec le bouton de retour. Il est par défaut en haut à gauche alors que je voudrais qu'il soit centré verticalement. À cette fin, j'ai inséré le script ci-dessous dans l'en-tête de la page juste en dessous du script inclus pour JQuery Mobile.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".ui-btn").css("margin","20px"); 
    } 
</script> 

Le code HTML ressemble à ceci:

<div data-role="page" id="main" data-theme="b"> 
<div id="myheader" data-role="header"><div id="header"><div id="logo"><img src="assets/logo.gif" alt="Acme" /></div></div></div> 

Je ne peux pas sembler interagir avec le css ui en aucune façon. J'ai aussi essayé:

$("#myheader a.ui-btn").css("margin","20px"); 

et

$(".ui-btn-left").css("margin","20px"); 

Et ne nichent pas dans un délai de '$ (document) .ready (function() {', mais rien ne semble fonctionner

.

Je voudrais changer les couleurs aussi bien, mais je vais passer à la fois que je travaille ceci! Toute aide ou pointeurs seraient extrêmement appréciés.

Merci

Greg

Answer 1

Etes-vous sûr que c'est le code HTML complet, et que Javascript ne génère aucun autre balisage?

Vous sélectionnez un élément avec une classe .ui-btn ou ui-btn-left, mais ces éléments ne sont pas présents dans le balisage que vous avez fourni.

Nous vous recommandons de le vérifier dans Firebug, car il vous montrera tout code HTML généré par Javascript.

------ APRÈS INFO EDIT FOURNI -------

Ok, je pense que ce que vous utilisez en est votre utilisation de la marge pour contrôler la position d'un élément en ligne. À moins que le <a> ou les <span> ne soient spécifiquement définis comme des éléments de bloc par le CSS, la marge peut ne pas les affecter comme vous le souhaitez.

Je vous recommande de commencer par définir votre cible en tant qu'élément de bloc et d'appliquer le CSS avec une feuille de style externe ou à l'intérieur de certaines balises <style> sur la page, plutôt qu'avec jQuery.

Essayez quelque chose comme ça à la place de ce petit JS extrait de code dont vous avez parlé, et voyez où il vous obtient:

<style> 
    #myheader a.ui-btn {display: block; margin: 20px;} 
</style> 

me semble que le problème est pas nécessairement que vous ne pouvez pas utiliser CSS interagir avec les UI HTML, mais plutôt que cela ne se comporte pas comme vous l'attendez.