NeoFrag 다운로드
로그인

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

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

38 과목, 883 개

참여자 기증자
읽지 않은 메시지
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" !
반환
3 참가자
4 개
eResnova

17 과목, 875 개

참여자
읽지 않은 메시지
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 과목, 883 개

참여자 기증자
읽지 않은 메시지
ah bon mince alors.... D'accord merci ^^
"N'arrêtez jamais d'apprendre" !
Yira

4 과목, 50 개

기증자
읽지 않은 메시지
Thx :D c'est avec ce code que tu as fais ta page web tv ? :)
Zaekof

38 과목, 883 개

참여자 기증자
읽지 않은 메시지
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" !
반환