Modification d'un script d'onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modification d'un script d'onglets

Message par Daewyn le Lun 13 Avr 2015 - 22:28

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :

Description du problème

Bonjour, bonsoir, et merci d'avance à ceux qui voudront bien m'aider.

J'utilise pour mon forum un système d'onglets dans certains messages. Le truc c'est que j'aurai voulu rajouter un effet de transition au contenu lors du changement d'onglet, chose que le script de base que j'utilise ne permet pas. Et après avoir tenté infructueusement de le modifier (je suis une bille en javascript xD) je me tourne vers vous en espérant avoir plus de chance !

Voici le script en question :

Code:
/**
 * Système d'onglets automatisé
 * Version : 1.0
 * Par Emmanuel "Manumanu" B.
 **/

$(document).ready(function() {
  var ongletActuel = null;
  ongletActuel = $('.tabs-onglets a:first').attr('href');

  // Ajout de classe au premier onglet
  $('.tabs-onglets').find('a[href="'+ ongletActuel +'"]').addClass('selected');

  // Afficher l'élément par défaut correspondant à celui de l'onglet par défaut
  $(ongletActuel).show().siblings().hide();

  // Gestion de l'événement clic
  $('.tabs-onglets a').click(function(e) {
      idOnglet = $(this).attr('href');

      // Si l'élément est déjà sélectionné, ne rien faire
      if (idOnglet == ongletActuel)
        e.preventDefault();
      else {
        // Afficher le contenu demandé et masquer le contenu restant
        $(idOnglet).fadeIn().siblings().hide();

        // Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné
        $(this).addClass('selected').siblings().removeClass('selected');
        ongletActuel = idOnglet;
      }

      // Empêche le déclenchement du lien
      e.preventDefault();
  });
});

Et le code html :

Code:
<div class="tabs-onglets">
  <a href="#premier_onglet">Premier onglet</a>
  <a href="#deuxieme_onglet">Deuxième onglet</a>
  <a href="#troisieme_onglet">Troisième onglet</a>
</div>

<div id="contenu">
  <div id="premier_onglet">
      <h1>Premier onglet</h1>
  </div>
  <div id="deuxieme_onglet">
      <h1>Deuxième onglet</h1>
  </div>
  <div id="troisieme_onglet">
      <h1>Troisième onglet</h1>
  </div>
</div>

Merci d'avance ! =)


Dernière édition par Daewyn le Ven 17 Avr 2015 - 19:25, édité 1 fois

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification d'un script d'onglets

Message par oxymore le Mar 14 Avr 2015 - 11:07

Bonjour

Avez vous essayez de mettre une valeur dans le fadeIn de cette partie du code
Code:
  $(idOnglet).fadeIn().siblings().hide();

par exemple
Code:
  $(idOnglet).fadeIn(4000).siblings().hide();

oxymore
**

Messages : 95
Inscrit(e) le : 09/11/2008

http://www.google.fr
oxymore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification d'un script d'onglets

Message par Daewyn le Mar 14 Avr 2015 - 16:35

Bonjour et merci de cette réponse rapide !

Effectivement ça marche très bien. Maintenant je me demandais, est-il possible de varier l'effet d'apparition des onglets ? Celui du script joue sur l'opacité progressive, est-ce qu'il serait possible de changer ça par exemple par un slide ?

EDIT : je viens de tester avec un slideDown, ça marche, le slideUp par contre semble faire planter le script vu que plus rien ne s'affiche ?? (c'est normal ou c'est moi ? xD)

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification d'un script d'onglets

Message par Daewyn le Mer 15 Avr 2015 - 2:55

Excusez moi du double-post, il s'avère que finalement j'ai un autre soucis. J'aurais souhaité appliquer une mise en forme à mes onglets, et notamment une taille et une largeur fixe. Or ce n'est pas possible, puisque les onglets sont considérés comme des liens, et donc si dans le CSS je mets comme classe ".tabs-ongles a" , je ne peux pas appliquer de taille ou de largeur. Est-ce qu'il y aurait une autre classe qui m'aurait échappé qui prendrait en compte ces modifications, ou faut-il modifier le script pour appliquer un autre identifiant aux onglets ? (et si oui, comment ? ^^')

Merci d'avance !

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification d'un script d'onglets

Message par no_way le Mer 15 Avr 2015 - 13:48

Bonjour,
Vous devez ajouter la propriété "display" et la placer à "inline-block" dans la déclaration CSS ".tabs-ongles a{...}".

no_way
Aidactif
Aidactif

Messages : 1773
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification d'un script d'onglets

Message par Daewyn le Ven 17 Avr 2015 - 19:25

Vraiment désolée du temps de réponse, j'ai été très occupée au point que j'en ai complètement oublié que j'avais posté ici ><

Effectivement ça marche très bien, je passe en résolu. Merci énormément en tout cas et encore désolée =)

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum