CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 02:20:34

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Javascript / DHTML

> BOÎTE À ONGLETS / MENUS ET SOUS-MENUS / JAVASCRIPT / PHP / DHTML

BOÎTE À ONGLETS / MENUS ET SOUS-MENUS / JAVASCRIPT / PHP / DHTML

Information sur la source

Note :

9,50 / 10

Catégorie :Javascript / DHTML Classé sous :menu, sous-menu, onglets, boîte, formulaire Niveau :Débutant Date de création :24/12/2008 Date de mise à jour :25/12/2008 14:14:26 Vu / téléchargé :7 825 / 1 011

Auteur : Heirem

Ecrire un message privé

Commentaire sur cette source (15)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Bonsoir,
C'est en partant d'une astuce Javascript, fournie ici :
http://www.css4design.com/blog/index.php/2006/07 /05/25-menu-a-onglet-avec-javascript-et-css
qui permet la mise en place d'un menu à onglet simple que je suis parti pour arriver vers où je n'ai pas trouvé d'équivalent. Une petite pincée de PHP et j'ai amélioré le tout à ma façon. A vous de juger.

Ne chercher pas une perfection en dehors des astuces fournies ici, ce script fait parti de mon "laboratoire" et n'est donc pas forcément exploitable tel que :) Merci.

Démo live ici : http://heirem.fr/ecforms/boite_onglets4.php

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Boîte à onglets / menus et sous-menus / Javascript / PHP / DHTML</title>
<style type="text/css">
<!--
body {
font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
color: #333;
margin: 0;
padding: 0;
}
#ecform_container {
position: relative;
width: 640px;
_height: 400px;
margin: 3em auto;
text-align: left;
}
#ecform_container * {
margin: 0;
padding: 0;
}
#ecform_title {
font-size: 1.7em;
font-weight: bold;
float: left;
}
#ecform_entete ul#menu {
position: relative;
float: right;
margin-right: 0;
/* Hack IE \*/
margin-right: 6px;
/* Hack IE \*/
}
#ecform_entete ul#menu li {
float: none;
/* Hack IE \*/
float: left;
/* Hack IE \*/
display: inline;
}
#ecform_entete ul#menu li a {
cursor: pointer;
cursor: hand;
text-align: center;
display: block;
width: 80px;
height: 25px;
line-height: 25px;
text-decoration: none;
border-top: thin #dcdcdc solid;
border-left: thin #dcdcdc solid;
border-right: thin #dcdcdc solid;
border-bottom: thin #e6e6fa solid;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
}
#ecform_container ul#menu li a.ghost:hover {
background-color: #b0c4de;
border-bottom: thin #e6e6fa solid;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
#ecform_container ul#menu li a.current:hover {
cursor: default;
border-bottom: thin #e6e6fa solid;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
#ecform_topbar {
clear: both;
font-size: x-small;
height: 22px;
padding-top: 5px;
padding-left: 25px;
border: thin #dcdcdc solid;
background-image:url(topbar-bg.gif);
_background-position:left top;
background-repeat:repeat-x;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
}
#ecform_btmbar {
font-size: x-small;
height: 33px;
padding-top: 5px;
padding-left: 25px;
border: thin #dcdcdc solid;
background-image:url(btmbar-bg.gif);
background-position:left top;
background-repeat:repeat-x;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
}
#ecform_btmbar ul .buttons {
position: relative;
float: right;
margin-right: 0;
/* Hack IE \*/
margin-right: 6px;
/* Hack IE \*/
}
#ecform_btmbar ul li {
float: none;
/* Hack IE \*/
float: left;
/* Hack IE \*/
display: inline;
}
#ecform_btmbar ul li a{
cursor: pointer;
cursor: hand;
font-weight: bold;
text-align: center;
display: block;
width: 80px;
height: 25px;
line-height: 25px;
text-decoration: none;
border: thin #c0c0c0 solid;
background-color: #f0f8ff;
-moz-border-radius: 10px;
}
#ecform_btmbar #btsubmit:hover {
background-color: #b0c4de;
}
#ecform_btmbar #btcancel:hover {
background-color: #b0c4de;
}
#ecform_btmbar #btsubmit:active {
background-color: #b0c4de;
margin-top: 4px;
margin-right: -4px;
}
#ecform_btmbar #btcancel:active {
background-color: #b0c4de;
margin-top: 4px;
margin-right: -4px;
margin-left: 4px;
}
#ecform_content {
clear: both;
height: 350px;
border-left: thin #dcdcdc solid;
border-right: thin #dcdcdc solid;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 1em;
overflow-x : hidden;
}
#ecform_content .titcontent {
float:left;
margin-top: 1em;
}
#ecform_entete a.current {
background-color: #b9dbed;
}
#ecform_entete a.ghost {
background-color: #f0f8ff;
}
#ecform_container .on {
display: block;
}
#ecform_container .off {
display: none;
}
.ecform_smenu{
position: relative;
float: right;
font-size: x-small;
margin-right: -1.4em !important;
}
#ecform_content .smcontent {
clear: both;
position: relative;
padding-top: 1em;
}
.ecform_smenu ul.smenu {
position: relative;
float: right;
margin-right: 0px;
/* Hack IE \*/
margin-right: 0px;
/* Hack IE \*/
}
.ecform_smenu ul.smenu li {
display: inline;
float: none;
/* Hack IE \*/
float: left;
/* Hack IE \*/
}
.ecform_smenu ul.smenu li a {
cursor: pointer;
cursor: hand;
text-align: center;
display: block;
width: 80px;
height: 20px;
line-height: 20px;
text-decoration: none;
border-top: thin #dcdcdc solid;
border-left: thin #dcdcdc solid;
border-right: thin #dcdcdc solid;
border-bottom: thin #e6e6fa solid;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
}
#ecform_container ul.smenu li a.sghost:hover {
background-color: #b0c4de;
border-bottom: thin #e6e6fa solid;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
#ecform_container ul.smenu li a.scurrent:hover {
cursor: default;
border-bottom: thin #e6e6fa solid;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
a.scurrent {
background-color: #cee4f2;
}
a.sghost {
background-color: #f0f8ff;
}
.son {
display: block;
}
.soff {
display: none;
}
-->
</style>
<script type="text/javascript">
<!--
function multiMenu(eltId) {
arrLinkId = new Array('_0','_1','_2','_3');
intNbLinkElt = new Number(arrLinkId.length);
arrClassLink = new Array('current','ghost');
strContent = new String()
for (i=0; i<intNbLinkElt; i++) {
strContent = "menu"+arrLinkId[i];
if ( arrLinkId[i] == eltId ) {
document.getElementById(arrLinkId[i]).className = arrClassLink[0];
document.getElementById(strContent).className = 'on content';
} else {
document.getElementById(arrLinkId[i]).className = arrClassLink[1];
document.getElementById(strContent).className = 'off content';
}
}
}
function multiSMenu(eltId,pfxContent,n,m) {
arrLinkId = new Array();
for (i=0; i<m; i++) {arrLinkId.push('s'+n+i);}
arrClassLink = new Array('scurrent','sghost');
strContent = new String()
for (j=0; j<arrLinkId.length; j++) {
strContent = pfxContent+arrLinkId[j];
if ( arrLinkId[j] == eltId ) {
document.getElementById(arrLinkId[j]).className = arrClassLink[0];
document.getElementById(strContent).className = 'son scontent';
} else {
document.getElementById(arrLinkId[j]).className = arrClassLink[1];
document.getElementById(strContent).className = 'soff scontent';
}
}
}
-->
</script>
</head>
<body>
<?php
/* Insertion d'un sous-menu
chaîne $pfxContent : préfix des div de contenu que l'on fait switcher
nombre $numMenu : N° du menu dans le script
array $strItems : Tableau des items de sous-menu
nombre $bwidth : on peut modifier la largeur des blocks de sous-menu
*/
function InsertSmenu( $pfxContent, $numMenu, $strItems = array(), $bwidth = 0) {
?> <div class="ecform_smenu">
<ul class="smenu">
<?php
$bwidth =($bwidth > 0) ? 'style ="width:'.$bwidth.'px;" ' : '';
for($i=0; $i<count($strItems); $i++) {
echo "\t\t".'<li class="smenu'.$i.'">'."\n\t\t";
echo '<a id="s'.$numMenu.$i.'" class="'.(($i == 0) ? 'scurrent':'sghost').'" onclick="multiSMenu(this.id,'."'".$pfxContent."'".','.$numMenu.','.count($strItems).')" alt="smenu_'.$numMenu.$i.'" '.$bwidth.'>'.$strItems[$i].'</a>'."\n";
echo "\t\t".'</li>'."\n";
}
?> </ul>
</div>
<?php
}
?>
<div id="ecform_container">
<div id="ecform_entete">
<span id="ecform_title">Titre de la boite</span>
<ul id="menu">
<li class="menu_0">
<a id="_0" class="current" onclick="multiMenu(this.id)" alt="menu0">Accueil</a>
</li>
<li class="menu_1">
<a id="_1" class="ghost" onclick="multiMenu(this.id)" alt="menu1">Menu 1</a>
</li>
<li class="menu_2">
<a id="_2" class="ghost" onclick="multiMenu(this.id)" alt="menu2">Menu 2</a>
</li>
<li class="menu_3">
<a id="_3" class="ghost" onclick="multiMenu(this.id)" alt="menu3">Conclusion</a>
</li>
</ul>
</div>
<div id="ecform_topbar">Top Bar</div>
<div id="ecform_content">
<div id="menu_0" class="on content">
<div class="titcontent">
<h2 >Accueil</h2>
<p>Texte Accueil ;)</p>
</div>
<?php echo InsertSmenu("smenu",0,array('S.Menu 1','S.Menu 2','S.Menu 3','S.Menu 4'));?>
<div class="smcontent">
<div id="smenus00" class="son scontent">
<h2>Sous Menu 1</h2>
<p>Texte sous menu 1 ;)</p>
</div>
<div id="smenus01" class="soff scontent">
<h2>Sous Menu 2</h2>
<p>Texte sous menu 2 ;)</p>
</div>
<div id="smenus02" class="soff scontent">
<h2>Sous Menu 3</h2>
<p>Texte sous menu 3 ;)</p>
</div>
<div id="smenus03" class="soff scontent">
<h2>Sous Menu 4</h2>
<p>Texte sous menu 4 ;)</p>
</div>
</div>
</div>
<div id="menu_1" class="off content">
<div class="titcontent">
<h2 >Titre Menu 1</h2>
<p>Texte menu 1 ;)</p>
</div>
<?php echo InsertSmenu("smenu",1,array('S.Menu 1','S.Menu 2','S.Menu 3','S.Menu 4'),60);?>
<div class="smcontent">
<div id="smenus10" class="son scontent">
<?php echo InsertForm1();?>
</div>
<div id="smenus11" class="soff scontent">
<h2>Sous Menu 2</h2>
<p>Texte sous menu 2 ;)</p>
</div>
<div id="smenus12" class="soff scontent">
<h2>Sous Menu 3</h2>
<p>Texte sous menu 3 ;)</p>
</div>
<div id="smenus13" class="soff scontent">
<h2>Sous Menu 4</h2>
<p>Texte sous menu 4 ;)</p>
</div>
</div>
</div>
<div id="menu_2" class="off content">
<div class="titcontent">
<h2 >Titre Menu 2</h2>
<p>Texte menu 2 ;)</p>
</div>
</div>
<div id="menu_3" class="off content">
<div class="titcontent">
<h2 >Conclusion</h2>
<p>Texte Conclusion ;)</p>
</div>
</div>
</div>
<div id="ecform_btmbar">
<ul id="ecform_buttons">
<li class="buttons">
<a id="btcancel" alt="Cancel">Annuler</a>
</li>
<li class="buttons">
<a id="btsubmit" onClick="document.forms.f.submit()" alt="Submit">Valider</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<?php
/*
Insertion d'un formulaire pour vérifier sa tenue dans la boîte
inspiré de l'excellent tuto ici : http://a-pellegrini.developpez.com/tutoriels/css/formulaire/
*/
function InsertForm1() {
?>
<link type="text/css" rel="stylesheet" href="form.css" />
<form id="monForm" action="#" method="post">
<fieldset>
<legend>Informations personnelles</legend>
<p>
<label for="form_firstname">Prénom : </label>
<input type="text" id="form_firstname" name="firstname" />
</p>
<p>
<label for="form_lastname">Nom : </label>
<input type="text" id="form_lastname" name="lastname" />
</p>
<p>
<label for="form_gender">Sexe : </label>
<input type="text" id="form_gender" name="gender" />
</p>
<p>
<label for="form_birthday">Date de naissance : </label>
<input type="text" id="form_birthday" name="birthday" />
</p>
<p>
<label for="form_address">Adresse : </label>
<input type="text" id="form_address" name="address" />
</p>
<p>
<label for="form_postal_code">Code postal : </label>
<input type="text" id="form_postal_code" name="postal_code" />
</p>
<p>
<label for="form_city">Ville : </label>
<input type="text" id="form_city" name="city" />
</p>
</fieldset>
</form>
<?php
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Boîte à onglets / menus et sous-menus / Javascript / PHP / DHTML</title>
<style type="text/css">
<!--
body {
	font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
	color: #333;
	margin: 0;
	padding: 0;
}

#ecform_container {
	position: relative;
	width: 640px;
	_height: 400px;
	margin: 3em auto;
	text-align: left;	
}
#ecform_container * {
	margin: 0;
	padding: 0;
}
#ecform_title {
	font-size: 1.7em;
	font-weight: bold;
	float: left;	
}
#ecform_entete ul#menu {
	position: relative;
	float: right;
	margin-right: 0;
	/* Hack IE \*/
	margin-right: 6px;
	/* Hack IE \*/	
}
#ecform_entete ul#menu li {
	float: none;
	/* Hack IE \*/
	float: left;
	/* Hack IE \*/
	display: inline;
}
#ecform_entete ul#menu li a {
  cursor: pointer;
	cursor: hand;
	text-align: center;
	display: block;
	width: 80px;
	height: 25px;
	line-height: 25px;
	text-decoration: none;
	border-top: thin #dcdcdc solid;
	border-left: thin #dcdcdc solid;
	border-right: thin #dcdcdc solid;
	border-bottom: thin #e6e6fa solid;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px; 
}
#ecform_container ul#menu li a.ghost:hover { 
	background-color: #b0c4de;
	border-bottom: thin #e6e6fa solid;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;	
}
#ecform_container ul#menu li a.current:hover {
  cursor: default;
  border-bottom: thin #e6e6fa solid;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;	
}
#ecform_topbar {
  clear: both;
  font-size: x-small;  
  height: 22px;
  padding-top: 5px;
  padding-left: 25px; 
  border: thin #dcdcdc solid;  
	background-image:url(topbar-bg.gif);
  _background-position:left top;
  background-repeat:repeat-x;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px; 
}
#ecform_btmbar {
  font-size: x-small;  
  height: 33px;
  padding-top: 5px;
  padding-left: 25px;  
  border: thin #dcdcdc solid;
	background-image:url(btmbar-bg.gif);
  background-position:left top;
  background-repeat:repeat-x;
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px;
}
#ecform_btmbar ul .buttons {
	position: relative;
	float: right;
	margin-right: 0;
	/* Hack IE \*/
	margin-right: 6px;
	/* Hack IE \*/	
}
#ecform_btmbar ul li {
	float: none;
	/* Hack IE \*/
	float: left;
	/* Hack IE \*/
	display: inline;
}
#ecform_btmbar ul li a{
  cursor: pointer;
  cursor: hand;
  font-weight: bold;
	text-align: center;
	display: block;
	width: 80px;
	height: 25px;
	line-height: 25px;
	text-decoration: none;
	border: thin #c0c0c0 solid;
	background-color: #f0f8ff;
	-moz-border-radius: 10px;
}
#ecform_btmbar #btsubmit:hover {
  background-color: #b0c4de;
}
#ecform_btmbar #btcancel:hover {
  background-color: #b0c4de;
}
#ecform_btmbar #btsubmit:active {
  background-color: #b0c4de;  
  margin-top: 4px;
  margin-right: -4px;
}
#ecform_btmbar #btcancel:active {
  background-color: #b0c4de;
  margin-top: 4px;
  margin-right: -4px;
  margin-left: 4px;
}
#ecform_content {
  clear: both;
  height: 350px;   
  border-left: thin #dcdcdc solid; 
  border-right: thin #dcdcdc solid;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  overflow-x : hidden;  
}
#ecform_content .titcontent {
  float:left; 
  margin-top: 1em;
}
#ecform_entete a.current {
	background-color: #b9dbed;	
}
#ecform_entete a.ghost  {
	background-color: #f0f8ff;
}
#ecform_container .on {
	display: block;
}
#ecform_container .off {
	display: none;
}
.ecform_smenu{
	position: relative;
	float: right;
	font-size: x-small;
	margin-right: -1.4em !important;
}
#ecform_content .smcontent {
  clear: both;
  position: relative;
  padding-top: 1em;
}
.ecform_smenu ul.smenu {
	position: relative;
	float: right;
	margin-right: 0px;
	/* Hack IE \*/
	margin-right: 0px;
	/* Hack IE \*/	
}
.ecform_smenu ul.smenu li {
	display: inline;
	float: none;
	/* Hack IE \*/
	float: left;
	/* Hack IE \*/
}
.ecform_smenu ul.smenu li a {
  cursor: pointer;
	cursor: hand;
	text-align: center;	
	display: block;
	width: 80px;
	height: 20px;
	line-height: 20px;
	text-decoration: none;
	border-top: thin #dcdcdc solid;
	border-left: thin #dcdcdc solid;
	border-right: thin #dcdcdc solid;
	border-bottom: thin #e6e6fa solid;
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px; 
}
#ecform_container ul.smenu li a.sghost:hover { 
	background-color: #b0c4de;
	border-bottom: thin #e6e6fa solid;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;	
}
#ecform_container ul.smenu li a.scurrent:hover {
  cursor: default;
  border-bottom: thin #e6e6fa solid;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;	
}
a.scurrent {
	background-color: #cee4f2;	
}
a.sghost  {
	background-color: #f0f8ff;
}
.son {
	display: block;
}
.soff {
	display: none;
}
-->
</style>
<script type="text/javascript">
<!--
function multiMenu(eltId) {
	arrLinkId = new Array('_0','_1','_2','_3');
	intNbLinkElt = new Number(arrLinkId.length);
	arrClassLink = new Array('current','ghost');
	strContent = new String()
	for (i=0; i<intNbLinkElt; i++) {
		strContent = "menu"+arrLinkId[i];
		if ( arrLinkId[i] == eltId ) {
			document.getElementById(arrLinkId[i]).className = arrClassLink[0];
			document.getElementById(strContent).className = 'on content';
		} else {
			document.getElementById(arrLinkId[i]).className = arrClassLink[1];
			document.getElementById(strContent).className = 'off content';
		}
	}	
}
function multiSMenu(eltId,pfxContent,n,m) {
  arrLinkId = new Array();
  for (i=0; i<m; i++) {arrLinkId.push('s'+n+i);}			
	arrClassLink = new Array('scurrent','sghost');
	strContent = new String()
	for (j=0; j<arrLinkId.length; j++) {
		strContent = pfxContent+arrLinkId[j];
		if ( arrLinkId[j] == eltId ) {
			document.getElementById(arrLinkId[j]).className = arrClassLink[0];
			document.getElementById(strContent).className = 'son scontent';			
		} else {
			document.getElementById(arrLinkId[j]).className = arrClassLink[1];
			document.getElementById(strContent).className = 'soff scontent';			
		}		
	}	
}
-->
</script>
</head>
<body>
<?php
/*  Insertion d'un sous-menu
    chaîne $pfxContent  : préfix des div de contenu que l'on fait switcher
    nombre $numMenu     : N° du menu dans le script
    array  $strItems    : Tableau des items de sous-menu
    nombre $bwidth      : on peut modifier la largeur des blocks de sous-menu
  */
function InsertSmenu( $pfxContent, $numMenu, $strItems = array(), $bwidth = 0) {
?>      	  <div class="ecform_smenu">
          	<ul class="smenu">
<?php
    $bwidth =($bwidth > 0) ? 'style ="width:'.$bwidth.'px;" ' : '';   
    for($i=0; $i<count($strItems); $i++) {
      echo "\t\t".'<li class="smenu'.$i.'">'."\n\t\t";
      echo '<a id="s'.$numMenu.$i.'" class="'.(($i == 0) ? 'scurrent':'sghost').'" onclick="multiSMenu(this.id,'."'".$pfxContent."'".','.$numMenu.','.count($strItems).')" alt="smenu_'.$numMenu.$i.'" '.$bwidth.'>'.$strItems[$i].'</a>'."\n";
      echo "\t\t".'</li>'."\n";
    }
?>       	  </ul>
    	      </div>
<?php
}
?>
<div id="ecform_container">
  <div id="ecform_entete">
  	<span id="ecform_title">Titre de la boite</span>
  	<ul id="menu">
  		<li class="menu_0">
  			<a id="_0" class="current" onclick="multiMenu(this.id)" alt="menu0">Accueil</a>
  		</li>
  		<li class="menu_1">
  			<a id="_1" class="ghost" onclick="multiMenu(this.id)" alt="menu1">Menu 1</a>
  		</li>
  		<li class="menu_2">
  			<a id="_2" class="ghost" onclick="multiMenu(this.id)" alt="menu2">Menu 2</a>
  		</li>
  		<li class="menu_3">
  			<a id="_3" class="ghost" onclick="multiMenu(this.id)" alt="menu3">Conclusion</a>
  		</li>
  	</ul>
  </div>
	<div id="ecform_topbar">Top Bar</div>
	<div id="ecform_content">
  	<div id="menu_0" class="on content">
  	  <div class="titcontent"> 
    		<h2 >Accueil</h2>
    		<p>Texte Accueil ;)</p>
    	</div>
    	<?php echo InsertSmenu("smenu",0,array('S.Menu 1','S.Menu 2','S.Menu 3','S.Menu 4'));?>
    	<div class="smcontent">
      	<div id="smenus00" class="son scontent">
      		<h2>Sous Menu 1</h2>
      		<p>Texte sous menu 1 ;)</p>
      	</div>  	
      	<div id="smenus01" class="soff scontent">
      		<h2>Sous Menu 2</h2>
      		<p>Texte sous menu 2 ;)</p>      		
      	</div>  	
      	<div id="smenus02" class="soff scontent">
      		<h2>Sous Menu 3</h2>
      		<p>Texte sous menu 3 ;)</p>
      	</div>  	
      	<div id="smenus03" class="soff scontent">
      		<h2>Sous Menu 4</h2>
      		<p>Texte sous menu 4 ;)</p>
      	</div>
      </div>  	
  	</div>
  	<div id="menu_1" class="off content">
  	  <div class="titcontent"> 
    		<h2 >Titre Menu 1</h2>
    		<p>Texte menu 1 ;)</p>
    	</div>
    	<?php echo InsertSmenu("smenu",1,array('S.Menu 1','S.Menu 2','S.Menu 3','S.Menu 4'),60);?>
    	<div class="smcontent">
      	<div id="smenus10" class="son scontent">
          <?php echo InsertForm1();?>      		
      	</div>  	
      	<div id="smenus11" class="soff scontent">
      		<h2>Sous Menu 2</h2>
      		<p>Texte sous menu 2 ;)</p>
      	</div>  	
      	<div id="smenus12" class="soff scontent">
      		<h2>Sous Menu 3</h2>
      		<p>Texte sous menu 3 ;)</p>
      	</div>  	
      	<div id="smenus13" class="soff scontent">
      		<h2>Sous Menu 4</h2>
      		<p>Texte sous menu 4 ;)</p>
      	</div>
      </div>    	
    </div>  	
  	<div id="menu_2" class="off content">
  	  <div class="titcontent"> 
    		<h2 >Titre Menu 2</h2>
    		<p>Texte menu 2 ;)</p>
    	</div>  	
  	</div> 	
  	<div id="menu_3" class="off content">
  	  <div class="titcontent"> 
    		<h2 >Conclusion</h2>
    		<p>Texte Conclusion ;)</p>
    	</div>  	
  	</div>
  </div>
  <div id="ecform_btmbar">
    <ul id="ecform_buttons">
      <li class="buttons">
        <a id="btcancel" alt="Cancel">Annuler</a>
      </li>  
      <li class="buttons">
        <a id="btsubmit" onClick="document.forms.f.submit()" alt="Submit">Valider</a>
      </li>  
    </ul>
  </div>
</div>
</div>
</body>
</html>
<?php
/*
  Insertion d'un formulaire pour vérifier sa tenue dans la boîte
  inspiré de l'excellent tuto ici : http://a-pellegrini.developpez.com/tutoriels/css/formulaire/
  */
function InsertForm1() {
?>
<link type="text/css" rel="stylesheet" href="form.css" />
<form id="monForm" action="#" method="post">
    <fieldset>
        <legend>Informations personnelles</legend>
        <p>
            <label for="form_firstname">Prénom : </label>
            <input type="text" id="form_firstname" name="firstname" />
        </p>
        <p>
            <label for="form_lastname">Nom : </label>
            <input type="text" id="form_lastname" name="lastname" />
        </p>
        <p>
            <label for="form_gender">Sexe : </label>
            <input type="text" id="form_gender" name="gender" />
        </p>
        <p>
            <label for="form_birthday">Date de naissance : </label>
            <input type="text" id="form_birthday" name="birthday" />
        </p>
        <p>
            <label for="form_address">Adresse : </label>
            <input type="text" id="form_address" name="address" />
        </p>
        <p>
            <label for="form_postal_code">Code postal : </label>
            <input type="text" id="form_postal_code" name="postal_code" />
        </p>
        <p>
            <label for="form_city">Ville : </label>
            <input type="text" id="form_city" name="city" />
        </p>
    </fieldset>
</form>
<?php
}
?>

Conclusion

Si cela peut servir, tant mieux. Si vous avez des suggestions d'améliorations, tant mieux aussi ;)
Cordialement

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

boite_onglets4.php 12 139 octets
btmbar-bg.gif 981 octets
form.css 1 303 octets
heirem-boite onglets.jpg 38 625 octets
topbar-bg.gif 955 octets

Télécharger le zip

Historique

24 décembre 2008 23:11:21 :: Ajout des sources dans le champs prévu à cet effet.
25 décembre 2008 14:14:26 :: J'ai ajouté un lien vers une démo live ici : http://heirem.fr/ecforms/boite_onglets4.php. Ce qui m'a permis de trouver un petit bug dans la déclaration d'un array. mais c'est un problème de version PHP différente entre WAMP et celle de mon hébergeur ;)

Sources de la même categorie

PETIT CLIENT + AJAX + PHP par kiki67100

JUKEBOX EN LIGNE par Flachy Joe

ONGLET GÉNÉRÉ EN PHP ET REQUETE AJAX par djmmix

LISTER DOSSIER AVEC UN ARBRE / TREE EN PHP / JAVASCRIPT par cyril6789

MAJAX UN TOOLS (AJAX EN PHP) par michelsto

Toutes les sources de la catégorie Javascript / DHTML

Sources en rapport avec celle ci

TESTEUR DE REGEX par hornetbzz

CRAWLER DE SITE EN PHP par Mcjo

FORMULAIRE EMAIL AVEC PIECE JOINTE REPRIS DE LITTLEBUBU par cfndiaye

CLASSE FORMULAIRE par wolfcyber95

MENU PHP QUI CHARGE UNE CLASSE LORS DE LA SELECTION par cosmoswarezone1

Commentaires et avis

Commentaire de guismo1er le 25/12/2008 13:35:13

une démo?

Commentaire de Heirem le 25/12/2008 14:15:44

Bonjour et Joyeux Noël ;)
J'ai ajouté un lien vers une démo live ici : http://heirem.fr/ecforms/boite_onglets4.php.
Ce qui m'a permis de trouver un petit bug dans la déclaration d'un array. Mais c'est plus un problème de version PHP, différente entre mon WAMP et celle de mon hébergeur ;)

Commentaire de guismo1er le 26/12/2008 13:32:30

intéressant, mais ce qui serait génial, lorsqu'on ne clique pas sur le formulaire, le bouton valider/annuler disparaitrait.

Qu'en dis tu?

Joyeux Noel à toi aussi.

Commentaire de Heirem le 26/12/2008 14:14:59

Bonjour guismo1er, oui évidement pleine de possibilités sont envisageables .. .. en fonction de ce que contient la boite évidement ! Mais là il s agissait de montrer un système de menus et sous menus simple et pratique ;)

Commentaire de Optitech le 02/01/2009 10:56:32

Salut,

Le graphisme est cool, je veins de regarder le résultat avec IE7,Firefox 3.0.5, Opéra 9.63, Safari 3.2.1 et Netscape 7.1. Dommage que le résultat comme sur la capture, n'est visible qu'avec Firefox 3.0.5. Sinon le résultat est presque bon avec Netscape 7.1 sauf pour les sous menu qui on u npetit problème de margin-top (ou padding-top). Sinon avec les autres c'est carré.

@++

Optitech

Commentaire de Heirem le 02/01/2009 18:52:03

Merci Optitech, effectivement les résultats sont variables suivant les navigateurs, surtout avec les coins arrondis n'est ce pas ? C'est dans mes tablettes de travailler sur les images de fond des menus afin d'harmoniser tout cela. Et puis pour le margin-top, j'ai du m'emmêler les pinceaux avec les hack CSS.

Pour l'heure je travaille à l'amélioration de cette boîte à onglets afin de lui intégrer une classe de génération de formulaires. Ensuite, sur la gestion de Dominique en mail privé, j'ajouterai un volet rétractable sur le coté gauche.

Je proposerai alors peut-être une nouvelle version. Si tout cela vous intéresse, faites le moi savoir ;)

Commentaire de Valentino le 07/01/2009 16:44:32 9/10

Bonjour Heirem,

Tout d'abord bravo pour ta source qui est esthétiquement réussi (surtout sous firefox ^_^)...
J'ai intégré une page dans ton interface et je n'arrive pas à agrandir mon <iframe> dans le div d'un menu :
<div class="titcontent">
<iframe style="width:90%; height:90%;">
test test test
<br />
bidule bidule <br />
</iframe>
</div>

A tu une idée ?

Commentaire de Heirem le 07/01/2009 20:29:16

Bonsoir Valentino,
Merci pour tes encouragements ;)
Ton contenu doit être intégré dans les DIV à l'ID "menu_x" (menu_0 à 9).
La classe 'titcontent' est là pour contenir le titre éventuel d'un panneau.
Cette classe existe pour ne pas gêner les onglets de sous-menus.
Maintenant, entre nous, je ne vois pas ce que viens faire un iframe là dedans ...

Cordialement

Commentaire de Kimjoa le 07/01/2009 21:53:06 10/10

très jolie source, très intéressante!! je l 'aurais posté plutôt sur javascriptfr.com ... marche même sous ie!! j'attends la suite 'une classe de génération de formulaires' avec impatience!
Je met cette source coté, pas le temps de regarder en détail le css , mais je note quand même :) merci a++!

Commentaire de Valentino le 08/01/2009 09:03:11

Heirem,
J'ai bien compris comment et ou intégrer mon contenu... c'était juste pour faire un essai en intégrant un page web déjà existante directement dans ta source via une <iframe>.
Pour être plus explicite voici un exemple concret :

                <div id="menu_0" class="on content">
                        <div class="titcontent">
<iframe name="com_frame" style="width:95%; height:90%;" src="coms.php" frameborder="0"></iframe>
                        </div>
                </div>

Résultat : l'iframe a une dimension fixe, peu importe les valeurs de width et height (en % ou px)...

A tu une idée ?

Commentaire de Heirem le 08/01/2009 11:08:47

Valentino,
Voilà ce que je te propose, je viens de le tester et cela fonctionne bien :
- Pour mieux se repérer allons voir les sources présente dans cette page.
- Tu va à la ligne 372, et tu effaces les trois lignes dessous, de 373 à 376.
- A la place tu insères ton iFrame.
- Avec les valeurs que tu désires en hauteur et largeur.
- Pour la hauteur, utilises des pixels.
Moi j'ai essayez comme cela :
./..
<div id="menu_2" class="off content">
<iframe name="com_frame" style="width:100%; height:350px;" src="http://fr.yahoo.com/" frameborder="0"></iframe>
</div>
./..
Et cela fonctionne très bien :)
Cordialement

Commentaire de Heirem le 08/01/2009 11:19:18

Merci Kimjoa,
Pour te dire la vérité j'ai terminé la classe de génération de formulaires adaptée à ma boîte. cela fonctionne bien pour le moment. Mais je peaufine la validation des champs et je suis en train d'écrire une classe javascript destinée à afficher, de façon simple pour le dévellopeur, des tooltips d'information ou d'alerte. Donc dès que tout sera cohérent, débugué et publiable je ferais une mise à jour ici :)

Commentaire de Valentino le 08/01/2009 11:30:43

Parfait ^_^

Merci beaucoup Heirem ;o)

Commentaire de jdaviaud le 27/08/2009 17:03:13

Tout d'abord merci pour cette excellente source qui représente exactement ce dont j'avais besoin

Le seul problème concerne toujours le pire des navigateurs, IE ...

Autant le résultat est parfait dans FireFox et Chrome ce qui est selon moi normal vu leur qualité ... mais sous IE la barre du bas n'en fait qu'à sa tete

J'ai fait des copies d'écran pour illustrer mon problème :

Firefox : http://www.jdsoft.net/bugie/firefox.gif
Chrome : http://www.jdsoft.net/bugie/chrome.gif
IE : http://www.jdsoft.net/bugie/ie.gif

Bien qu'en plus de cas les boutons sous IE sont un peu en "vrac" mon problème est surtout la barre du bas qui est à 3km du cadre et prend toute la largeur de la page, les boutons n'y apparraissent même pas

J'ai reprit ta source depuis le départ mais je ne vois pas de différence de code j'ai uniquemement changé le contenu des différentes pages appelées par le menu

Et ton exemple marche chez moi sur IE bien que les boutons du menu soit en vrac

Aurais tu une idée d'ou peut venir mon probleme ?
j'ai mi le code de la page dans un fichier texte si ca peut aider : http://www.jdsoft.net/bugie/code.txt

Merci d'avance et surtout merci pour cette excellente source encore une fois !

Commentaire de Gr3g69 le 21/01/2010 03:25:30

Hello Heirem,

Ton morceau de code fonctionne à merveille, çà ne m'as pas pris trop de temps a "corriger" l' affichage sous IE, mais bon ca reste IE ;-).

Toutefois, j'ai une question, et je ne trouves pas la solution.

J'aimerais pouvoir afficher des boutons à l'intérieur des sous menus (dans ton exemple, à l'intérieur de la fonction InsertForm1()...)

Je suis donc parti a priori sur un événement onClick="multiSMenu(s12,"smenu",1,7)"

Mais ça ne fonctionne pas ...

Ça m'ennuierais vraiment de devoir passer par des if, elseif, ... pour changer le contenu de la class "son scontent"/"soff scontent" cela reviendrais a copier les lignes ci-dessous autant de fois qu'il y a d'entrées dans mon sous-menu.

<div class="smcontent">
        <form id="monForm" action="" method="post">
       <div id="smenus10" class="son scontent">
          <?php echo InsertForm1();?>
       </div>
       <div id="smenus11" class="soff scontent">
       <?php echo InsertForm2();?>
       </div>
       <div id="smenus12" class="soff scontent">
       <?php echo InsertForm3();?>
       </div>
       <div id="smenus13" class="soff scontent">
       <?php  echo InsertForm4();?>
       </div>
        <div id="smenus14" class="soff scontent">
       <?php echo InsertForm5();?>
       </div>
        <div id="smenus15" class="soff scontent">
       <?php echo InsertForm6();?>
       </div>
        <div id="smenus16" class="soff scontent">
       <?php echo InsertForm0();?>
       </div>
        </form>
</div>   

Aurais-tu une idée ?

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Formulaire TRES URGENT [ par Dominike ] > Bonjour à tous avec une mention particulière pour celui ou celle qui m'apportera son aide.> Je suis juste un petit bidouilleur amateur et je m Menu déroulant [ par tweeder ] Ma question est fort simpleJe dois valider un formulaire mais sans perdre les données qui sont inscrites. Je réinscris dans le formulaire les données Prob Debutant - Validation d'1 formulaire par Menu Déroulant . [ par marcooo ] Bonjour a tous .J'esplique le problème ... Tout d'abord je tien a dire ke je débute dans le PHP/MySQL.Alors voila, je voudrai créer une sorte de moteu Formulaire: menu deroulant [ par xabivalencia ] bonjour,J ai un petit souci avec un menu deroulant.En effet, je veux faire apparaitre toutes les valeurs d un champs (y en a bcp mais en plus il peut Problème d'actualisation d'une page [ par Gourou34 ] Bonjour à tous, j'ai cherché tout aujourd'hui sur une mutitude de sites en tout genre mais je n'arrive pas à résoudre mon problème :J'ai créé un formu Menu déroulant cose à cocher formulaires [ par maxwellcs ] Bonjour à tous!!! Déja je vous remercie pour l'aide que vous m'avez apportez.J'ai posté plusieurs fois sur le forum et  jusqu'a p comment conserver un choix dans un menu déroulant [ par progDev ] Salut à tous, Voilà, j'ai un petit soucis. Je suis en train de créer un site avec un formulaire d'inscription : jusque là rien de Formulaire avec des onglets [ par LeDernierDesAnges ] Bonjour, Je souhaite développer en php uniquement un formulaire de très grande taille de près d'une cinquantaine de champs ou de listes formulaire php_envoi vers bbd et boîte email? [ par lulu la fontaine ] Bonjour à tous! Je suis actuellement en plein développement d'un site web...J'ai particulièrement une question à poser.Cela concerne envoi d'un form Formulaire [ par kanye1982 ] YoussBonjour tout le monde voila ma questionJe suis en train de faire un formulaire d'inscription en PHP ;) et j'aimerais avoir un petit coup de main,

Nos sponsors

Derniers Blogs

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

Forum

RE : FAIRE UN SELECT SUR UN CHAMP D'UN FORMULAIRE par 4lman78

RE : COMMENT FAIRE UN SELECT DISTINCT EN AYANT PLUSIEURS CHAMPS? par neigedhiver

RE : AFFICHER LES MESSAGES ET LES MARQUER COMME LU par patheo

RE : COMMENT FAIRE UN SELECT DISTINCT EN AYANT PLUSIEURS CHAMPS? par mailliam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5