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

Contribuez Discussion :

Des panels avec des onglets


Sujet :

Contribuez

  1. #1
    Membre confirmé
    Inscrit en
    Janvier 2009
    Messages
    598
    Détails du profil
    Informations forums :
    Inscription : Janvier 2009
    Messages : 598
    Points : 628
    Points
    628
    Par défaut Des panels avec des onglets
    Bonjour,

    Je viens de me faire un groupe de panels (des panneaux de menu) sélectionnables par onglets.

    Le menu des panels fonctionne impeccable chez moi, il sert à faire apparaître un panneau DIV dans lequel vous aurez mis ce que vous voulez, et avec les onglets vous choisissez le panneau que vous voulez, il prend la place du précédent et l'onglet du panneau sélectionné reste actif.

    Je n'ai pas cherché à le rendre compatible IE, et toutes mes contributions ne le seront jamais, à bas IE.

    Donc comme j'aime partager mes bons trucs, je vous offre le code :

    Dans le Body :
    Code html : 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
    <!-- Onglets des items -->
    <span id="onglets">
            <div class="onglet" id="A" onclick="affiche(this.id)">Sols</div>
            <div class="onglet" id="B" onclick="affiche(this.id)">Batiments</div>
            <div class="onglet" id="C" onclick="affiche(this.id)">Arbres</div>
            <div class="onglet" id="D" onclick="affiche(this.id)">Plantes</div>
            <div class="onglet" id="E" onclick="affiche(this.id)">Objets</div>
            <div class="onglet" id="F" onclick="affiche(this.id)">Persos</div>
    </span>
     
    <!-- Panneaux des items -->
    <div id="cadrepanels">
    <div class="panel" id="Apanel">Sols</div>
    <div class="panel" id="Bpanel">Batiments</div>
    <div class="panel" id="Cpanel">Arbres</div>
    <div class="panel" id="Dpanel">Plantes</div>
    <div class="panel" id="Epanel">Objets</div>
    <div class="panel" id="Fpanel">Persos</div>
    </div>
    Dans le CSS :
    Code css : 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
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    #onglets
    {
    padding:0px;
    margin:0px;
    position: relative;
    float:left;
    top:10px;
    width:420px;
    height:22px;
    margin-left:5px;
    border: 1px solid #9EA0A1;
    background-color:blue;
    font: bold 11px Arial;
    list-style-type: none;
    text-align:center;
    z-index:0;
    }
     
    .onglet
    {
    position: relative;
    float: left;
    width:60px;
    height: 18px;
    left:0px;
    top:-10px;
    background-color:lime;
    margin: 2px;
    padding:2px;
    border: 1px solid blue;
    cursor:url('main.png'),auto;
    }
     
    #A
    {
    background-color:yellow;
    }
     
    .onglet:hover
    {
    background-color: yellow;
    }
     
    #cadrepanels
    {
    margin-top:0px;
    float:left;
    width:420px;
    height:200px;
    background-color:red;
    margin-left:5px;
    }
     
    .panel
    {
    position: relative;
    left:0px;
    top:0px;
    width:420px;
    height:200px;
    background-color:yellow;
    display:none;
    }
     
    #Apanel
    {
    display:block;
    }

    Dans le javascript :
    Code javascript : 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
    function affiche(id)
    {
    // Cache tous les panneaux du menu.
    var choix=document.getElementsByClassName("panel");
    for (i=0;i<choix.length;i++)
      {
       choix[i].style.display="none";
      }
     
    // Colore en vert clair tous les onglets du menu.
    var choix=document.getElementsByClassName("onglet");
    for (i=0;i<choix.length;i++)
      {
       choix[i].style.backgroundColor="lime";
      }
     
    // Colore en jaune le premier onglet du menu (=actif)  
    document.getElementById(id).style.backgroundColor='yellow';
    // Rend visible le panneau du menu qui a été choisi.
    document.getElementById(id+"panel").style.display="block";
     
    }

    Pour le positionnement c'est chacun qui se le fera car ça dépend des DIV qui sont présent avant ce menu dans la page perso de chacun de nous.

    Les couleurs que j'ai choisi c'est pour bien montrer les différences entre les options, vous mettrez vos propres couleurs.


    Aperçu :
    Voici un aperçu de ce que ça donne, on y voit que j'ai sélectionné le panel "plantes" :

    [IMG]
    Cliquez ici et reprenez le pouvoir !
    A bas IE !, Google, et le pistage du net, testons DuckDuckGo.com
    Lords Of The Realm II Download : Lords of the realm 2
    Infos en anglais :Ici

  2. #2
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    un span qui contient des div !

    A propos de la balise span :
    http://www.w3.org/wiki/Generic_conta...e_versus_block
    [B]The span element is the inline level generic container. It also helps to inform the structure of document, but it is used to group or wrap other inline elements and/or text, rather than block level elements.

    Citation Envoyé par dragonno
    Je n'ai pas cherché à le rendre compatible IE, et toutes mes contributions ne le seront jamais, à bas IE.
    Une belle erreur :
    http://blog.artenet.fr/2013/01/27/ba...igateurs-2013/

  3. #3
    Membre confirmé
    Inscrit en
    Janvier 2009
    Messages
    598
    Détails du profil
    Informations forums :
    Inscription : Janvier 2009
    Messages : 598
    Points : 628
    Points
    628
    Par défaut
    N'empêche, c'est la solution qui fonctionne bien pour le positionnement des onglets, car avec les DIV c'est très difficile dans ce cas précis.

    Tu me cites en anglais ce qu'est un span, merci...
    Comme si je ne le savais pas, si je l'utilise c'est qu'il y a une raison.
    Le positionnement était trop compliqué avec les div, et superbe avec les span, si tu le fais avec100% DIV tant mieux pour toi, je ne suis pas contre.

    PS :C'est un topic de contribution pas de salissure de topic.
    (Tu as fais ça dans tous mes topics, est-ce à cause de ma discussion dans le forum politique ?)
    Cliquez ici et reprenez le pouvoir !
    A bas IE !, Google, et le pistage du net, testons DuckDuckGo.com
    Lords Of The Realm II Download : Lords of the realm 2
    Infos en anglais :Ici

  4. #4
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par dragonno Voir le message
    PS :C'est un topic de contribution pas de salissure de topic.
    Je te fais part de mes remarques. Un span est un élément inline et ne doit pas contenir d'éléments de type block comme le div, p etc.
    Ton code n'est pas valide W3C.


    Citation Envoyé par dragonno Voir le message
    (Tu as fais ça dans tous mes topics, est-ce à cause de ma discussion dans le forum politique ?)
    - et d'1 tu as posté dans le forum contribution JS et j'ai tout à fait le droit de poser un commentaire sur les codes que tu proposes ;
    - et de 2 "tous tes topics" ? Tu exagères, j'ai réagi à deux des sujets que tu as ouvert ;
    - et de 3, je ne consulte pas le forum politique je ne sais donc pas de quoi tu parles.

  5. #5
    Membre confirmé
    Inscrit en
    Janvier 2009
    Messages
    598
    Détails du profil
    Informations forums :
    Inscription : Janvier 2009
    Messages : 598
    Points : 628
    Points
    628
    Par défaut
    Je ne refuse pas ta remarque sur le span mais tu pouvais me faire celle sur IE en mp.
    Et en te parlant de remarques je ne pensais pas au fait que ce soit un span mais au fait que je n'aime pas IE.
    Désolé de m'être mal exprimé.

    Je parlais de mes topics contributions.

    Concernant le barometre des navigateurs, je ne my fie pas, IE est distribué avec les PC familiaux, et donc se distribue plus facilement auprès du public, en plus Microsoft en fait une pub forcenée de IE.
    Et pourtant il emmerde tous les développeurs de sites web qui sont obligés de s’embêter pour arriver à contourner les non standards de IE.

    Concernant le DIV à la place du Span, je tenterais de le faire quand j'aurais du temps, pour proposer un truc plus strict (à la W3C) mais avec les div c'est chiant à positionner dans ce cas précis.
    Cliquez ici et reprenez le pouvoir !
    A bas IE !, Google, et le pistage du net, testons DuckDuckGo.com
    Lords Of The Realm II Download : Lords of the realm 2
    Infos en anglais :Ici

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Bah oui mais une contribution qui ne prend pas en compte IE, ça n'est pas très utile...
    C'est comme construire une maison sans toit sous prétexte que tu n'aimes pas la pluie... C'est peut-être vrai, mais la pluie existe, tu n'as pas le choix...

    Ceci dit, tu sembles être resté figé à IE6 dans tes arguments.
    Pour des raisons historiques, IE6 obéissait effectivement aux normes édictées par Microsoft, mais depuis la version 7, ils ont commencé à rendre leur navigateur plus conforme, IE8 a aussi été une version de transition à ce niveau mais avec IE9 puis IE10, ils mettent à disposition un navigateur tout à fait correct.
    Pour rappel, cela n'a pas été aussi simple de s'adapter aux nouveaux standards puisque contrairement aux autres navigateurs, chez eux, JScript est partagé avec d'autres applicatifs, du coup, tu ne bouleverses pas le comportement aussi facilement que ça !

    Concernant le barometre des navigateurs, je ne my fie pas, IE est distribué avec les PC familiaux, et donc se distribue plus facilement auprès du public, en plus Microsoft en fait une pub forcenée de IE.

    Les baromètres tels que celui mentionné par Auteur se basent sur l'utilisation, par sur le fait qu'il soit installé...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    Membre confirmé
    Inscrit en
    Janvier 2009
    Messages
    598
    Détails du profil
    Informations forums :
    Inscription : Janvier 2009
    Messages : 598
    Points : 628
    Points
    628
    Par défaut
    Ok Bovino
    Mais à propos de l'utilisation, elle dépend pour beaucoup du fait qu'il soit installé en général dans les familles, si tu prends le cas d'une famille lambda où personne ne connaît firefox ou alors que de nom, et que la famille part acheter un pc famillial en grande surface elle va se retrouver avec IE bien installé et prêt à leur afficher "allez-y lancez-moi, je suis le meilleur navigateur pour votre PC" c'est une blague mais qui veut tout dire, sur le fait que ces personnes seront forcément influencée par le fait d'avoir déjà un navigateur et que la pub contante de microsoft rappelle comme étant bien, alors que s'ils connaissaient des personnes s'y connaissant tant soit peu en informatique, il leur auraient sans doutes conseillé d'utiliser Un navigateur plus sérieux.
    Franchement avec toutes les améliorations que IE a subi il n'est vraiment pas à la hauteur de firefox, que ce soit au niveau de la sécurité ou au niveau des normes.
    J'ai lu d'ailleurs à ce propos que Microsoft annonçait avec fierté (sic) une amélioration de 60 % je crois si je ne me trompe pas d'amélioration vers les standards du WEB.

    PS: Si développez.com n'accepte que des contributions pouvant fonctionner à la fois sur IE et sur les autres navigateurs, il faudrait le préciser quelque part car moi je pensais contribuer avec plaisir mais si c'est pour me casser la tête pendant des heures à tenter d'adapter un script à IE je ne le pourrais pas, franchement :/
    Moi je veux bien contribuer avec grand plaisir mais que pour Firefox et tous les navigateurs du standard.
    Je précise que c'est plutôt en agissant comme moi que microsoft se rendra compte qu'il doit améliorer sinon s'il voit que les développeurs se débrouillent bien avec son non standard il ne va pas investir des sous pour s’améliorer et on continuera à galérer pendant longtemps et même à le motiver pour faire son propre standard pourquoi pas.

    PS : Je lance un débat sur le forum ailleurs
    Cliquez ici et reprenez le pouvoir !
    A bas IE !, Google, et le pistage du net, testons DuckDuckGo.com
    Lords Of The Realm II Download : Lords of the realm 2
    Infos en anglais :Ici

  8. #8
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par dragonno Voir le message
    Je ne refuse pas ta remarque sur le span mais tu pouvais me faire celle sur IE en mp.
    ah bon ? Pourquoi ? Tu n'hésites pas à indiquer que tu détestes IE, je te montre simplement que même si tu n'apprécies pas ce navigateur beaucoup de personnes l'utilisent.

    Citation Envoyé par dragonno Voir le message
    Mais à propos de l'utilisation, elle dépend pour beaucoup du fait qu'il soit installé en général dans les familles, si tu prends le cas d'une famille lambda où personne ne connaît firefox ou alors que de nom
    une famille lambda ne va pas se casser la tête à aller chercher sur le net quelque chose qu'elle a déjà... Une famille lambda va utiliser l'ordinateur pour discuter, faire des achats, consulter les informations, etc.

    C'est au développeur de s'adapter aux outils qu'il a et aux utilisateurs, pas le contraire

    Citation Envoyé par dragonno Voir le message
    PS: Si développez.com n'accepte que des contributions pouvant fonctionner à la fois sur IE et sur les autres navigateurs, il faudrait le préciser quelque part car moi je pensais contribuer avec plaisir mais si c'est pour me casser la tête pendant des heures à tenter d'adapter un script à IE je ne le pourrais pas, franchement :/
    ça semble pourtant logique, tu ne crois pas ?
    Regarde les pages contributions JS et CSS, il y a systématiquement indiqué la compatibilité et pour le CSS la validité HTML, CSS est aussi précisée :
    - http://javascript.developpez.com/tel...ces-JavaScript
    - http://css.developpez.com/galerie/


    Citation Envoyé par dragonno Voir le message
    Moi je veux bien contribuer avec grand plaisir mais que pour Firefox et tous les navigateurs du standard.
    on n'a rien contre. Toutes les contributions sont les bienvenues.

  9. #9
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Je ne suis qu'à moitié d'accord concernant IE.
    D'une part, il me semble que désormais lorsque tu achètes un PC avec Windows, on te demande de choisir ton navigateur.
    Ensuite, si la situation était aussi caricaturale que tu l'écris, on serait toujours à 90 % d'utilisateurs de IE, ce qui n'est pas le cas parce que de plus en plus, les utilisateurs sont au courant qu'il existe d'autres navigateurs et les utilisent.
    Notamment, si tu vas sur Google, on te propose d'utiliser Chrome.
    Ceci dit, si IE correspond aux attentes d'une part non négligeable d'utilisateurs, c'est peut-être tout simplement parce qu'il correspond à leurs attentes, ils n'ont donc pas de raison d'en changer. Ensuite, s'ils vont sur un site qui n'est pas compatible IE, ils ne vont pas changer de navigateur mais de site !

    Mais encore une fois, on est plus à l'époque de IE6 ! Faire aujourd'hui un site qui ne soit pas compatible IE9 / 10 (donc la majorité des utilisateurs de IE) relève plus de la mauvaise volonté qu'autre chose. Quant à IE7 / 8, la plupart des incompatibilités sont plutôt d'ordre esthétique, donc ne sont pas réellement pénalisantes.

    Pour finir, tu peux contribuer comme bon te semble, sinon, tes contributions auraient été supprimées !
    La seule chose, c'est que les contributions sont destinées à priori à être utilisées facilement par les visiteurs, c'est pour ça que je te dis que ne pas se préoccuper de IE et affirmer que ce n'est pas compatible, ben ça n'aide pas beaucoup les 99.9 % de personnes qui contrairement à toi essayent de satisfaire tous leurs utilisateurs !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  10. #10
    Membre confirmé
    Inscrit en
    Janvier 2009
    Messages
    598
    Détails du profil
    Informations forums :
    Inscription : Janvier 2009
    Messages : 598
    Points : 628
    Points
    628
    Par défaut
    Merci à vous deux de votre compréhension et de vos explications surtout.

    J'ai lancé un débat sur le topic concerné à IE puis je me suis aperçu qu'il y en avait dejà pas mal :/

    http://www.developpez.net/forums/d13...-securite-etc/

    Concernant la façon spéciale dont IE gere les marges par rapport à Firefox, je vais voir sur le net s'il s'est amélioré
    Cliquez ici et reprenez le pouvoir !
    A bas IE !, Google, et le pistage du net, testons DuckDuckGo.com
    Lords Of The Realm II Download : Lords of the realm 2
    Infos en anglais :Ici

Discussions similaires

  1. Parser un JSON avec des variables avec des "-" et des ":"
    Par Quentin33 dans le forum Windows Phone
    Réponses: 2
    Dernier message: 22/05/2011, 02h04
  2. FishEye avec des Panels
    Par Milie3415 dans le forum Flex
    Réponses: 0
    Dernier message: 16/12/2009, 11h40
  3. Réponses: 4
    Dernier message: 02/04/2008, 18h51
  4. Panel avec des bords ronds ....
    Par Djedjeridoo dans le forum Composants VCL
    Réponses: 3
    Dernier message: 13/01/2006, 02h25
  5. petit souci avec des variables avec des fonctions psql
    Par dust62 dans le forum PostgreSQL
    Réponses: 4
    Dernier message: 02/04/2005, 14h45

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