Créer des onglets à la volée

Bonjour,

Je voudrais créer des onglets à la volée. Quelqu'un aurait-il une idée de
comment faire pour rajouter (ou supprimer) un onglet à des onglets déja
existants et si possible sans recharger la page (via ajax) ?

Merci,

Olivier.

Dans ton cas, qu'est ce que tu appelles "onglets" précisément ?

--
Olivier Ligny
Créateur web free-lance / www.cyber-tamtam.net

Quelque chose d'évolué comme cela :
http://onlinetools.org/tools/domtabdata/
ou encore
http://webfx.eae.net/dhtml/tabpane/demo.html

Dans ces 2 exemples, les onglets sont créés durant le onload du body et je
n'ai pas trouvé le moyen de les modifier une fois créés !

"O.L." <xarnax_nospam@nospam-yahoo.fr> a écrit dans le message de news:
mn.431d7d685e1a2a7b.18740@nospam-yahoo.fr...

Bonjour,

Je voudrais créer des onglets à la volée. Quelqu'un aurait-il une idée de
comment faire pour rajouter (ou supprimer) un onglet à des onglets déja
existants et si possible sans recharger la page (via ajax) ?

Merci,

Olivier.

Dans ton cas, qu'est ce que tu appelles "onglets" précisément ?

--
Olivier Ligny
Créateur web free-lance / www.cyber-tamtam.net

salut
j'ai fait un truc de ce genre (bon je suis pas un pro de javascript :) )
en gros dans ton composant javascript tabContainer dans sa method addTab,
tu pourrais faire :
...
//add un tab dans le container
...
elt = document.getElementById(tabContainer.id)
if (elt != undefined) {
//regenére le HTML du container
elt.innerHTML = tabContainer.getHTML()
}
...
didier



"OAM" <olivier.amram@free.fr> wrote in message
news:eba0io$vk8$1@s1.news.oleane.net...

Quelque chose d'évolué comme cela :
http://onlinetools.org/tools/domtabdata/
ou encore
http://webfx.eae.net/dhtml/tabpane/demo.html

Dans ces 2 exemples, les onglets sont créés durant le onload du body et je
n'ai pas trouvé le moyen de les modifier une fois créés !

"O.L." <xarnax_nospam@nospam-yahoo.fr> a écrit dans le message de news:
mn.431d7d685e1a2a7b.18740@nospam-yahoo.fr...

Bonjour,

Je voudrais créer des onglets à la volée. Quelqu'un aurait-il une idée
de comment faire pour rajouter (ou supprimer) un onglet à des onglets
déja existants et si possible sans recharger la page (via ajax) ?

Merci,

Olivier.

Dans ton cas, qu'est ce que tu appelles "onglets" précisément ?

--
Olivier Ligny
Créateur web free-lance / www.cyber-tamtam.net

j'ai fait un truc de ce genre (bon je suis pas un pro de javascript :) )
en gros dans ton composant javascript tabContainer dans sa method addTab,
tu pourrais faire :
...
//add un tab dans le container
...
elt = document.getElementById(tabContainer.id)
if (elt != undefined) {
//regenére le HTML du container
elt.innerHTML = tabContainer.getHTML()
}
...

Je ne connais pas la fonction getHTML() (mais je suis très loin d'être un
pro du javascript). C'est une fonction à construire ? Je n'ai rien trouvé
avec mon ami google sur le sujet.

Peux-tu m'en dire plus ? un exemple qui fonctionne (en abusant) ?

Merci d'avance,

Olivier.

On 2006-08-09 10:56:11 +0200, "OAM" <olivier.amram@free.fr> said:

j'ai fait un truc de ce genre (bon je suis pas un pro de javascript :) )
en gros dans ton composant javascript tabContainer dans sa method addTab,
tu pourrais faire :
...
//add un tab dans le container
...
elt = document.getElementById(tabContainer.id)
if (elt != undefined) {
//regenére le HTML du container
elt.innerHTML = tabContainer.getHTML()
}
...

Je ne connais pas la fonction getHTML() (mais je suis très loin d'être
un pro du javascript). C'est une fonction à construire ? Je n'ai rien
trouvé avec mon ami google sur le sujet.

Peux-tu m'en dire plus ? un exemple qui fonctionne (en abusant) ?

Merci d'avance,

Olivier.

Hum, pour revenir à ta question initiale (car là on s'embrouille...
getHTML n'est pas une fonction JS standart, probablement qq chose
d'issu d'un script X / Y ).


Comment ajouter, supprimer des onglets dynamiquement ...

Pour faire simple, la deuxieme url que tu donnes appelle un script
relativement simple à utiliser.
( pour rappel : http://webfx.eae.net/dhtml/tabpane/demo.html )

on voit dans la source html :

l'appel au js externe
http://webfx.eae.net/dhtml/tabpane/js/tabpane.js (lien vers le script
qui nous intéresse en tout cas)


Une balise div contenu
<div class="tab-page" id="tabPage1">
<h2 class="tab">General</h2>

<script type="text/javascript">tp1.addTabPage(
document.getElementById( "tabPage1" ) );</script>
(ici du contenu... )
</div>


Pour pouvoir ajouter des onglets à la volée en utilisant ce script
externe (attention : licence apache 2.0 cf source), tu peux faire
quelque chose du genre :



function _addTab (tabPane, content){ /* tabPane : ref de ton
gestionnaire d'onglet, content : ton contenu*/
var myTag = document.createElement ("DIV");
myTag.className = 'tab-page'; /* la classe CSS est utilisée dans
le script tabpane.js */
myTag.innerHTML = content; /* ce n'est qu'un exemple ... à toi
de customiser, par ex via un appel AJAX ... */
document.getElementsByTagName ("BODY")[0].appendChild (myTag);
/* là on ajoute au <BODY> ton nouveau tag */

tabPane.addTabePage (myTag); /* Et enfin on ajoute au gestionnaire
d'onglet ton tag ...*/
}


et là tu te mets un bouton avec onclick="javascript:_addTab (.. ... )"
par exemple pour voir normalement s'ajouter des onglets à la volée ...
Je ne l'ai pas testé, tjrs est il que c'est dans cet ordre d'idée.
Mais, il vaut mieux maitriser le code qu'on utilise, car tu tomberas
probablement sur des lacunes (gestion des dépassements lorsque beaucoup
d'onglets ?), ou sur des fonctionnalités que tu aimerais ajouter (la
suppression des onglets par ex ... ).


--


-- -- -- -- -- -- -- -- -- -- -- -- -- --
http://schoenenberger.free.fr

Pour faire simple, la deuxieme url que tu donnes appelle un script
relativement simple à utiliser.
( pour rappel : http://webfx.eae.net/dhtml/tabpane/demo.html )

on voit dans la source html :

l'appel au js externe
http://webfx.eae.net/dhtml/tabpane/js/tabpane.js (lien vers le script qui
nous intéresse en tout cas)


Une balise div contenu
<div class="tab-page" id="tabPage1">
<h2 class="tab">General</h2>

<script type="text/javascript">tp1.addTabPage( document.getElementById(
"tabPage1" ) );</script>
(ici du contenu... ) </div>


Pour pouvoir ajouter des onglets à la volée en utilisant ce script externe
(attention : licence apache 2.0 cf source), tu peux faire quelque chose du
genre :



function _addTab (tabPane, content){ /* tabPane : ref de ton gestionnaire
d'onglet, content : ton contenu*/
var myTag = document.createElement ("DIV");
myTag.className = 'tab-page'; /* la classe CSS est utilisée dans le script
tabpane.js */
myTag.innerHTML = content; /* ce n'est qu'un exemple ... à toi de
customiser, par ex via un appel AJAX ... */
document.getElementsByTagName ("BODY")[0].appendChild (myTag);
/* là on ajoute au <BODY> ton nouveau tag */

tabPane.addTabePage (myTag); /* Et enfin on ajoute au gestionnaire
d'onglet ton tag ...*/
}


et là tu te mets un bouton avec onclick="javascript:_addTab (.. ... )" par
exemple pour voir normalement s'ajouter des onglets à la volée ...
Je ne l'ai pas testé, tjrs est il que c'est dans cet ordre d'idée.
Mais, il vaut mieux maitriser le code qu'on utilise, car tu tomberas
probablement sur des lacunes (gestion des dépassements lorsque beaucoup
d'onglets ?), ou sur des fonctionnalités que tu aimerais ajouter (la
suppression des onglets par ex ... ).

Merci pour ton aide. Je viens d'essayer et sauf erreur de ma part cela ne
fonctionne pas !

Voici mon code si tu as un moment pour le tester

-------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Onglet dynamique</title>

<link id="webfx-tab-style-sheet" type="text/css" rel="stylesheet"
href="TabPane.css" />
<style type="text/css">
.dynamic-tab-pane-control .tab-page {
height: 300px;
}
.dynamic-tab-pane-control.tab-pane {
position: relative;
width: 600px;
}
</style>

<script type="text/javascript">
<!--//
function _addTab (tabPane, content) {
/* tabPane : ref de ton gestionnaire d'onglet, content : ton contenu*/

var myTag = document.createElement ("DIV");
myTag.className = 'tab-page'; /* la classe CSS est utilisée dans le
script tabpane.js */
myTag.innerHTML = content; /* ce n'est qu'un exemple ... à toi de
customiser, par ex via un appel AJAX ... */
document.getElementsByTagName ("body")[0].appendChild (myTag); /* là on
ajoute au <BODY> ton nouveau tag */
tabPane.addTabPage (myTag); /* Et enfin on ajoute au gestionnaire
d'onglet ton tag ...*/
}
//-->
</script>
<script type="text/javascript" src="TabPane.js"></script>
</head>

<body>



<!-- DEBUT DE L'ONGLET -->
<div class="tab-pane" id="tabPane1">

<script type="text/javascript">
tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ),false );
</script>

<div class="tab-page" id="tabPage1">
<h2 class="tab">General</h2>
<script type="text/javascript">tp1.addTabPage( document.getElementById(
"tabPage1" ) );</script>
Ceci est le texte de l'onglet n°=1
</div>

<div class="tab-page" id="tabPage2">
<h2 class="tab">Security</h2>
<script type="text/javascript">tp1.addTabPage( document.getElementById(
"tabPage2" ) );</script>
Ceci est le texte de l'onglet n°=2
</div>

<div class="tab-page" id="tabPage3">
<h2 class="tab">Privacy</h2>
<script type="text/javascript">tp1.addTabPage( document.getElementById(
"tabPage3" ) );</script>
Ceci est le texte de l'onglet n°=3
</div>

<div class="tab-page" id="tabPage4">
<h2 class="tab">Content</h2>
<script type="text/javascript">tp1.addTabPage( document.getElementById(
"tabPage4" ) );</script>
Ceci est le texte de l'onglet n°=4
</div>

</div>

<script type="text/javascript">
//<![CDATA[
//setupAllTabs();
//]]>
</script>
<!-- FIN DE L'ONGLET -->

<form action="" method="get">
<input type="button" name="versonglet2" value="Activer l'onglet 2
(indice=1)" onclick="tp1.setSelectedIndex(1)"/>
<input type="button" name="Button1" value="Ajouter un onglet"
onclick="javascript:_addTab ('tab-pane','Essai')" >
<input type="button" name="Button2" value="Voir le code"
onclick="alert(tabPane1.innerHTML);">
</form>

<hr />

</body>
</html>
-------------------------------------------------------------------------------------------------------------------------

On 2006-08-09 14:01:09 +0200, "OAM" <olivier.amram@free.fr> said:

Pour faire simple, la deuxieme url que tu donnes appelle un script
relativement simple à utiliser.
( pour rappel : http://webfx.eae.net/dhtml/tabpane/demo.html )

on voit dans la source html :

l'appel au js externe
http://webfx.eae.net/dhtml/tabpane/js/tabpane.js (lien vers le script
qui nous intéresse en tout cas)


Une balise div contenu
<div class="tab-page" id="tabPage1">
<h2 class="tab">General</h2>

<script type="text/javascript">tp1.addTabPage( document.getElementById(
"tabPage1" ) );</script>
(ici du contenu... ) </div>


Pour pouvoir ajouter des onglets à la volée en utilisant ce script
externe (attention : licence apache 2.0 cf source), tu peux faire
quelque chose du genre :



function _addTab (tabPane, content){ /* tabPane : ref de ton
gestionnaire d'onglet, content : ton contenu*/
var myTag = document.createElement ("DIV");
myTag.className = 'tab-page'; /* la classe CSS est utilisée dans le
script tabpane.js */
myTag.innerHTML = content; /* ce n'est qu'un exemple ... à toi de
customiser, par ex via un appel AJAX ... */
document.getElementsByTagName ("BODY")[0].appendChild (myTag);
/* là on ajoute au <BODY> ton nouveau tag */

tabPane.addTabePage (myTag); /* Et enfin on ajoute au gestionnaire
d'onglet ton tag ...*/
}


et là tu te mets un bouton avec onclick="javascript:_addTab (.. ... )"
par exemple pour voir normalement s'ajouter des onglets à la volée ...
Je ne l'ai pas testé, tjrs est il que c'est dans cet ordre d'idée.
Mais, il vaut mieux maitriser le code qu'on utilise, car tu tomberas
probablement sur des lacunes (gestion des dépassements lorsque beaucoup
d'onglets ?), ou sur des fonctionnalités que tu aimerais ajouter (la
suppression des onglets par ex ... ).

Merci pour ton aide. Je viens d'essayer et sauf erreur de ma part cela
ne fonctionne pas !

Voici mon code si tu as un moment pour le tester

-------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE

html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Onglet dynamique</title>

<link id="webfx-tab-style-sheet" type="text/css" rel="stylesheet"
href="TabPane.css" />
<style type="text/css">
.dynamic-tab-pane-control .tab-page {
height: 300px;
}
.dynamic-tab-pane-control.tab-pane {
position: relative;
width: 600px;
}
</style>

<script type="text/javascript">
<!--//
function _addTab (tabPane, content) {
/* tabPane : ref de ton gestionnaire d'onglet, content : ton contenu*/

var myTag = document.createElement ("DIV");
myTag.className = 'tab-page'; /* la classe CSS est utilisée dans le
script tabpane.js */
myTag.innerHTML = content; /* ce n'est qu'un exemple ... à toi de
customiser, par ex via un appel AJAX ... */
document.getElementsByTagName ("body")[0].appendChild (myTag); /* là
on ajoute au <BODY> ton nouveau tag */
tabPane.addTabPage (myTag); /* Et enfin on ajoute au gestionnaire
d'onglet ton tag ...*/
}
//-->
</script>
<script type="text/javascript" src="TabPane.js"></script>
</head>

<body>



<!-- DEBUT DE L'ONGLET -->
<div class="tab-pane" id="tabPane1">

<script type="text/javascript">
tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ),false );
</script>

<div class="tab-page" id="tabPage1">
<h2 class="tab">General</h2>
<script type="text/javascript">tp1.addTabPage(
document.getElementById( "tabPage1" ) );</script>
Ceci est le texte de l'onglet n°=1
</div>

<div class="tab-page" id="tabPage2">
<h2 class="tab">Security</h2>
<script type="text/javascript">tp1.addTabPage(
document.getElementById( "tabPage2" ) );</script>
Ceci est le texte de l'onglet n°=2
</div>

<div class="tab-page" id="tabPage3">
<h2 class="tab">Privacy</h2>
<script type="text/javascript">tp1.addTabPage(
document.getElementById( "tabPage3" ) );</script>
Ceci est le texte de l'onglet n°=3
</div>

<div class="tab-page" id="tabPage4">
<h2 class="tab">Content</h2>
<script type="text/javascript">tp1.addTabPage(
document.getElementById( "tabPage4" ) );</script>
Ceci est le texte de l'onglet n°=4
</div>

</div>

<script type="text/javascript">
//<![CDATA[
//setupAllTabs();
//]]>
</script>
<!-- FIN DE L'ONGLET -->

<form action="" method="get">
<input type="button" name="versonglet2" value="Activer l'onglet 2
(indice=1)" onclick="tp1.setSelectedIndex(1)"/>
<input type="button" name="Button1" value="Ajouter un onglet"
onclick="javascript:_addTab ('tab-pane','Essai')" >
<input type="button" name="Button2" value="Voir le code"
onclick="alert(tabPane1.innerHTML);">
</form>

<hr />

</body>
</html>
-------------------------------------------------------------------------------------------------------------------------

Yes,

remplace la fonction par :

Ce que j'ai changé : ajout d'un deuxieme tag DIV avec nom de classe "TAB" :

function _addTab (tabPane, content) {
/* tabPane : ref de ton gestionnaire d'onglet, content : ton contenu*/

var myTag = document.createElement ("DIV");
myTag.className = 'tab-page'; /* la classe CSS est utilisée dans le
script tabpane.js */
myTag
var myTag2 = document.createElement ("DIV");
myTag2.className = 'tab';
myTag2.innerHTML = content; /* ce n'est qu'un exemple ... à toi de
customiser, par ex via un appel AJAX ... */
myTag.appendChild (myTag2);
document.getElementsByTagName ("body")[0].appendChild (myTag); /* là
on ajoute au <BODY> ton nouveau tag */
tabPane.addTabPage (myTag); /* Et enfin on ajoute au gestionnaire
d'onglet ton tag ...*/
}


en l'occurence il te faut une arborescence :
<div class="tab-page">
<div clas="tab">
blabla
</div>
</div>

Sinon, l'objet WebFxPane ne s'initialise pas.
(cf tabpane.js dans le constructeur :

var cs = el.childNodes;
for (var i = 0; i < cs.length; i++) {
if (cs[i].nodeType == 1 && cs[i].className == "tab") {
this.tab = cs[i];
break;
}
}
)


autrement corrige aussi le onclick sur "Ajouter un onglet"
:
onclick="javascript:_addTab (tp1,'Essai')"
il faut une référence en parametre et non un id.


Là en tout cas ça s'ajoute après test.

--

-- -- -- -- -- -- -- -- -- -- -- -- -- --
http://schoenenberger.free.fr

remplace la fonction par :
Ce que j'ai changé : ajout d'un deuxieme tag DIV avec nom de classe "TAB"
:

function _addTab (tabPane, content) {
/* tabPane : ref de ton gestionnaire d'onglet, content : ton contenu*/

var myTag = document.createElement ("DIV");
myTag.className = 'tab-page'; /* la classe CSS est utilisée dans le
script tabpane.js */
myTag
var myTag2 = document.createElement ("DIV");
myTag2.className = 'tab';
myTag2.innerHTML = content; /* ce n'est qu'un exemple ... à toi de
customiser, par ex via un appel AJAX ... */
myTag.appendChild (myTag2);
document.getElementsByTagName ("body")[0].appendChild (myTag); /* là on
ajoute au <BODY> ton nouveau tag */
tabPane.addTabPage (myTag); /* Et enfin on ajoute au gestionnaire
d'onglet ton tag ...*/
}


en l'occurence il te faut une arborescence :
<div class="tab-page">
<div clas="tab">
blabla
</div>
</div>

Merci cela fonction quasi parfaitement. Le problème que j'ai maintenant
c'est que le contenu (texte de l'onglet) que je veux rajouter s'affiche en
dehors de l'onglet et j'en perds mon latin (mais bon je ne suis pas très bon
en javascript). (au fait le 2nd DIV de ton code est en fait un H2 si je ne
m'abuse)

Voila la fonction que j'ai modifiée :

function _addTab (tabPane, nameTab, contentTab) {
/* tabPane : ref de ton gestionnaire d'onglet, content : ton contenu*/

var myTag = document.createElement ("DIV");
myTag.className = 'tab-page2'; /* la classe CSS est utilisée dans le
script tabpane.js */
//myTag.id = 'tabpage5'; /* la classe CSS est utilisée dans le script
tabpane.js */

var myTag2 = document.createElement ("h2");
myTag2.className = 'tab';
myTag2.innerHTML = nameTAb; /* ce n'est qu'un exemple ... à toi de
customiser, par ex via un appel AJAX ... */
myTag.appendChild (myTag2);

var textPane = document.createTextNode("");
textPane.data = contentTab;
myTag.appendChild(textPane);

document.getElementsByTagName ("body")[0].appendChild (myTag); /* là on
ajoute au <BODY> ton nouveau tag */
tabPane.addTabPage (myTag); /* Et enfin on ajoute au gestionnaire
d'onglet ton tag ...*/
}

et je l'appel ainsi :

onclick="javascript:_addTab (tp1,'Essai','Contenu')"

As tu une idée ?


Sinon ce que je ne comprends pas la partie de ton code, où tu ajaoutes le
nouveau tag au body

document.getElementsByTagName ("body")[0].appendChild (myTag);

avant de l'ajouter au gestionnaire d'onglet

tabPane.addTabPage (myTag);

Merci d'avance pour ta lumière sur ce point.

Olivier.

On 2006-08-10 11:29:14 +0200, "OAM" <olivier.amram@free.fr> said:

remplace la fonction par :
Ce que j'ai changé : ajout d'un deuxieme tag DIV avec nom de classe "TAB" :

function _addTab (tabPane, content) {
/* tabPane : ref de ton gestionnaire d'onglet, content : ton contenu*/

var myTag = document.createElement ("DIV");
myTag.className = 'tab-page'; /* la classe CSS est utilisée dans le
script tabpane.js */
myTag
var myTag2 = document.createElement ("DIV");
myTag2.className = 'tab';
myTag2.innerHTML = content; /* ce n'est qu'un exemple ... à toi de
customiser, par ex via un appel AJAX ... */
myTag.appendChild (myTag2);
document.getElementsByTagName ("body")[0].appendChild (myTag); /* là on
ajoute au <BODY> ton nouveau tag */
tabPane.addTabPage (myTag); /* Et enfin on ajoute au gestionnaire
d'onglet ton tag ...*/
}


en l'occurence il te faut une arborescence :
<div class="tab-page">
<div clas="tab">
blabla
</div>
</div>

Merci cela fonction quasi parfaitement. Le problème que j'ai maintenant
c'est que le contenu (texte de l'onglet) que je veux rajouter s'affiche
en dehors de l'onglet et j'en perds mon latin (mais bon je ne suis pas
très bon en javascript). (au fait le 2nd DIV de ton code est en fait un
H2 si je ne m'abuse)

Voila la fonction que j'ai modifiée :

function _addTab (tabPane, nameTab, contentTab) {
/* tabPane : ref de ton gestionnaire d'onglet, content : ton contenu*/

var myTag = document.createElement ("DIV");
myTag.className = 'tab-page2'; /* la classe CSS est utilisée dans le
script tabpane.js */
//myTag.id = 'tabpage5'; /* la classe CSS est utilisée dans le
script tabpane.js */

var myTag2 = document.createElement ("h2");
myTag2.className = 'tab';
myTag2.innerHTML = nameTAb; /* ce n'est qu'un exemple ... à toi de
customiser, par ex via un appel AJAX ... */
myTag.appendChild (myTag2);

var textPane = document.createTextNode("");
textPane.data = contentTab;
myTag.appendChild(textPane);

document.getElementsByTagName ("body")[0].appendChild (myTag); /* là
on ajoute au <BODY> ton nouveau tag */
tabPane.addTabPage (myTag); /* Et enfin on ajoute au gestionnaire
d'onglet ton tag ...*/
}

et je l'appel ainsi :

onclick="javascript:_addTab (tp1,'Essai','Contenu')"

As tu une idée ?


Sinon ce que je ne comprends pas la partie de ton code, où tu ajaoutes
le nouveau tag au body

document.getElementsByTagName ("body")[0].appendChild (myTag);

avant de l'ajouter au gestionnaire d'onglet

tabPane.addTabPage (myTag);

Merci d'avance pour ta lumière sur ce point.

Olivier.

Pour ta fonction : 2 détails, le premier :
Tu as mal saisi la classe css, ca ne peut pas marcher avec le mauvais nom :

myTag.className = 'tab-page2'; /* la classe CSS est utilisée dans le
script tabpane.js */

ici, il faut lire à l'origine classname = 'tab-page';

Autrement, effectivement au lieu d'ajouter au body, il faut mettre le
tag crée dans le tag principal des onglets :
document.getElementById('tabPane1').appendChild(myTag);
à la place de

document.getElementsByTagName ("body")[0].appendChild (myTag);

--

-- -- -- -- -- -- -- -- -- -- -- -- -- --
http://schoenenberger.free.fr

Pour ta fonction : 2 détails, le premier :
Tu as mal saisi la classe css, ca ne peut pas marcher avec le mauvais nom
:

myTag.className = 'tab-page2'; /* la classe CSS est utilisée dans le
script tabpane.js */

ici, il faut lire à l'origine classname = 'tab-page';

Autrement, effectivement au lieu d'ajouter au body, il faut mettre le tag
crée dans le tag principal des onglets :
document.getElementById('tabPane1').appendChild(myTag);
à la place de

document.getElementsByTagName ("body")[0].appendChild (myTag);

MERCI cela fonctionne parfaitement.
Vraiment sympa de m'avoir dépanné !!!