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
