IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

[jQuery] $().show() et prop css display:block


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre émérite Avatar de Herode
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2005
    Messages
    825
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2005
    Messages : 825
    Par défaut [jQuery] $().show() et prop css display:block
    Bonjour à tous,

    J'utilise jQuery pour gérer l'affichage d'une ligne de tableau. En résumé, l'utilisateur clique sur un bouton placé dans un <td> d'une ligne <tr> de 2 colonnes. Cela fait apparaître une ligne en dessous, un <td> unique de colspan=2.
    L'appel jQuery est :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#ma_ligne').show(300);
    Mon problème vient ce que jQuery affecte la propriété css display:block à la ligne qui reçoit le show. Du coup, le résultat est incorrect sous FF, Opera, etc... (mais pas sous IE7) : la nouvelle ligne ne s'étend que sur la largeur d'une colonne au lieu d'occuper toute la place disponible.

    Vous pouvez tester vous-même le comportement avec le bout de code HTML suivant si vous avez des doutes :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
    <html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">  
      <head>		 		     
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />		     
        <style type="text/css">
    	.line_one { background : lime; }
    	.line_two {background : red; }
        </style>
      </head>
      <body>    	  
     
        <table>			                                                           
          <tr class="line_one">				                                                   
            <td>colonne 1</td>                                                           
            <td>colonne 2</td>                                                  
          </tr>	
     
          <tr class="line_two" style="display: block;">			                     
            <td colspan="2">7777777777777777777</td>                                  
          </tr>			       
        </table>  
      </body>
    </html>
    Comment puis-je faire alors pour utiliser ce genre d'effets animés sur un élément de tableau ????

  2. #2
    Membre expérimenté

    Profil pro
    Inscrit en
    Décembre 2006
    Messages
    191
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2006
    Messages : 191
    Par défaut
    le mieux c'est de pas utiliser de tableau

    sinon ben place une div dans ta ligne TD et joue dessus

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    95
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 95
    Par défaut
    Il y a un truc que je ne comprend pas. Ton td dont le colspan est à 2 qui va apparaitre, il existe deja puisque tu fais un show. Pourquoi ne l'ajoute tu pas plutot a la main (en utilisant after)?

    http://docs.jquery.com/Manipulation/after

    Si on clique sur un td tu ajoute un tr avec un td de colspan 2 juste apres le tr qui contient le td qui a lancé le trigger (ca embrouille un peu là non?)

    Utilise Parent() pour remonter au TR puis after() pour ajouter le tr contenant le td a colspan 2.

    http://jquery.developpeur-web2.com/d...hp#fonction_93

    Non?

  4. #4
    Membre émérite Avatar de Herode
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2005
    Messages
    825
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2005
    Messages : 825
    Par défaut
    Il y a un truc que je ne comprend pas. Ton td dont le colspan est à 2 qui va apparaitre, il existe deja puisque tu fais un show. Pourquoi ne l'ajoute tu pas plutot a la main (en utilisant after)?
    Dans ce cas précis, je fais un after() sur un tr en display:none, puis une fois le tr inséré on est dans le cas indiqué et je fais show(300) pour les effets visuels.

    Si on clique sur un td tu ajoute un tr avec un td de colspan 2 juste apres le tr qui contient le td qui a lancé le trigger (ca embrouille un peu là non?)
    En l'occurrence, j'ai une page qui présente un tableau des objets métier de tel ou tel type avec une ligne d'infos résumées par objet (libellé, une ou 2 stats en plus, des boutons de gestion). Le libellé est lui-même un bouton. Quand on clique dessus, cela fait apparaitre en dessous les infos complètes sur l'objet. J'insère donc une nouvelle ligne (tr) à une cellule, je lui donne le colspan requis et je place les infos détaillées dedans avant de la montrer. Ce qui se fait via ajax(), load(), after() et show() respectivement.
    Si tu as plus simple en respectant les specs, je suis preneur bien sûr !

    le mieux c'est de pas utiliser de tableau
    Hé, vieux débat !
    Je connais le principe du tout CSS / no-array. J'avoue que je ne suis toujours pas convaincu. Les layouts CSS sont assez pénibles à manier et je trouve personnellement cette approche très lourde. Cela dit, je ne suis pas un expert en CSS. En outre, dans le cas de données tabulaires, le souci est de dessiner de jolies colonnes pour bien aligner verticalement les éléments qui se trouvent dans ces colonnes. Et là, pour faire ça avec des CSS sur des tableaux pouvant contenir une centaine de lignes, 4-5 colonnes dont certaines contiennent des libellés qui peuvent (mais ce n'est pas sûr...) avoir des textes assez longs qu'il faudra splitter sur plusieurs lignes dans leur cellule... hé bien je ne sais tout simplement pas faire. Alors que le tableau gère tout seul ses largeurs de colonnes, ce qui est bien agréable, non ?

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    95
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 95
    Par défaut
    Nan nan moi je pense que le choix du tableau se justifie tout a fait ici.

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    95
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 95
    Par défaut
    Dans ce cas précis, je fais un after() sur un tr en display:none, puis une fois le tr inséré on est dans le cas indiqué et je fais show(300) pour les effets visuels.
    Il y a pas une autre alternative à ca? Tu ajoute en JS le TR. Donc il est pas hidden, donc pas de "display: block". Et sur le add() tu peux sans doute faire un effet. C'est pas possible ca?

Discussions similaires

  1. Display block et inline sur un lien
    Par Phenomenium dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 19/05/2006, 21h38
  2. [CSS][Firefox] prob de display:block sur un TR
    Par cyberzoide dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 04/05/2006, 11h37
  3. [CSS]Display:block sur un lien
    Par Phenomenium dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 22/04/2006, 15h42
  4. [CSS] Pb avec les display:block ..
    Par sokette dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 10/12/2005, 13h17
  5. [html+css] problème menu avec liens display:block
    Par Cypselos dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 28/08/2005, 09h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo