Sujet Précédent Sujet Suivant

Contenaire jquery

Résolu/Fermé
korka - 9 juin 2016 à 22:57
 korka - 12 juin 2016 à 21:05
Bonjour,

a l'intention de jordane45
comme promis voilà les explications avec la page exemple

j'ai pris un peut le temps de bien faire le css sur une page exemple afin que tu puises bien comprendre le principe

voilà le lien

http://communautaire.legtux.org/V1/module/contenaireavant.php

je t'ai fait un exemple avec mon ancien code et j'ai mis 2 couleurs
la couleurs vert c'est pour les onglets actifs
la couleurs bleu ciel c'est pour les onglets inactif (qui veux dire qu'on a pas cliqué)

ensuite quand tu actualise la page

tu verras onglet vert sur les salons et le sous menu les salons officielle en vert les autres onglets seront en bleu ciel

ensuite le principe :

quand tu clique sur le salon 3 ca met en vert les autre bleus ciel

quand tu revient sur l'onglet les salons ca se mettra couleur vert et avec son sous menu les salons officielles

le salon perso restera en bleu ciel

ensuite avant que j'oublie j'ai mis 3 petit bout de code en commentaire html car si je le met ca me plant les menus

donc voilà :

ligne 35 


<!-- si je met ce span a gauche le menu se plante-->							   <!--  <span class="icon-minichatconversationgauche"></span>-->


ligne 45 

<!-- si je met ce span a droite le menu se plante-->																	<!--  <span class="icon-minichatconversationdroite"></span>-->


ligne 57 
																													 <!-- Début du boutton qu'on met tout à droite -->																									 <!-- <span class="bouttondroite"><button type="button" class="buttons" title="creersalon">Créer un salon</button></span>-->
<!-- Fin du boutton qu'on met tout à droite -->


si après avoir résolus le code jquery tu peut remettre ces 3 petite code car là je ne sais pas si ça vient du code html ou jquery si ca vient autre chose ne t’embête surtout pas je verrais ça plus tard

maintenant voilà la page avec ton code que j'ai remis comme tu m'a fait

j'ai essayer de reproduire avec ma page exemple avec ton code

http://communautaire.legtux.org/V1/module/contenaireapres.php

maintenant si tu pouvais refaire ou me dire afin de faire pareil que ma page exemple

je te met le code que tu m'a fait et on partira de ton code

voilà son css au cas ou si ta besoin 

/*********************************************************************************************************Début des menus contenaires****************************************************************************************************************************/

#main_section	  {
	  /* PAS NECESSAIRE POUR LE SCRIPT */
	  width:auto;
/*	  background-color:#CC00FF;*/
	  }
	  
	  .section
	  {
	  /* PAS NECESSAIRE POUR LE SCRIPT */
/*	  padding : 10px;*/
/*	  background:#993399;*/
	  }
	  
ul.menu
{
  display:inline-flex;
  list-style-type:none; /* Car sinon les puces se placent n'importe o? */
  color:#000000;
}

ul.menu li
{
  /*	  padding:0.625em;/* top right bottom left */
}

.tab
{
  /* PAS NECESSAIRE POUR LE SCRIPT */
  padding : 10px;
  margin-left:10px;
  /*	  float : left;*/
  position : relative;
  z-index: 2;
  /*	  top : 1px;*/
  /*	  cursor : pointer;*/
}

.active     /* Les onglets selectionnés */
{
  /* PAS NECESSAIRE POUR LE SCRIPT */
  background:#00FF00;
  border : 1px solid #CCCCCC;
  border-bottom : 0px;
  z-index: 3;
}

.unactive   /* Les onglets non selectionnés */
{
  /* PAS NECESSAIRE POUR LE SCRIPT */
   background:#00FFFF;
  border : 1px solid #CCCCCC;
  /*	  border-bottom : 0px;*/
}


.content
{
  /* PAS NECESSAIRE POUR LE SCRIPT */
  background : white;
  /*      clear : both;*/
  /*	  overflow:hidden;*/
  border-top : 1px solid #CCCCCC;
  position:relative;
  top:-12px;
  min-height:100px;
  z-index: 1;
}
.content1
{
  /* PAS NECESSAIRE POUR LE SCRIPT */
  background : white;
  /*      clear : both;*/
  /*	  overflow:hidden;*/
  border-top : 1px solid #CCCCCC;
  position:relative;
  top:-12px;
  min-height:100px;
  z-index: 1;
}
	  .page
	  {
	  /* PAS NECESSAIRE POUR LE SCRIPT */
	  background : white;
	  }
	  
	  .displayed      /* Les pages affichées */
	  {
	  }
	  
	  .undisplayed    /* Les pages non affichées */
	  {
	  /* NECESSAIRE POUR LE SCRIPT !!!! */
	  display : none;
	  }
.bouttondroite
	  {
	  float:right;
	  margin-right:20px;
	  margin-top:4px;
	  }



.icon-minichatconversationsupprimer:before {
    content: "\f081";
	float:right;
	position:relative;
	top:-10px;
	right:-10px;
	color:#FF0000;
}

.icon-minichatconversationgauche:before {
    content: "\f044";
	float:left;
	margin:10px;
}
.icon-minichatconversationdroite:before {
    content: "\f05a";
	float:right;
	margin:10px;
}




/*********************************************************************************************************Fin des menus contenaires******************************************************************************************************************************/


et son code html 

	                                                                       <!-- Début Menu MainSection -->
																		   <section id="main_section" class="section">
																		   
																		   <h2></h2>
																		   <!-- si je met ce span a gauche le menu se plante-->
																		   <!--  <span class="icon-minichatconversationgauche"></span>-->
																		   <ul class="menu">
																		                    <li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon">Les salons</li>
																							<li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon1">#1salon</li>
																							<li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon2">#2salon</li>
																							<li class="tab icon-minichatconversationsupprimer" data-sm="menuminisalon3">#3salon</li>
																							<li class="tab icon-minichatconversationsupprimer" data-sm="menuminipseudo1">pseudo 1</li>
																							<li class="tab icon-minichatconversationsupprimer" data-sm="menuminipseudo2">pseudo 2</li>
																							<li class="tab icon-minichatconversationsupprimer" data-sm="menuminipseudo3">pseudo 3</li>
																			</ul>
																			<!-- si je met ce span a droite le menu se plante-->
																			<!--  <span class="icon-minichatconversationdroite"></span>-->
                          <!-- Début de la content -->
						  <div class="content">
																			<!--début on affiche les les salon officielle et perso-->
																			<div class="sousmenu" id="menuminisalon">
						                                                                                             <!-- Début sous menu -->
																			                                         <ul class="menu">
																													                  <li class="tab icon-minichatconversationsupprimer" data-page="menuminisalonofficielle">Les salons offocielle</li>
																																	  <li class="tab icon-minichatconversationsupprimer" data-page="menuminisalonperso">Les salons perso</li>
																													 </ul>
						                                                                                             <!-- Fin sous menu -->
																													 <!-- Début du boutton qu'on met tout à droite -->
																													 <!-- <span class="bouttondroite"><button type="button" class="buttons" title="creersalon">Créer un salon</button></span>-->
																													 <!-- Fin du boutton qu'on met tout à droite -->
                                                                           <!-- Début de la content -->
																		   <div class="content">
																													 <!--début on affiche les salon officielle-->
																													 <div class="page" id="menuminisalonofficielle">officielle</div>
																													 <!--Fin on affiche les salon officielle-->
																													 
																													 <!--début on affiche les salon perso-->
																													 <div class="page" id="menuminisalonperso">perso</div>
																													 <!--Fin on affiche les salon perso-->
						                                                    </div>
																			<!-- Fin de la content -->
																			</div>
																			<!--Fin on affiche les les salon officielle et perso-->
																			
																			<!--début on affiche le salon 1-->
																			<div class="sousmenu" id="menuminisalon1">on affiche la conversation du salon 1</div>
																			<!--Fin on affiche le salon 1-->
																			
																			<!--début on affiche le salon 2-->
																			<div class="sousmenu" id="menuminisalon2">on affiche la conversation du salon 2</div>
																			<!--fin on affiche le salon 2-->
																			
																			<!--début on affiche le salon 3-->
																			<div class="sousmenu" id="menuminisalon3">on affiche la conversation du salon 3</div>
																			<!--fin on affiche le salon 3-->
																			
																			<!--début on affiche le pseudo 1-->
																			<div class="sousmenu" id="menuminipseudo1">on affiche la conversation du pseudo 1</div>
																			<!--Fin on affiche le pseudo 1-->
																			
																			<!--début on affiche le pseudo 2-->
																			<div class="sousmenu" id="menuminipseudo2">on affiche la conversation du pseudo 2</div>
																			<!--Fin on affiche le pseudo 2-->
																			
																			<!--début on affiche le pseudo 3-->
																			<div class="sousmenu" id="menuminipseudo3">on affiche la conversation du pseudo 3</div>
																			<!--Fin on affiche le pseudo 3-->
						  </div>
                          <!-- Fin de la content -->
																								 </section>
                                                                                                 <!-- Fin Menu MainSection -->


et le code jquery 

   // initialisation : Aucun menu selectionné
    raz_menu();
	init_menu(); //affichage du premier menu par défaut
	
	
	function init_menu(){
	  var premier_menu = $('#main_section > .menu > .tab').first();
	  premier_menu.addClass('active');
	  var id_sm = premier_menu.data('sm'); //on recupere l'id du sous-menu à afficher
	  $("#"+id_sm).css("display", "block"); // on l'affiche
	   $("#"+id_sm + '> ul > li.tab').first().addClass('active');

      var id_page = $("#"+id_sm +  '> ul > li.tab').first().data('page'); // on récupère l'id de la page (la div) à afficher
	  $("#"+id_page ).css("display", "block"); // on affiche LA page selectionnée dans le sous-menu
	}
	
    // 	On retire la class active à tous les items du menu
	function raz_menu(){
	  $('#main_section > .menu > .tab').removeClass('active'); // on retire tous les class active des menus
	  $('div.sousmenu').css("display", "none"); // tous les sous-menus sont masqués par défaut
	  $('div.sousmenu > ul > li.tab').removeClass('active'); 
	  $('div.page').css("display", "none"); // toutes les pages sont masquées par défaut
	}
	
	// lors du clic sur un item .. on lui met la class active
	$('#main_section > .menu > .tab').click(function(){
	  raz_menu();
	  $(this).addClass('active'); 
	  //affichage du sous-menu
	  var id_sm = $(this).data('sm'); //on recupere l'id du sous-menu à afficher
	  $("#"+id_sm).css("display", "block"); // on l'affiche
	
	});
	
	//lors du clic sur un sous-menu
	$('.sousmenu > ul >li.tab').click(function(){
	  $('.sousmenu > ul >li.tab').removeClass('active'); // on retire tous les "active" aux sous-menus
	  $(this).addClass('active');  // on met la class active au menu cliqué
	  
	  var id_page = $(this).data('page'); // on récupère l'id de la page (la div) à afficher
	    $('div.page').css("display", "none"); // toutes les pages sont masquées par défaut
	   $("#"+id_page).css("display", "block"); // on affiche LA page selectionnée dans le sous-menu
	  
	});


en espérant de ne pas avoir oublié un petit détail je ne pense pas et je t'ai ajouté des petits commentaires html pour savoir quelle div appartient qu'elle page des salon ou pseudo

si tu n'as pas le temps tu peut faire ca ce week end ;)


2 réponses

Réponse 1 / 2
jordane45 Messages postés 38277 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024 4 696
Modifié par jordane45 le 10/06/2016 à 02:29
Bonjour,


a l'intention de jordane45

tu sais... il n'y a pas que moi ... d'autres peuvent t'apporter également des réponses.. :-)


En attendant.. maintenant .. ok.. je comprends pourquoi tu voulais utiliser la class unactive...
Il suffit donc de la réintégrer dans le code.

Par exemple, pour la fonction raz_menu 
function raz_menu(){
   $('#main_section > .menu > .tab').removeClass('active'); // on retire tous les class active des menus
         $("#main_section > .menu > .tab:not([class*='unactive'])").addClass('unactive'); //met la class "unactive" à tous les menus qui ne l'ont pas déjà.

   $('div.sousmenu').css("display", "none"); // tous les sous-menus sont masqués par défaut
   $('div.sousmenu > ul > li.tab').removeClass('active'); 
   $('div.page').css("display", "none"); // toutes les pages sont masquées par défaut
 }



Cordialement, 
Jordane                                                                 
0
Réponse 2 / 2
korka
10 juin 2016 à 11:18
merci,

juste une petite question

ce code 

	  $("#main_section > .menu > .tab:not([class*='unactive'])").addClass('unactive'); //met la class "unactive" à tous les menus qui ne l'ont pas déjà.

ca veux dire sue tout les menu haut sont t inactiv

comment on peut lui dire de mettre le premier onglet avec class activ et les autres inactiv

en fessant ca un truc de ce genre

premier_menu.addClass('active');
first_menu.addClass('unactive');

et idem pour les sous menu


comme ca le premier onglet sera en vert et les autres bleu

ensuite quand tu re clique sur les salons ça efface le mot salon officielle salon perso

hors il faut pas que ca efface

actuellement il faut re cliquer a nouveau

après on verra qu'es ce qui ne vas pas

merci
0
korka
12 juin 2016 à 21:05
merci de ton aide là tout fonctionne enfaîte j'ai trouve un script jquery qui fonctione come je voulais

je met en résolu
0

Discussions similaires

Redirection Jquery onclick
Vitaly58 -
Vitaly58 -

4 réponses
jQuery & Regex
ameb2908 -
Utilisateur anonyme -

3 réponses
jquery: refresh element enfant après ajax
snipchain -
snipchain -

2 réponses
Tampermonkey (userscript), JQuery & Vinted, help !
zzzer -
jordane45 -

3 réponses
Problème de jquery sur mozilla
mocoye -
animostab -

3 réponses