partage contenue slide aprentissage et demande aide

snypi · 15/04/2013 17:26:33

salutation j'ai fait un petit javascript qui me créer des onglets qui slide de droite vers la gauche
les onglets sont remplis par des pages de ziteplus via un include

mon script fonctionne et n'est pas gourmand mais juste pour mon apprentissage j'aimerai savoir comment optimisé mon script !!
ci joint mon script

[== JavaScript ==]
<script type="text/javascript">// <![CDATA[
 $(document).ready(function(){ 
$(function() { 
 $('#groupe').hover(
  function () {
   $('#groupe').stop().animate({'marginLeft':'0px'},500);
   $('#ce, #formule, #evenement').stop().animate({'marginLeft':'940px'},20);

  },
  function () {
   $('#groupe').stop().animate({'marginLeft':'940px'},200);
  }
 );
 $('#ce').hover(
  function () {
   $('#ce').stop().animate({'marginLeft':'0px'},500);
   $('#groupe, #formule, #evenement').stop().animate({'marginLeft':'940px'},20);
  },
  function () {
   $('#ce').stop().animate({'marginLeft':'940px'},200);
  }
 );
 
  $('#evenement').hover(
  function () {
   $('#evenement').stop().animate({'marginLeft':'0px'},500);
   $('#groupe, #formule, #ce').stop().animate({'marginLeft':'940px'},20);
  },
  function () {
   $('#evenement').stop().animate({'marginLeft':'940px'},200);
  }
 );
  $('#formule').hover(
  function () {
   $('#formule').stop().animate({'marginLeft':'0px'},500);
   $('#groupe, #ce, #evenement').stop().animate({'marginLeft':'940px'},20);
  },
  function () {
   $('#formule').stop().animate({'marginLeft':'940px'},200);
  }
 );
});      });
// ]]></script>
<div id="menupro">

<div id="groupe">
<div id="onglet1"></div>
<div id="groupe_content" class="prof">
<?php include 'page_groupe.txt' ?></div></div>

 <div id="ce">
<div id="onglet2"></div>
<div id="ce_content" class="prof">
<?php include 'page_ce.txt' ?></div></div>

 <div id="evenement">
<div id="onglet3"></div>
<div id="evenement_content" class="prof">
<?php include 'page_evenement.txt'  ?></div></div>

 <div id="formule">
<div id="onglet4"></div>
<div id="formule_content" class="prof">
<?php include 'page_formule.txt' ?></div></div> 
 
</div>

mon css pour ceux qui veulent joué avec mon script manque les images des onglets mais à vous de les faires et adapté la taille

[== CSS ==]
#menupro{position: absolute;
    margin: 0px;
    padding: 0px;
    top: 0px;
	left:0;
	overflow:hidden;
	width:990px;
	height:520px;}
#onglet1 ,#onglet2 ,#onglet3 ,#onglet4{
border:2px solid #813729;
position: absolute;
height:140px;width:70px; 
display: block;
z-index:69;
cursor:pointer;}
#onglet1{top: 0px;background:red;}
#onglet2{top: 140px;background:green;}
#onglet3{height:100px;top: 280px;background:#000;}
#onglet4{top: 380px;background:#ccc;}
#groupe ,#ce ,#evenement ,#formule {margin-left:940px;}

#groupe_content, #ce_content , #evenement_content, #formule_content {
position: absolute;
top: 0px;
width:850px;
padding: 0 60px 0 10px;
height:520px;
margin-left:70px;
display: block;
background:#fff;
z-index:68;
}

je pense qu'avec une variable on peut définir l'onglet et avec this joué l'onglet mais je ne sais pas faire

merci au plus doué de former les moins doué

ps : démo dès que le site est en ligne

snypi · 20/04/2013 12:55:22

j'ai réussi à optimiser mon code
pour cela il suffit de rajouté une class nav_btn à groupe evenement ce ...
et voici le javascript et la demo
slide d'onglet

au expert : est ce que ceci est correct !!

tous ceci en attendant que le site soit en ligne pour vous montrer le résultat

Forum ZitePLUS

#1 15/04/2013 17:26:33

partage contenue slide aprentissage et demande aide

#2 20/04/2013 12:55:22

Re : partage contenue slide aprentissage et demande aide

Pied de page des forums