AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Fiche de Prédéfini avec onglets

    Partagez
    avatar
    Onyx
    FémininAge : 23Messages : 2936

    le Ven 30 Sep 2016 - 0:48




    Fiche de Prédéfini avec onglets


    Salut !

    Voici un petit LS d'une fiche de prédéfini à onglets que j'ai faite suite à la demande de MPGuenette.

    Pour voir l'aperçu : cliquez ici.
    Pour voir l'aperçu, onglet Histoire : cliquez ici.
    Pour voir l'aperçu, onglet Autres : cliquez ici.

    Ce LS est en trois parties.
    • Tout d'abord, nous allons ajouter le javascript qui permet de faire fonctionner les onglets.
    • Puis, nous allons mettre en forme la fiche avec du CSS.
    • Enfin, nous allons poster la fiche.


    Laisser le crédit vers Never-Utopia est obligatoire.


    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    1. Ajouter le javascript


    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > MODULES
    > > > HTML & JAVASCRIPT
    > > > > GESTION DES CODES JAVASCRIPT

    Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


    Ensuite, on clique sur "Créer un nouveau Javascript"
    On choisit un nom, par exemple comme "Système d'onglets des prédéfinis".
    On choisit le placement "Sur les sujets".

    Enfin, on met le javascript suivant et on enregistre :
    Code:
    $(function() {
      var index_onglet;
      $('.predef_onglet').click(function(){
        $(this).parent().find('.predef_actif').removeClass('predef_actif');
        $(this).parent().find('.predef_contenu_actif').removeClass('predef_contenu_actif');
        index_onglet = $(this).index();
        $(this).parent().find('.predef_contenu').eq(index_onglet).addClass('predef_contenu_actif');
        $(this).addClass('predef_actif');
      });
    });



    2. Mise en forme (CSS)


    Il est maintenant temps de mettre en forme notre fiche à l'aide du CSS.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > IMAGES ET COULEURS
    > > > > COULEURS
    > > > > > FEUILLE DE STYLE CSS

    Puis, nous allons ajouter le CSS suivant :
    Code:
    /*Bloc de predef*/
    .predef_bloc {
      width: 500px;
      margin: auto;
      background: url('http://www.zupimages.net/up/16/36/ss1h.jpg') center top;
      font-family: 'Playfair Display SC', serif;
      padding-bottom: 25px;
      font-size: 14px;
      position: relative;
    }
    /*Titre de predef*/
    .predef_title {
      background: #101010;
      padding: 10px 5px 5px 5px;
      font-family: 'UnifrakturCook', cursive;
      margin-bottom: 25px;
      font-size: 32px;
      color: #656565;
      text-align: center;
    }
    /*Citation de predef*/
    .predef_cite {
      padding-top: 5px;
      font-size: 20px;
      color: #454545;
    }
    /*Bloc milieu*/
    .predef_bloc_middle {
      padding-top: 5px;
      margin: auto;
      width: 450px;
      background-color: rgb(53, 53, 53);
      background-color: rgba(53, 53, 53, 0.75);
      text-align: center;
    }
    /*Onglet predef*/
    .predef_onglet {
      display: inline-block;
      width: 120px;
      margin: 10px;
      text-align: center;
      font-size: 24px;
      color: #959595;
      cursor: pointer;
    }
    .predef_onglet:hover {
      color: #a3a3a3;
    }
    /*Onglet predef actif*/
    .predef_actif {
      color: #b5b5b5!important;
      cursor: default;
    }
    /*Contenu de onglet*/
    .predef_contenu {
      display: none;
      margin: auto;
      padding: 5px 15px 15px 15px;
      width: 420px;
      text-align: justify;
    }
    .predef_contenu_actif {
      display: block;
    }
    /*Image*/
    .predef_img {
      float: left;
      height: 320px;
      width: 200px;
    }
    /*Bloc de texte*/
    .predef_text {
      border: 2px solid #b5b5b5;
      color: #b5b5b5;
      float: left;
      width: 196px;
      margin-left: 10px;
      height: 306px;
      padding: 5px;
      overflow: auto;
    }
    .predef_contenu:nth-of-type(2) .predef_text {
      margin-left: 0px;
      width: 406px;
    }
    .predef_contenu:nth-of-type(3) .predef_text {
      margin-left: 0px;
      margin-right: 10px;
    }
    /*Crédits*/
    .predef_credit {
      position: absolute;
      text-align: center;
      width: 100%;
      bottom: 1px;
      left: 0px;
      font-size: 10px;
      color: #000000;
    }
    .predef_credit a {
      color: #c4c4c4;
    }
    .predef_credit a:hover {
      color: #ffffff;
    }



    3. Poster la fiche (html)


    Il suffit de vous rendre là où vous voulez poster la fiche et d'y mettre ce code :
    Code:
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC|UnifrakturCook:700" rel="stylesheet" /><div class="predef_bloc"><div class="predef_title">TITRE OU NOM DU PRÉDÉFINI<div class="predef_cite">SOUS-TITRE OU CITATION</div></div><div class="predef_bloc_middle"><span class="predef_onglet predef_actif">Général</span><span class="predef_onglet">Histoire</span><span class="predef_onglet">Autres</span><div class="predef_contenu predef_contenu_actif"><img class="predef_img" src="URL IMAGE 1ER ONGLET" alt="avatar1" /><div class="predef_text">TEXTE DU 1ER ONGLET</div><div style="clear: both;"></div></div><div class="predef_contenu"><div class="predef_text">TEXTE DU 2E ONGLET</div><div style="clear: both;"></div></div><div class="predef_contenu"><div class="predef_text">TEXTE DU 3E ONGLET</div><img class="predef_img" src="URL IMAGE 3E ONGLET" alt="avatar2" /><div style="clear: both;"></div></div></div><div class="predef_credit">Par Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a></div></div>

    Les majuscules servent à indiquer où mettre le contenu.




    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

    À plus !


    Dernière édition par Onyx le Mer 21 Déc 2016 - 5:03, édité 1 fois



    avatar
    Cruelly
    FémininAge : 24Messages : 2543

    le Jeu 8 Déc 2016 - 10:57

    Hooo merci beaucoup pour le partage Onyx c'est magnifique comme toujours :love:




    avatar
    Kelalin
    FémininAge : 24Messages : 1516

    le Jeu 8 Déc 2016 - 16:46

    Merci pour le partage !
    avatar
    Evie Gimhilde
    FémininAge : 18Messages : 18

    le Sam 10 Déc 2016 - 14:34

    Tu l'as fait avec le CSS et HTML mélangés ?
    avatar
    Chimik Girl
    FémininAge : 22Messages : 72

    le Sam 25 Fév 2017 - 21:12

    J'aime bien cette fiche, c'est original de faire un fiche de prédéfini avec des onglets. Merci pour le partage.
    avatar
    Kame-Chan
    FémininAge : 26Messages : 53

    le Dim 26 Fév 2017 - 11:04

    Merci beaucoup pour ce jolie code ! c'est exactement le genre dont j'avais besoin
    avatar
    Cassisse
    FémininAge : 24Messages : 98

    le Dim 5 Mar 2017 - 18:31

    Merciiii
    avatar
    NaLu
    FémininAge : 21Messages : 114

    le Lun 17 Avr 2017 - 2:28

    Merci beaucoup pour ce codage ^^



    avatar
    kevdes
    MasculinAge : 28Messages : 6

    le Dim 7 Mai 2017 - 11:49

    Il est sympa .
    avatar
    abysean
    MasculinAge : 22Messages : 13

    le Mar 20 Juin 2017 - 21:51

    Merci :)
    avatar
    Eiv
    MasculinAge : 22Messages : 502

    le Mer 28 Juin 2017 - 6:47

    merci



    avatar
    Phenixis
    FémininAge : 19Messages : 18

    le Sam 15 Juil 2017 - 4:06

    Superbe fiche, compacte et originale ♥



    avatar
    Myulunie
    FémininAge : 20Messages : 4

    le Mar 18 Juil 2017 - 21:31

    Merci beaucoup pour ce code, j'en cherchais justement un avec des onglets. Ca fera l'affaire, c'est super !
    Contenu sponsorisé


      La date/heure actuelle est Ven 21 Juil 2017 - 6:33