Utilisation du bouton Toggle pour switcher entre 2 elements
Fermé
lemega
Messages postés
85
Date d'inscription
mardi 13 janvier 2009
Statut
Membre
Dernière intervention
31 mai 2023
-
13 janv. 2020 à 12:06
aurio - 28 janv. 2020 à 21:32
aurio - 28 janv. 2020 à 21:32
Bonjour chers tous,
Je suis entrain de concevoir un site web en html/php qui dispose de 2 différents type de header (header-particliers et header-professionnels). Les 2 headers disposent de menus different et ont en commun un bouton Toggle qui permettra de switcher entre les 2 header.
Alors je vous presente l'architecture:
1. index.php =>a page d'accuel
2- le fichier head.php => permettra de recevoir soit header-particuliers.php ou header-professionnels.php
3-1 le fichier header-particuliers.php => affiche le menu pour particuliers
3-2. fichier menu-particuliers.html => les items du menu particulier
4-1. Fichier header-professionnels.php => afficher le menu professionnel
4-2. fichier menu-professionnels.html => les items du menu professionnels
J'ai trouvé un script interressant sur le net que j'ai integré dans mon site comme suit:
1. Au niveau du fichier index.php, j'ai ajouté ceci:
Voici le contenu du fichier buttonstrip.js
2. Au niveau des fichiers header-particulier.php et header-professionnels.php, j'ai ajouté ceci :
cela permet d'afficher le bouton toggle.
Voila un peu comment se presente mon architecture.
Alors, je peine vraiment a faire fonctonner le bouton Toggle(Particuliers/Professionnels). C'est a dire, lorsqu'on clique sur Particulier, le menu particulier s'affiche et lorsqu'on clique sur professionnel on switche pour le menu professionnel.
Ainsi donc Je viens vers vous pour trouver une solution.
Merci pour l'interet que vous porteriez pour ma requete
Je suis entrain de concevoir un site web en html/php qui dispose de 2 différents type de header (header-particliers et header-professionnels). Les 2 headers disposent de menus different et ont en commun un bouton Toggle qui permettra de switcher entre les 2 header.
Alors je vous presente l'architecture:
1. index.php =>a page d'accuel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Langoost</title>
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link rel="stylesheet" href="css/tailwind.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/jquery.rateyo.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script defer src="fonts/awesome/[/javascript/jsintro.php3 js]/all.js"></script>
<!-- Uncomment for cdn tailwind (if you haven't built your tailwind.css yet) <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">-->
</head>
<body class="bg-gray-100 font-Montserrat font-body text-xs">
<[/contents/242-introduction-au-dynamic-html-dhtml div] class="w-full bg-white">
<?php include_once './feature/head.php'?>
</div>
<!-- Uncomment for jquery <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script> -->
<!-- Button Toggle -->
<script src="js/buttonstrip.js"></script>
<script>
var bs1 = new ButtonStrip({
id: 'header'
});
bs1.addButton('Particuliers', true, 'click', function(){
console.log('Hallo Welt!');
});
bs1.addButton('Professionnels', false, 'click', function(){
console.log('Test');
});
bs1.append('#btnToggle');
</script>
</body>
</html>
2- le fichier head.php => permettra de recevoir soit header-particuliers.php ou header-professionnels.php
<div class="w-full" id="header">
</div>
3-1 le fichier header-particuliers.php => affiche le menu pour particuliers
<div class="w-full bg-white" id="particliers">
<header id="sp-header" class="particulier container mx-auto sm:flex sm:justify-between sm:items-center sm:px-4 sm:py-3 h-16">
<div class="flex items-center justify-between px-4 py-3 sm:p-0 text-">
<div class="">
<img class="h-8" src="./images/logo-langoost-part.svg" alt="logo">
</div>
</div>
<div class="flex items-center">
<div id="btnToggle"></div>
</div>
<div class="menu-header">
<?php include_once './feature/menu/menu-particuliers.html'?>
</div>
</header>
</div>
3-2. fichier menu-particuliers.html => les items du menu particulier
<div class="container mx-auto flex justify-between">
<nav class="sm:block">
<ul class="flex">
<!-- Item 1-->
<li class="hoverable">
<a href="#" class="relative block py-4 px-4 text-xs font-bold text-purple-800 hover:text-orange-600">Tests de langue</a>
<div class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-langoostViolet80 pays">
<div class="container mx-auto flex flex-wrap justify-between mx-2">
<!-- Megamenu 1 -->
<ul class="px-4 border-gray-600 pb-6 pt-6 lg:pt-3 inline-block">
<div class="flex items-center border-b border-white mb-3">
<img src="./images/icon/pays/grande-bretagne.png" class="h-5">
<h3 class=" font-bold text-sm uppercase text-langoostTextWhite text-bold mb-2 ml-2 mt-2 angletrre">Anglais</h3>
</div>
<div class="flex text-xs">
<ul class="block mr-2 text-langoostTextWhite leading-loose uppercase">
<li class="hover:text-langoostOrange80"><a href="#">Toeic</a></li>
<li class="hover:text-langoostOrange80"><a href="#">Bulats</a></li>
<li class="hover:text-langoostOrange80"><a href="#">Toefl IBT</a></li>
<li class="hover:text-langoostOrange80"><a href="#">Bricht English</a></li>
<li class="hover:text-langoostOrange80">Ielts</li>
</ul>
<ul class="block ml-2 text-langoostTextWhite leading-loose uppercase">
<li class="hover:text-langoostOrange80"><a href="#">Toefl ITP</a></li>
<li class="hover:text-langoostOrange80"><a href="#">Cambridge fce</a></li>
<li class="hover:text-langoostOrange80"><a href="#">CI Advanced</a></li>
<li class="hover:text-langoostOrange80"><a href="#">Toeic Bridge</a></li>
</ul>
</div>
</ul>
<!-- //Megamenu 1 -->
<!-- Megamenu 2 -->
<ul class="px-4 border-gray-600 pb-6 pt-6 lg:pt-3 inline-block">
<div class="flex items-center border-b border-white mb-3">
<img src="./images/icon/pays/france.png" class="h-5" />
<h3 class="font-bold text-sm uppercase text-langoostTextWhite text-bold mb-2 ml-2 mt-2 france">Français</h3>
</div>
<div class="flex items-center py-3">
<ul class="block text-langoostTextWhite leading-loose uppercase">
<li class="hover:text-langoostOrange80"><a href="#">TCF</a></li>
<li class="hover:text-langoostOrange80"><a href="#">DELF</a></li>
</ul>
</div>
</ul>
<!-- // Megamenu 2 -->
<!-- Megamenu 3 -->
<ul class="px-4 border-gray-600 pb-6 pt-6 lg:pt-3 inline-block">
<div class="flex items-center border-b border-white mb-3">
<img src="./images/icon/pays/allemagne.png" class="h-5" />
<h3 class="font-bold text-sm uppercase text-langoostTextWhite text-bold mb-2 ml-2 mt-2 allemagne">Allemand</h3>
</div>
<div class="flex items-center py-3">
<ul class="block text-langoostTextWhite leading-loose uppercase">
<li class="hover:text-langoostOrange80"><a href="#">WIDAF</a></li>
<li class="hover:text-langoostOrange80"><a href="#">BRIGHT DEUTSCH</a></li>
</ul>
</div>
</ul>
<!-- // Megamenu 3 -->
<!-- Megamenu 4 -->
<ul class="px-4 border-gray-600 pb-6 pt-6 lg:pt-3 inline-block">
<div class="flex items-center border-b border-white mb-3">
<img src="./images/icon/pays/espagne.png" class="h-5" />
<h3 class="font-bold text-sm uppercase text-langoostTextWhite text-bold mb-2 ml-2 mt-2 espagne">Espagnol</h3>
</div>
<div class="flex items-center py-3">
<ul class="block text-langoostTextWhite leading-loose uppercase">
<li class="hover:text-langoostOrange80"><a href="#">DEIE</a></li>
<li class="hover:text-langoostOrange80"><a href="#">BRIGHT español</a></li>
</ul>
</div>
</ul>
<!-- // Megamenu 4 -->
<!-- Megamenu 5 -->
<ul class="px-4 border-gray-600 pb-6 pt-6 lg:pt-3 inline-block">
<div class="flex items-center border-b border-white mb-3">
<img src="./images/icon/pays/chine.png" class="h-5" />
<h3 class="font-bold text-sm uppercase text-langoostTextWhite text-bold mb-2 ml-2 mt-2 chine">Chinois</h3>
</div>
<div class="flex items-center py-3">
<ul class="block text-langoostTextWhite leading-loose uppercase">
<li class="hover:text-langoostOrange80"><a href="#">HSK</a></li>
</ul>
</div>
</ul>
<!-- // Megamenu 5 -->
</div>
</div>
</li>
<!-- ## Item 1 ## -->
<!-- Item 2-->
<li class="hoverable">
<a href="#" class="relative block py-4 px-4 text-xs font-bold text-purple-800 hover:text-orange-600">Business English</a>
</li>
<!-- ## Item 2 ## -->
<!-- Item 3-->
<li class="hoverable">
<a href="#" class="relative block py-4 px-4 text-xs font-bold text-purple-800 hover:text-orange-600">Nos tarifs</a>
<div class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-langoostViolet80">
<div class="container mx-auto w-full flex flex-wrap justify-between mx-2">
<!-- Megamenu 1 -->
<ul class="px-4 border-gray-600 pb-6 pt-6 lg:pt-3 inline-block text-center items-center w-full">
<div class="items-center inline-block mr-4 ml-4 text-center">
<a href="#">
<span class="font-bold text-xs text-langoostGrey30 text-bold hover:text-langoostTextWhite mb-2">
<i class="fas fa-graduation-cap text-base text-langoostGrey30 hover:text-langoostOrange80"></i><br/>
Test de langue
</span>
</a>
</div>
<div class="items-center inline-block mr-4 ml-4">
<a href="#">
<span class="font-bold text-xs text-langoostGrey30 text-bold hover:text-langoostTextWhite mb-2">
<i class="fas fa-briefcase text-base text-langoostGrey30 hover:text-langoostOrange80"></i><br/>
Business English
</span>
</a>
</div>
</ul>
<!-- //Megamenu 1 -->
</div>
</div>
</li>
<!-- ## Item 3 ## -->
<!-- Item 4-->
<li class="hoverable">
<a href="#" class="relative block py-4 px-4 text-xs font-bold text-purple-800 hover:text-orange-600">Langoost</a>
<div class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-langoostViolet80">
<div class="container mx-auto w-full flex flex-wrap justify-between mx-2">
<!-- Megamenu 1 -->
<ul class="px-4 border-gray-600 pb-6 pt-6 lg:pt-3 inline-block text-center items-center w-full">
<div class="items-center inline-block mr-4 ml-4">
<a href="#">
<span class="font-bold text-xs text-langoostGrey30 text-bold hover:text-langoostTextWhite mb-2">
<i class="fas fa-users text-base text-langoostGrey30 hover:text-langoostOrange80"></i><br />
Le pari de Langoost
</span>
</a>
</div>
<div class="items-center inline-block mr-4 ml-4">
<a href="#">
<span class="font-bold text-xs text-langoostGrey30 text-bold hover:text-langoostTextWhite mb-2">
<i class="fas fa-users text-base text-langoostGrey30 hover:text-langoostOrange80"></i><br />
La dream team
</span>
</a>
</div>
<div class="items-center inline-block mr-4 ml-4">
<a href="#">
<span class="font-bold text-xs text-langoostGrey30 text-bold hover:text-langoostTextWhite mb-2">
<i class="fas fa-chalkboard-teacher text-base text-langoostGrey30 hover:text-langoostOrange80"></i><br />
Nos profs
</span>
</a>
</div>
<div class="items-center inline-block mr-4 ml-4">
<a href="#">
<span class="font-bold text-xs text-langoostGrey30 text-bold hover:text-langoostTextWhite mb-2">
<i class="fas fa-trophy text-base text-langoostGrey30 hover:text-langoostOrange80"></i><br />
Nos fiertés
</span>
</a>
</div>
<div class="items-center inline-block mr-4 ml-4">
<a href="#">
<span class="font-bold text-xs text-langoostGrey30 text-bold hover:text-langoostTextWhite mb-2">
<i class="fas fa-smile-wink text-base text-langoostGrey30 hover:text-langoostOrange80"></i><br />
Rejoins l'aventure
</span>
</a>
</div>
<div class="items-center inline-block mr-4 ml-4">
<a href="#">
<span class="font-bold text-xs text-langoostGrey30 text-bold hover:text-langoostTextWhite mb-2">
<i class="fas fa-file-alt text-base text-langoostGrey30 hover:text-langoostOrange80"></i><br />
Presse
</span>
</a>
</div>
</ul>
<!-- //Megamenu 1 -->
</div>
</div>
</li>
<!-- ## Item 4 ## -->
<!-- Item 5-->
<li class="hoverable">
<a href="#" class="relative block py-4 px-4 text-xs font-bold text-purple-800 hover:text-orange-600">Notre blog</a>
</li>
<!-- ## Item 5 ## -->
</ul>
</nav>
<div class="sm:flex items-center">
<div class="mr-4">
<a href="#" class="btn-global btn-border-orange">Mon compte</a>
</div>
<div>
<a href="#" class="btn-global btn-bg-orange">Créer mon compte</a>
</div>
</div>
</div>
4-1. Fichier header-professionnels.php => afficher le menu professionnel
<div class="w-full bg-langoostVioletDark80" id="professionnels">
<header id="sp-header" class="container mx-auto sm:flex sm:justify-between sm:items-center sm:px-4 sm:py-3 h-16">
<div class="flex items-center justify-between px-4 py-3 sm:p-0">
<div class="">
<img class="h-16" src="./images/logo-langoost-prof.svg" alt="logo">
</div>
</div>
<div class="flex items-center">
<div id="btnToggle"></div>
</div>
<div class="menu-header">
<?php include_once './feature/menu/menu-professionnels.html'?>
</div>
</header>
</div>
4-2. fichier menu-professionnels.html => les items du menu professionnels
<div class="flex justify-between">
<nav class="sm:block mr-5">
<ul class="flex text-xs">
<!-- Item 1-->
<li class="hoverable">
<a href="#" class="item-menu-prof-level1">Qui êtes-vous ?</a>
<div class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-white">
<div class="container mx-auto w-full flex flex-wrap justify-between mx-2">
<ul class="items-start px-4 w-full border-gray-600 border-b sm:border-r-0 lg:border-b-0 pb-6 pt-6 lg:pt-3 inline-block text-center">
<!-- Megamenu 1 -->
<li class="items-center text-center item-menu-prof-dropdown inline-block text-center mr-6 ml-6">
<a href="#" class="">
<img src="./images/icon/svg/hotel.svg" class="mx-auto my-0">
<span class=" mb-2">Etablisement </br>d'enseignement</span>
</a>
</li>
<!-- //Megamenu 1 -->
<!-- Megamenu 2 -->
<li class="items-center text-center item-menu-prof-dropdown inline-block text-center mr-6 ml-6">
<a href="#">
<img src="./images/icon/png/icons-default-building.png" class="mx-auto my-0">
<span class="mb-2">Organism </br>de formation</span>
</a>
</li>
<!-- // Megamenu 2 -->
<!-- Megamenu 3 -->
<li class="items-center text-center item-menu-prof-dropdown inline-block text-center mr-6 ml-6">
<a href="#">
<img src="./images/icon/png/icons-default-city.png" class="mx-auto my-0">
<span class="mb-2">Entreprise</span>
</a>
</li>
<!-- // Megamenu 3 -->
<!-- Megamenu 4 -->
<li class="items-center text-center item-menu-prof-dropdown inline-block text-center mr-6 ml-6">
<a href="#">
<img src="./images/icon/png/icons-default-bullhorn.png" class="mx-auto my-0">
<span class="mb-2">Distribueur</span>
</a>
</li>
<!-- // Megamenu 4 -->
</div>
</div>
</li>
<!-- ## Item 1 ## -->
<!-- Item 2-->
<li class="hoverable">
<a href="#" class="item-menu-prof-level1">Nos solutions</a>
<div class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-white">
<div class="container mx-auto w-full flex flex-wrap justify-between mx-2">
<!-- Megamenu 1 -->
<ul class="items-start px-4 w-full border-gray-600 border-b sm:border-r-0 lg:border-b-0 pb-6 pt-6 lg:pt-3 inline-block text-center">
<li class="items-center text-center item-menu-prof-dropdown inline-block text-center mr-6 ml-6">
<a href="#">
<img src="./images/icon/png/icons-default-skill.png" class="mx-auto my-0">
<span class="mb-2">Tests de langue</span>
</a>
</li>
<!-- //Megamenu 1 -->
<!-- Megamenu 2 -->
<li class="items-center text-center item-menu-prof-dropdown inline-block text-center mr-6 ml-6">
<a href="#">
<img src="./images/icon/png/icons-default-briefcase.png" class="mx-auto my-0">
<span class="mb-2">Business english</span>
</a>
</li>
<!-- // Megamenu 2 -->
</div>
</div>
</li>
<!-- ## Item 2 ## -->
<!-- Item 3-->
<li class="hoverable">
<a href="#" class="item-menu-prof-level1">Nos services</a>
<div class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-white">
<div class="container mx-auto w-full justify-between mx-2 inline-block items-center text-center">
<!-- Megamenu 1 -->
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b lg:border-b-0 pb-6 pt-6 lg:pt-3 inline-block">
<div class="flex items-center">
<img src="./images/icon/png/icons-default-skill.png" class="">
<h5 class="font-bold text-sm text-langoostViolet80 text-bold mr-2">Notre pédagogie</h5>
</div>
<ul class="ml-6 mt-1 text-left">
<li class="item-menu-prof-dropdown">
<span>
<a href="#" class="">Evaluation prédagogique</a>
</span>
</li>
<li class="item-menu-prof-dropdown">
<span>
<a href="#" class="">Parcours de formation</a>
</span>
</li>
<li class="item-menu-prof-dropdown">
<span>
<a href="#" class="">Validation des compétences</a>
</span>
</li>
</ul>
</ul>
<!-- //Megamenu 1 -->
<!-- Megamenu 2 -->
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r-0 lg:border-b-0 pb-6 pt-6 lg:pt-3 inline-block">
<div class="flex items-center">
<img src="./images/icon/png/icons-default-user-friends.png" class="">
<h5 class="font-bold text-sm text-langoostViolet80 text-bold mr-2">Notre accompagnement</h5>
</div>
<ul class="ml-6 mt-1 text-left">
<li class="item-menu-prof-dropdown">
<span>
<a href="#" class="">Espace d'administration dédié</a>
</span>
</li>
<li class="item-menu-prof-dropdown">
<span>
<a href="#" class="">Egagement</a>
</span>
</li>
<li class="item-menu-prof-dropdown">
<span>
<a href="#" class="">Validation des compétences</a>
</span>
</li>
</ul>
</ul>
<!-- // Megamenu 2 -->
<!-- Megamenu 3 -->
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-b-0 md:border-b-0 pb-6 pt-6 lg:pt-3 inline-block">
<div class="flex items-center">
<img src="./images/icon/png/icons-default-laptop-code.png" class="">
<h5 class="font-bold text-sm text-langoostViolet80 text-bold mr-2">Intégrer notre solution</h5>
</div>
<ul class="ml-6 mt-1 text-left">
<li class="item-menu-prof-dropdown">
<span>
<a href="#" class="">SSO/API</a>
</span>
</li>
<li class="item-menu-prof-dropdown">
<span>
<a href="#" class="">Marque blanche</a>
</span>
</li>
</ul>
</ul>
<!-- // Megamenu 3 -->
</div>
</div>
</li>
<!-- ## Item 3 ## -->
<!-- Item 4-->
<li class="hoverable nos-tarifs">
<a href="#" class="item-menu-prof-level1">Nos tarifs</a>
</li>
<!-- ## Item 4 ## -->
<!-- Item 5 -->
<li class="hoverable">
<a href="#" class="item-menu-prof-level1">Langoost</a>
<div class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-white">
<div class="container mx-auto w-full flex flex-wrap justify-between mx-2">
<!-- Megamenu 1 -->
<ul class="items-start px-4 w-full border-gray-600 border-b sm:border-r-0 lg:border-b-0 pb-6 pt-6 lg:pt-3 inline-block text-center">
<li class="items-center text-center item-menu-prof-dropdown inline-block text-center mr-6 ml-6">
<a href="#">
<img src="./images/icon/png/icons-default-langoost.png" class="mx-auto my-0">
<span class="mb-2">Le pari de Langost</span>
</a>
</li>
<!-- //Megamenu 1 -->
<!-- Megamenu 2 -->
<li class="items-center text-center item-menu-prof-dropdown inline-block text-center mr-6 ml-6">
<a href="#">
<img src="./images/icon/png/icons-default-users.png" class="mx-auto my-0">
<span class="mb-2">La dream team</span>
</a>
</li>
<!-- // Megamenu 2 -->
<!-- Megamenu 3 -->
<li class="items-center text-center item-menu-prof-dropdown inline-block text-center mr-6 ml-6">
<a href="#">
<img src="./images/icon/png/icons-default-desktop.png" class="mx-auto my-0">
<span class="mb-2">Nos profs</span>
</a>
</li>
<!-- // Megamenu 3 -->
<!-- Megamenu 4 -->
<li class="items-center text-center item-menu-prof-dropdown inline-block text-center mr-6 ml-6">
<a href="#">
<img src="./images/icon/png/icons-default-trophy-alt.png" class="mx-auto my-0">
<span class="mb-2">Nos fiertés</span>
</a>
</li>
<!-- // Megamenu 4 -->
<!-- Megamenu 5 -->
<li class="items-center text-center item-menu-prof-dropdown inline-block text-center mr-6 ml-6">
<a href="#">
<img src="./images/icon/png/icons-default-grin-wink.png" class="mx-auto my-0">
<span class="mb-2">Rejoins l'aventure</span>
</a>
</li>
<!-- // Megamenu 5 -->
<!-- Megamenu 2 -->
<li class="items-center text-center item-menu-prof-dropdown inline-block text-center mr-6 ml-6">
<a href="#" class="">
<img src="./images/icon/png/icons-default-media.png" class="mx-auto my-0">
<span class="mb-2">Presse</span>
</a>
</li>
<!-- // Megamenu 2 -->
</div>
</div>
</li>
<!-- ## Item 5 ## -->
<!-- Item 6-->
<li class="hoverable notre-blog">
<a href="#" class="item-menu-prof-level1">Notre blog</a>
</li>
<!-- ## Item 6 ## -->
</ul>
</nav>
<div class="sm:flex items-center">
<div>
<a href="#" class="btn-global btn-bg-orange items-center">Demo gratuite</a>
</div>
</div>
</div>
- Pour le bouton Toggle **********
J'ai trouvé un script interressant sur le net que j'ai integré dans mon site comme suit:
1. Au niveau du fichier index.php, j'ai ajouté ceci:
<!-- Button Toggle -->
<script src="js/buttonstrip.js"></script>
<script>
var bs1 = new ButtonStrip({
id: 'header'
});
bs1.addButton('Particuliers', true, 'click', function(){
console.log('Hallo Welt!');
});
bs1.addButton('Professionnels', false, 'click', function(){
console.log('Test');
});
bs1.append('#btnToggle');
</script>
Voici le contenu du fichier buttonstrip.js
function ButtonStrip(options) {
this.id = options.id;
this.buttons = [];
}
ButtonStrip.prototype.addButton = function(pName, pActive, pType, pCallback) {
this.buttons.push({
name: pName,
active: pActive,
event: {
type: pType,
callback: pCallback
}
});
}
ButtonStrip.prototype.append = function(element) {
var rootDiv = document.createElement('div');
rootDiv.classList.add('button-strip');
rootDiv.id = this.id;
for (var i = 0; i < this.buttons.length; i++) {
var self = this;
var button = this.buttons[i];
var innerSpan = document.createElement('span');
innerSpan.classList.add('strip-button-text');
innerSpan.innerHTML = button.name;
var buttonDiv = document.createElement('div');
buttonDiv.classList.add('strip-button');
var stripButtonClassIterator = 'strip-button-' + i.toString();
buttonDiv.classList.add(stripButtonClassIterator);
if (button.active) {
buttonDiv.classList.add('active-strip-button');
this.activeSelector = '#' + this.id + ' .' + stripButtonClassIterator;
}
buttonDiv.appendChild(innerSpan);
buttonDiv.addEventListener(button.event.type, button.event.callback);
buttonDiv.addEventListener('click', function(){
document.querySelector(self.activeSelector).classList.remove('active-strip-button');
document.querySelector('#' + self.id + ' .' + this.classList[1]).classList.add('active-strip-button');
self.activeSelector = '#' + self.id + ' .' + this.classList[1];
});
rootDiv.appendChild(buttonDiv);
}
document.querySelector(element).appendChild(rootDiv);
}
2. Au niveau des fichiers header-particulier.php et header-professionnels.php, j'ai ajouté ceci :
<div id="btnToggle"></div>
cela permet d'afficher le bouton toggle.
Voila un peu comment se presente mon architecture.
Alors, je peine vraiment a faire fonctonner le bouton Toggle(Particuliers/Professionnels). C'est a dire, lorsqu'on clique sur Particulier, le menu particulier s'affiche et lorsqu'on clique sur professionnel on switche pour le menu professionnel.
Ainsi donc Je viens vers vous pour trouver une solution.
Merci pour l'interet que vous porteriez pour ma requete
A voir également:
- Utilisation du bouton Toggle pour switcher entre 2 elements
- Notice d'utilisation - Guide
- Utilisation chromecast - Guide
- Photoshop elements gratuit - Télécharger - Retouche d'image
- 2 ecran pc - Guide
- Word numéro de page 1/2 - Guide
1 réponse
cs_PaTaTe
Messages postés
2126
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
19 février 2021
496
28 janv. 2020 à 20:15
28 janv. 2020 à 20:15
Bonjour,
La demande est étrange non ?
Quand on est connecté au site soit on est considéré comme particulier soit comme professionnel non ?
A l'inscription, la personne doit renseigner si elle est un professionnel ou un particulier et on lui affiche le header en fonction de son status.
Non ?
Cordialement,
La demande est étrange non ?
Quand on est connecté au site soit on est considéré comme particulier soit comme professionnel non ?
A l'inscription, la personne doit renseigner si elle est un professionnel ou un particulier et on lui affiche le header en fonction de son status.
Non ?
Cordialement,
28 janv. 2020 à 21:23
un bouton toggle que je traduit approximativement par un bouton qui alterne.
L'algorithme est assez simple:
IF A THEN C
IF B THEN D
Avec 2 valeurs à alterner seulement ça peut être simplifié en:
IF A THEN C
ELSE D
Quelle est votre difficulté où même votre question? Dur de vous répondre si vous n'en avez pas et de nous montrer vos scripts ne change rien au fait qu'on ne sait pas où vous coincez où même ce que vous voulez faire et n'arrivez pas à faire...
En vous passa t d'algorithme vous n'avez qu'à faire un lien vers le fichier PHP à charger lorsque vous en avez besoin...ça ne parais pas compliqué et je ne vois pas du tout la nécessité d'utiliser un script externe, surtout qu'il n'a aucun rapport avec votre sujet...
"C'est a dire, lorsqu'on clique sur Particulier, le menu particulier s'affiche et lorsqu'on clique sur professionnel on switche pour le menu professionnel. "
ça reviens plutôt à masquer/afficher des éléments, en PHP il faudra recharger forcément la page sinon JavaScript fait très bien cela en modifiant le CSS par exemple(mais il y a bien d'autres méthodes , ma préférée est siplement d'écrire le contenu quand on en a besoin ce qui supprime quelques problèmes inhérents aux éléments masqués):
https://www.w3schools.com/CSSref/pr_class_display.asp
28 janv. 2020 à 21:32
Plutôt qu'un "toggle qui permet de switcher"(vive le français hein^^ça aide pas à vous comprendre) vous pouvez simplement faire un bouton qui sur l'en-tête/bandeau(header si vous voulez) qui fait apparaître l'autre et masque celui en cours, et même chose pour l'autre.
Rien à voir avec PHP, JavaScript est uniquement client et fonctionne une fois la page chargée, PHP uniquement serveur et fonctionne avant (genre comme dans preprocessing) que la page s'affiche; sinon il vous faut utiliser AJAX(si il y a des données en lien avec la base à utiliser dans l'un ou l'autre des headers) ou bien recharger la page (ce qui reviens à faire un simple lien*).
'*Une règle utile aussi : La solution la plus simple est toujours la plus simple. Dans notre cas ça reviens à doubler les pages en 2 versions ou alors d'utiliser l'algorithme pour déterminer quel en-tête à charger (en prenant en compte que si l'un est présent on passe à l'autre- c'est celà que veut dire switch : interrupteur indiquant un état et excluant l'autre).