Télécharger NeoFrag
Connexion

TUTO | Ajout menu a onglets dynamiques js/html/css

70 vues
TUTO | Ajout menu a onglets dynamiques js/html/css
Zaekof

38 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
Bonjour tout le monde !

Pour mon premier tuto je vient vous montrer comment ajouter un petit menu a positionner la ou vous voulez avec le live-editor.

Pour commencer allez dans votre ftp ici :
/neofrag/themes/default/css/style.css
Ouvrez le fichier "style.css" puis ajouté le code suivent :

#ul_onglets{
margin:0;
padding:0 0 0 5px;
}
.onglet{
float: left;
margin:5px 2px 0 5px;
padding:5px 10px ;
border:1px solid #AAA;
border-bottom:none;
border-radius:5px 5px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
color:#555;
cursor: pointer;
list-style: none;
background: #EEE;
}
.onglet:hover{
background: #AAA;
}
.onglet_selectionner{
float: left;
margin:5px 2px -5px 5px;
padding:5px 10px ;
border:1px solid #AAA;
border-bottom:2px solid white;
border-radius:5px 5px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
color:#555;
cursor: pointer;
font-weight:bold;
list-style: none;
}

.contenu-onglet{
clear: both;
background-color:white;
margin-top:-1px;
padding:5px;
border:1px solid #AAA;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
color:#555;
cursor: text;
}
#conteneur-onglet{
width: auto;
margin: auto;
}


Attention pour plus tard a ne pas ajouter ou créer de nouvelle classes avec les mêmes noms* exemple : "#conteneur-onglet"

Bref la suite, rendez vous sur votre live-editor pour ajouter un "col" comme ceci :



Nouveau Widget
Widget : Contenu libre / Code HTML
Type : Code HTML
Code html :



<script type="text/javascript">
function BasculeElement(_this){
var Onglet_li = document.getElementById('ul_onglets').getElementsByTagName('li');
for(var i = 0; i < Onglet_li.length; i++){
if(Onglet_li[i].id){
if(Onglet_li[i].id == _this.id){
Onglet_li[i].className = 'onglet_selectionner';
document.getElementById('#' + _this.id).style.display = 'block';
}
else{
Onglet_li[i].className = 'onglet';
document.getElementById('#' + Onglet_li[i].id).style.display = 'none';
}
}
}
}
</script>



<ul id="ul_onglets">
<li id="1" class="onglet_selectionner" onclick="BasculeElement(this);">Onglet 1</li>
<li id="2" class="onglet" onclick="BasculeElement(this);">Onglet 2</li>
<li id="3" class="onglet" onclick="BasculeElement(this);">Onglet 3</li>
<li id="4" class="onglet" onclick="BasculeElement(this);">Onglet 4</li>
<li id="6" class="onglet" onclick="BasculeElement(this);">Onglet 6</li>
</ul>

<div id="conteneur-onglet">
<div id="#1" class="contenu-onglet">Mon contenu-onglet 1</div>
<div id="#2" class="contenu-onglet" style="display: none;">Mon contenu-onglet 2</div>
<div id="#3" class="contenu-onglet" style="display: none;">Mon contenu-onglet 3</div>
<div id="#4" class="contenu-onglet" style="display: none;">Mon contenu-onglet 4</div>
<div id="#6" class="contenu-onglet" style="display: none;">Mon contenu-onglet 6</div>
</div>

Mon contenu-onglet 2
Mon contenu-onglet 3
Mon contenu-onglet 4
Mon contenu-onglet 6Si vous voulez modifier un onglet ajouter une balise <li></li>

<li id="7" class="onglet" onclick="BasculeElement(this);">Onglet 7</li>

Avec sans oublier le div :

<div id="#7" class="contenu-onglet" style="display: none;">Mon contenu-onglet 7</div>

le rendu :





Si vous avez des problèmes ou des questions n’hésitez pas !

Merci,
"N'arrêtez jamais d'apprendre" !
Retour
3 participants
4 réponses
eResnova

17 sujets, 875 réponses

Contributeurs Staff
Message non lu
Re-salut Zaekof,

Merci pour ton partage, mais il y a un moyen plus rapide sans js/css qui est possible avec NeoFrag, un exemple tout simple en HTML (peut donc être directement ajouté à un widget type html) :

<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Contenu home</div>
<div role="tabpanel" class="tab-pane" id="profile">Contenu profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Contenu messages</div>
<div role="tabpanel" class="tab-pane" id="settings">Contenu settings</div>
</div>
</div>

C'est disponible par défaut sur le CMS puisque nous nous basons sur Bootstrap qui propose cette fonctionnalités : http://getbootstrap.com/javascript/#tabs
Zaekof

38 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
ah bon mince alors.... D'accord merci ^^
"N'arrêtez jamais d'apprendre" !
Yira

4 sujets, 50 réponses

Donateurs
Message non lu
Thx :D c'est avec ce code que tu as fais ta page web tv ? :)
Zaekof

38 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
avec celui qu'il ma donné oui. c'est plus fluide que celui que je présente mais sa reste très bien.
"N'arrêtez jamais d'apprendre" !
Retour