Discussion :

[choubaka16]

Bonjour !

Premier message sur le forum !

Je suis actuellement en stage pour faire un site web sauf que dans mon entreprise je suis le seul a maîtriser un le langage web.

J'ai fais une page avec plusieurs onglet grâce à l'outil Tabulous.JS ce qui me donne un résultat comme ceci :



Les différents onglets sont composés de formulaire. Le problème est que (je crois avoir compris) que mes différents formulaire se superpose du premier au dernier (donc le 3 éme est tout en haut). Je ne peux alors saisir ni dans le deuxième ni dans le troisième.

La solution que j'ai trouvé via mes recherche serait soit de mettre un z-index de 2 pour celle active et un z-index de 1 pour celle non active. Cependant n'ayant aucune connaissance en JS je n'arrive pas a parvenir a mon résultat final.

Je précise que en mettant un z-index de 2 sur mon premier formulaire (onglet 1) dans mon CSS cela fonctionne TRES bien pour le premier formulaire (cependant les deux autres ne sont donc plus remplissable).

Je vous donne le code css si jamais vous pouvez m'indiquer ou mettre ces deux propriétés !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
;(function ( $, window, document, undefined ) {
 
    var pluginName = "tabulous",
        defaults = {
            effect: 'scale'
        };
 
       // $('<style>body { background-color: red; color: white; }</style>').appendTo('head');
 
    function Plugin( element, options ) {
        this.element = element;
        this.$elem = $(this.element);
        this.options = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }
 
    Plugin.prototype = {
 
        init: function() {
 
            var links = this.$elem.find('a');
            var firstchild = this.$elem.find('li:first-child').find('a');
            var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');
 
            if (this.options.effect == 'scale') {
             tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
            } else if (this.options.effect == 'slideLeft') {
                 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
            } else if (this.options.effect == 'scaleUp') {
                 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
            } else if (this.options.effect == 'flip') {
                 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
            }
 
            var firstdiv = this.$elem.find('#tabs_container');
            var firstdivheight = firstdiv.find('div:first').height();
 
            var alldivs = this.$elem.find('div:first').find('div');
 
            alldivs.css({'position': 'absolute','top':'40px'});
 
            firstdiv.css('height',firstdivheight+'px');
 
            firstchild.addClass('tabulous_active');
 
            links.bind('click', {myOptions: this.options}, function(e) {
                e.preventDefault();
 
                var $options = e.data.myOptions;
                var effect = $options.effect;
 
                var mythis = $(this);
                var thisform = mythis.parent().parent().parent();
                var thislink = mythis.attr('href');
 
 
                firstdiv.addClass('transition');
 
                links.removeClass('tabulous_active');
                mythis.addClass('tabulous_active');
                thisdivwidth = thisform.find('div'+thislink).height();
 
                if (effect == 'scale') {
                    alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');
                } else if (effect == 'slideLeft') {
                    alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');
                } else if (effect == 'scaleUp') {
                    alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');
                } else if (effect == 'flip') {
                    alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');
                }
 
 
                firstdiv.css('height',thisdivwidth+'px');
 
 
 
 
            });
 
 
 
 
 
 
        },
 
        yourOtherFunction: function(el, options) {
            // some logic
        }
    };
 
    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            new Plugin( this, options );
        });
    };
 
})( jQuery, window, document );

Si jamais il vous manque des informations ou vous avez des questions je serais ravis de vous compléter.

Merci à vous.

[Watilin]

Hello !

Pas sûr de pouvoir t'aider… Je ne connais pas Tabulous.js.

[hors sujet]Comme souvent le problème c'est la couche « framework » (au sens très général) que je ne connais pas et qui m'empêche de donner une réponse pertinente, mais ce n'est pas ta faute. Ça touche au problème plus général de la surabondance de frameworks dans l'écosystème du Web côté client.[/hors sujet]

D'intuition, je dirais que tu n'as pas à te soucier du z-index si tu masques simplement le contenu des onglets qui ne sont pas censés être visibles, avec un bon vieux display: none. D'ailleurs, ça a de grandes chances de simplifier le travail du moteur graphique (comparé à trois éléments censés être tous visibles mais avec l'un masquant les deux autres). Au mieux c'est une optimisation facile, au pire ça ne change rien.

Astuce si tu es sous un Firefox à jour : quand tu as un formulaire non remplissable, je devine que c'est à cause d'un élément transparent placé par-dessus. Dans ce cas, fais juste un clic-droit et choisis « Examiner l'élément », ça va t'ouvrir l'inspecteur HTML et t'afficher en surbrillance l'élément qui pose problème. Les autres navigateurs ont probablement une fonction similaire.

Le problème de Tabulous, comme la plupart des frameworks de présentation, c'est qu'il ajoute une « couche de fonctionnement » au code HTML, qui est potentiellement difficile à comprendre. Si tu débutes en JS, il serait peut-être préférable de t'entraîner avec du code HTML simple que tu écris toi-même.

[choubaka16]

Je te remercie de ta réponse. Oui le display none a été envisagé cependant, je ne sais ou le mettre dans le code (mes essaie de fur pas une réussite). J'ai codé quelque chose de simple mais je suis obligé de le complexifié un petit peu.

[Watilin]

Bonsoir,

j'ai jeté un œil à la doc de Tabulous, ce qui m'a permis de mieux comprendre ton code. J'avais l'impression que tu essayais de faire faire à ton script quelque chose qui faisait double emploi avec le plugin… En réalité tu as rajouté du code directement dans le script du plugin. C'est une mauvaise idée. Je te conseille de créer un fichier JS séparé, et de l'invoquer après le script du plugin. Quelque chose comme ça :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<head>
  ...
  <script src="tabulous.js"></script>
  <script src="ton-script.js"></script>
  ...
</head>

Ce plugin a l'avantage de ne pas générer de code HTML, il utilise ce que tu lui donnes. Si ton HTML est bien structuré, normalement tu n'as pas à te soucier de masquer ou afficher tes formulaires, Tabulous s'en charge à ta place. Cela dit, il semble que ce plugin souffre de bugs avec les liens. Il est possible que le bug se produise aussi avec les champs de formulaire.

Applique déjà le conseil que je t'ai donné et on verra si ça marche mieux

[NoSmoking]

Bonjour,
visiblement ce plugin travaille non pas avec des display:none/block mais en jouant avec l'opacity:0/1 d'où le problème que tu rencontres.