Accueil > > > BOÎTE À ONGLETS / MENUS ET SOUS-MENUS / JAVASCRIPT / PHP / DHTML
BOÎTE À ONGLETS / MENUS ET SOUS-MENUS / JAVASCRIPT / PHP / DHTML
Information sur la source
Description
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
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
Commentaires et avis
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,
|
Derniers Blogs
UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
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
|