Fonction qui ne fonctionne que par onclickRésolu

Question

Bonjour a tous, Voila mon probleme sur lequel je me casse la tete depuis quelques heures est en rapport avec une biblioteque que j'ai trouver sur le net : jaria (Tapez le texte de l'url ici. Cette biblioteque permet de géré une page sous forme d'onglet un peu comme un navigateur internet. Mon probleme est que je voudrai cacher des onglet suivant les données d'un formulaire préalable. La biblioteque possede deja la fonction qui permet de cacher mais voila cela ne fonctionne pas, si je veux cacher des onglet il faut que je créer un bouton et sur l'évenement onclick je place la fonction. Je voudrais tout simplement appeler cette fonction sans bouton mais rien a faire. voici un bout de code pour mieu visualiser la chose Et la fonction pour cacher est oTab.del("Nom_de_la_page") Merci d'avance pour toute réponse

etu54 · Accepted Answer

Merci a tous pour toutes ces suggestions. Finalement j'ai simplement utiliser le css de jaria car c'était la meilleure solution pour faire ce que je voulais.

Encore merci a vous tous

PetoleTeam · Answer

Bonjour,
je viens d'aller voir la source, cela fait beaucoup à charger pour une simple gestion par onglet

néanmoins le oTab est un array donc tu dois pouvoir accéder à l'onglet qui t'intéresse par ce biais et tu en fait ce que tu veux...

Sinon il existe des gestion par onglet avec 10 lignes de code, un peu de CSS et une bonne hiérarchisation des éléments

;O)

PetoleTeam · Answer

en revisualisant la page j'ai vu qu'il y avait un lien pour
Ajoutez un commentaire sur le blog JARIA  
qui mieux que lui pourra te répondre !

;O)

jparia · Answer

Bonjour,
d'abord, la function oTab.del() ne cache pas l'objet onglet mais le supprime définitivement.

Pour l'utiliser en dehors de l'évènement onclick d'un bouton, il suffit de l'appeler comme ceci:

oTab.del("libelle de l'onglet");

Si l'on veut supprimer un onglet donc le libellé est "Bienvenue" par exemple, il suffit d'appeler la fonction:

oTab.del("Bienvenue");

etu54 · Answer

Merci a tous pour avoir pri le temps de répondre.

jparia c'est la mon probleme. L'apelle de la fonction qui supprime ne fonctionne que sur un evenement et si je l'appelle simplement cela ne fonctionne pas.

Je vais aussi poser la question sur le blog de Jaria tu a raison PetoleTeam.

Et si tu connais d'autres gestions par onglets je suis preneur.

jparia · Answer

je ne sais pas comment tu appelles la fonction oTab.del() mais il n'est pas nécessaire de l'appeler par un évènement.
tu peux l'appeler dans une fonction par exemple.
Attention! le tabuleur doit-être initialiser.


function MaFonction()
{
  oTab.del("mon libellé");
}


si tu n'y arrive pas, montre nous le code source de l'appel de cette fonction ;)

etu54 · Answer

Voila mon code Et rien a faire cela ne fonctionne pas, j'ai tout essayer

jparia · Answer

Oui c'est bien ce que je pensais, tu appelles la fonction cacher() avant le chargement complet de la page, donc avant l'appel de la fonction Load().

Je ne comprend pas trop l'intérêt de faire cela d'ailleurs, ça revient à ne pas créer l'onglet "Tuyauterie" par la fonction:

oTab.add ("Tuyauterie", "tuyauterie.php");

etu54 · Answer

Si je doi le créer mais en fonction d'un formulaire préalable je doit cacher certains onglets qui ne doivent pas etre visible

jparia · Answer

En gros tu voudrais faire cela:

[code=js]
<script type="text/javascript" language="JavaScript">
<!--
  function Load(){
    /* hauteur du frame (300 par défaut) */
    oTab.height = 400;
    oTab.show ("cadre");

    /* ajoute les onglets de tabulation */
    oTab.add ("Chaudronnerie", "chaudronnerie.php");
    oTab.add ("Tuyauterie", "tuyauterie.php");
    oTab.add ("Maintenance", "maintenance_travaux.php");
    oTab.add ("Mécanique", "mecanique_travaux.php");
    oTab.add ("Electrique", "electrique_travaux.php");
%0

etu54 · Answer

desolé je n'ai pas compris ton dernier post

jparia · Answer

En gros tu voudrais faire cela:

[code=js]
<script type="text/javascript" language="JavaScript">
<!--
  function Load(){
    /* hauteur du frame (300 par défaut) */
    oTab.height = 400;
    oTab.show ("cadre");

    /* ajoute les onglets de tabulation */
    oTab.add ("Chaudronnerie", "chaudronnerie.php");
    oTab.add ("Tuyauterie", "tuyauterie.php");
    oTab.add ("Maintenance", "maintenance_travaux.php");
    oTab.add ("Mécanique", "mecanique_travaux.php");
    oTab.add ("Electrique", "electrique_travaux.php");
%0

jparia · Answer

En gros tu voudrais faire cela:

[code=js]
<script type="text/javascript" language="JavaScript">
<!--
  function Load(){
    /* hauteur du frame (300 par défaut) */
    oTab.height = 400;
    oTab.show ("cadre");

    /* ajoute les onglets de tabulation */
    oTab.add ("Chaudronnerie", "chaudronnerie.php");
    oTab.add ("Tuyauterie", "tuyauterie.php");
    oTab.add ("Maintenance", "maintenance_travaux.php");
    oTab.add ("Mécanique", "mecanique_travaux.php");
    oTab.add ("Electrique", "electrique_travaux.php");
%0

jparia · Answer

En gros tu voudrais faire cela:

[code=js]
<script type="text/javascript" language="JavaScript">
<!--
  function Load(){
    /* hauteur du frame (300 par défaut) */
    oTab.height = 400;
    oTab.show ("cadre");

    /* ajoute les onglets de tabulation */
    oTab.add ("Chaudronnerie", "chaudronnerie.php");
    oTab.add ("Tuyauterie", "tuyauterie.php");
    oTab.add ("Maintenance", "maintenance_travaux.php");
    oTab.add ("Mécanique", "mecanique_travaux.php");
    oTab.add ("Electrique", "electrique_travaux.php");
%0

jparia · Answer

En gros tu voudrais faire cela:

[code=js]
<script type="text/javascript" language="JavaScript">
<!--
  function Load(){
    /* hauteur du frame (300 par défaut) */
    oTab.height = 400;
    oTab.show ("cadre");

    /* ajoute les onglets de tabulation */
    oTab.add ("Chaudronnerie", "chaudronnerie.php");
    oTab.add ("Tuyauterie", "tuyauterie.php");
    oTab.add ("Maintenance", "maintenance_travaux.php");
    oTab.add ("Mécanique", "mecanique_travaux.php");
    oTab.add ("Electrique", "electrique_travaux.php");
%0

jparia · Answer

En gros tu voudrais faire cela:

[code=js]
<script type="text/javascript" language="JavaScript">
<!--
  function Load(){
    /* hauteur du frame (300 par défaut) */
    oTab.height = 400;
    oTab.show ("cadre");

    /* ajoute les onglets de tabulation */
    oTab.add ("Chaudronnerie", "chaudronnerie.php");
    oTab.add ("Tuyauterie", "tuyauterie.php");
    oTab.add ("Maintenance", "maintenance_travaux.php");
    oTab.add ("Mécanique", "mecanique_travaux.php");
    oTab.add ("Electrique", "electrique_travaux.php");
%0

jparia · Answer

bon là y a un beug avec le forum :))

jparia · Answer

En gros tu voudrais faire cela:

[code=js]
<script type="text/javascript" language="JavaScript">
<!--
  function Load(){
    /* hauteur du frame (300 par défaut) */
    oTab.height = 400;
    oTab.show ("cadre");

    /* ajoute les onglets de tabulation */
    oTab.add ("Chaudronnerie", "chaudronnerie.php");
    oTab.add ("Tuyauterie", "tuyauterie.php");
    oTab.add ("Maintenance", "maintenance_travaux.php");
    oTab.add ("Mécanique", "mecanique_travaux.php");
    oTab.add ("Electrique", "electrique_travaux.php"%

jparia · Answer

En gros tu voudrais faire cela:

[code=js]
<script type="text/javascript" language="JavaScript">
<!--
  function Load(){
    /* hauteur du frame (300 par défaut) */
    oTab.height = 400;
    oTab.show ("cadre");

    /* ajoute les onglets de tabulation */
    oTab.add ("Chaudronnerie", "chaudronnerie.php");
    oTab.add ("Tuyauterie", "tuyauterie.php");
    oTab.add ("Maintenance", "maintenance_travaux.php");
    oTab.add ("Mécanique", "mecanique_travaux.php");
    oTab.add ("Electrique", "electrique_travaux.php"%

jparia · Answer

En gros tu voudrais faire cela:

[code=js]
<script type="text/javascript" language="JavaScript">
<!--
  function Load(){
    /* hauteur du frame (300 par défaut) */
    oTab.height = 400;
    oTab.show ("cadre");

    /* ajoute les onglets de tabulation */
    oTab.add ("Chaudronnerie", "chaudronnerie.php");
    oTab.add ("Tuyauterie", "tuyauterie.php");
    oTab.add ("Maintenance", "maintenance_travaux.php");
    oTab.add ("Mécanique", "mecanique_travaux.php");
    oTab.add ("Electrique", "electrique_travaux.php"%

jparia · Answer

En gros tu voudrais faire cela:

[code=js]
<script type="text/javascript" language="JavaScript">
<!--
  function Load(){
    /* hauteur du frame (300 par défaut) */
    oTab.height = 400;
    oTab.show ("cadre");

    /* ajoute les onglets de tabulation */
    oTab.add ("Chaudronnerie", "chaudronnerie.php");
    oTab.add ("Tuyauterie", "tuyauterie.php");
    oTab.add ("Maintenance", "maintenance_travaux.php");
    oTab.add ("Mécanique", "mecanique_travaux.php");
    oTab.add ("Electrique", "electrique_travaux.php"%

jparia · Answer

En gros tu voudrais faire cela:

[code=js]
<script type="text/javascript" language="JavaScript">
<!--
  function Load(){
    /* hauteur du frame (300 par défaut) */
    oTab.height = 400;
    oTab.show ("cadre");

    /* ajoute les onglets de tabulation */
    oTab.add ("Chaudronnerie", "chaudronnerie.php");
    oTab.add ("Tuyauterie", "tuyauterie.php");
    oTab.add ("Maintenance", "maintenance_travaux.php");
    oTab.add ("Mécanique", "mecanique_travaux.php");
    oTab.add ("Electrique", "electrique_travaux.php"%

jparia · Answer

En gros tu voudrais faire cela:

[code=js]
<script type="text/javascript" language="JavaScript">
<!--
  function Load(){
    /* hauteur du frame (300 par défaut) */
    oTab.height = 400;
    oTab.show ("cadre");

    /* ajoute les onglets de tabulation */
    oTab.add ("Chaudronnerie", "chaudronnerie.php");
    oTab.add ("Tuyauterie", "tuyauterie.php");
    oTab.add ("Maintenance", "maintenance_travaux.php");
    oTab.add ("Mécanique", "mecanique_travaux.php");
    oTab.add ("Electrique", "electrique_travaux.php"%

jparia · Answer

j'ai fais un print-écran car apparemment le forum n'accepte pas mon code

En gros tu voudrais faire cela: 



mais c'est pas logique...

etu54 · Answer

Oui en gros mais justement je veux faire oTab.del apres avoir récupéré des valeur d'une checkbox donc je ne peux pas le faire dans le load directement.

Je sais que vu de l'exterrieur cela doit etre difficile a comprendre mais je suis obligé de faire comme cela

jparia · Answer

Le client sélectionne des cases à cocher et tu veux faire apparaître des onglets selon ses choix?
Dans ce cas, pourquoi ne pas utiliser l'évènement onclick sur chaque case à cocher pour appeler une fonction qui ajoutera ou supprimera les onglet?

etu54 · Answer

Et bien parceque ce n'est pas sur la meme page mais en dernier recours je pense que je vais faire comme cela.

Je n'y avais pas penser merci

PetoleTeam · Answer

Bonjour à vous,
mais si le client change son choix, un coup tu del un coup tu add, le problème c'est que l'onglet ne va pas reprendre sa place, il est peut être plus intéressant de le masquer.

;O)

jparia · Answer

Idéalement, si l'on veut que les onglets soient dans un ordre précis à chaque changement dynamique, il faut que la fonction supprime tous les onglets et les recrée dans le bonne ordre.
Exemple:


/* détruit et créé un tabuleur vierge dans le conteneur à l'id "cadre" */
oTab.show("cadre");

/* ajoute les onglets de tabulation dans l'ordre désiré */ 
oTab.add ("Chaudronnerie", "chaudronnerie.php"); 
oTab.add ("Tuyauterie", "tuyauterie.php"); 
...

/* sélectionne le premier onglet et affiche la page correspondante */
oTab.select("Chaudronnerie");

PetoleTeam · Answer

Salut JPAria,
je voyais plutôt un truc dans ce goût la
//--------------------
function Swap( label_){
  var Label = oText.trim( label_);
  for (var i = 0; i < oTab.tabs.length; i++) {
    if (oTab.tabs[i][1] == Label) {
      var O_Tab = oTab.tabs[i][0];
      if( O_Tab.style.display == "none")
        O_Tab.style.display = "block";
      else
        O_Tab.style.display = "none";
      break;
    }
  }
}
voir pourquoi pas peut être même une fonction de disabled.

;O)

jparia · Answer

Pourquoi pas, on peut tout envisager.

Mais en utilisant la fonction Jaria:


oEl.visible(O_Tab, false); 


plutôt que:


O_Tab.style.display = "none";


je sais, je me fais plaisir :))

PetoleTeam · Answer

aller je te fais encore plus plaisir
//------------------------------------
Tab.prototype.Swap = function( label_){
  var Label = oText.trim( label_);
  for( var i = 0; i < this.tabs.length; i++) {
    if( this.tabs[i][1] == Label) {
      var O_Tab = this.tabs[i][0];
      if( oEl.isvisible( O_Tab))
        oEl.visible( O_Tab, false);
      else
        oEl.visible( O_Tab, true);
      break;
    }
  }
}
que du Jaria inside...

;O)

etu54 · Answer

Merci de toutes ces réponses.

Et cette fonction je l'appelle sur le onload ?

jparia · Answer

Re etu54,

si tu as un formulaire avec des cases à cochées qui envoi les données vers la page du tabuleur, il te faut les récupérer par:

les méthodes GET ou POST côté serveur(PHP par exemple)
ou 
Uniquement par la méthode GET en javascript grâce à la fonction Jaria oNav.param();

tu récupères ainsi les valeurs du formulaire et traite le tabuleur au chargement de la page dans la fonction Load()

Fonction qui ne fonctionne que par onclick

34 réponses

Votre réponse

Discussions similaires