Catégories par onglets avec rajout d'une ligne de description

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

Résolu Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Lun 12 Nov 2012 - 8:56

Bonjour à vous,

J'utilise ce script d' EA sur mon forum (adresse sur mon profil)

Code:
$(function(){
 
  /* variable temporaire */
  var t;
 
  /* liste des onglets avec les catégories en faisant partie */
  var onglets=  [
                          ["BlaBlaBla",[0]],
                          ["Aides",[1]],
                          ["Sagesse",[2]],
                          ["Lecture",[3]],
                          ["Mystères",[4]],
                          ["Médiumnité",[5]],
                          ["Parascience",[6]],
                          ["Energie",[7]],
                          ["Histoire",[8]],
                          ["Forum",[9]],
                          ["Archives",[10]],
                          ["Tout le forum",[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]]];
 
  /* fonction pour sélectionner un onglet d'après une string s */
  var getOnglet= function(s) {
      var j;
      for(j=0;j<onglets.length;j++)
        if(JSON.stringify(onglets[j])==s) return onglets[j];
      return !1;
  };
 
  /* fonction pour voir si un index de catégorie i est dans un onglet d */
  var inOnglets= function(d,i) {
      var j;
      for(j=0;j<d[1].length;j++)
        if(d[1][j]==i) return !0;
      return !1;
  };
 
  /* onglet sélectionné par défaut */
  var songlet= onglets[0];
  /* est-ce que l'onglet sélectionné est sauvegardé d'un affichage de l'index à l'autre */
  var save= false;
  /* temps pour slider en ms */
  var timeslide= 800;
 
  /* récupération de l'onglet sauvé d'une autre fois */
  if(save && window.localStorage)
      if(t=localStorage.getItem("onglets"))
        if(t=getOnglet(t))
            songlet= t;
 
  /* entoure les catégories d'un <div class="cat-table" /> */
  $("th.secondarytitle").closest("table").wrap('<div class="cat-table" />');
 
  /* affichage de l'onglet en cours */
  $(".cat-table").filter(function(index) {
    return !inOnglets(songlet,index);
  }).hide();
 
  /* ajout du div des onglets */
  $(".cat-table:first").before('<div id="cat-onglets"></div>');

  /* ajout des onglets dans le div */
  for(t=0;t<onglets.length;t++)
  {
      $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'">'+onglets[t][0]+'</div>');
  }
 
  /* clic sur un onglet */
  $("#cat-onglets .co-item").click(function(){
      $("#cat-onglets .co-actif").removeClass("co-actif");
      $(this).addClass("co-actif");
      var o= onglets[$("#cat-onglets .co-item").index(this)];
      $(".cat-table").not($(".cat-table").filter(function(index) {
        return inOnglets(o,index);
      }).slideDown(timeslide)).slideUp(timeslide); 
      if(save && window.localStorage) localStorage.setItem("onglets",JSON.stringify(o));
  });
 
});

Il fonctionne très bien (merci EA) mais je souhaiterai rajouter une ligne d'explication au dessous quand on survole un des boutons comme sur le site de Mailorama qiuand on survole Emails, shopping etc.

Peut on m'aider, EA peut être !

Merci d'avance



Dernière édition par AenigmA le Mer 21 Nov 2012 - 15:42, édité 3 fois

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par _backdraft_ le Lun 12 Nov 2012 - 9:05

Bonjour,

Je ne connais pas trop les codes pour les onglets (le javascript n'est pas ma tasse de thé), cependant je sais que pour afficher un texte au survole il faut utiliser la fonction alt="texte"

Cordialement
Backdraft

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Mar 13 Nov 2012 - 9:35

Bonjour, merci _backdraft_, mais je pense que c'est différent dans ce type de codage.
Un petit up svp.

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Mer 14 Nov 2012 - 10:46

Un petit bonjour UP à tous.

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Jeu 15 Nov 2012 - 12:49

Bonjour,
Est ce que ce jour sera un jour de chance à rajouter sur le calendrier de mes questionnements sur ForumActif ? UP UPUP UPPUPUP !

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Ven 16 Nov 2012 - 15:36

Bonjour à tous
Up du jour Smile

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Sam 17 Nov 2012 - 15:43

Bonjour et bon week-end

Petit up pour un w-e réussi.

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Dim 18 Nov 2012 - 16:42

Bonjour,
Un petit up si âme charitable il y a ... Smile

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Lun 19 Nov 2012 - 18:14

Bonsoir à vous
Up si quelqu'un avait une idée, merci.

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Mar 20 Nov 2012 - 18:55

Alala, un petit up...

En huit ans de forum j'ai eu deux réponses ici de deux amies Final-Blond et Quierra.
Allez vous faire mentir le proverbe "Jamais deux sans trois" Messieurs Mesdames ? J'espère que non tout de même !

Si c'est un autre système d'onglets avec description, pas de problème.

A demain

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par _backdraft_ le Mar 20 Nov 2012 - 23:37

Bonsoir,

Ne croyez pas que l'envie de vous aider n'y est pas, le problème est que nous ne sommes pas tous qualifiez pour effectuez ce que vous demandez, il faut bien se rendre compte que plus vos problèmes sont compliqués moins vous avez de chance d'avoir une réponse rapide. Sinon vous pouvez aussi tenter votre chance sur des forums spécialisés.

Cordialement
Backdraft

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par Ea le Mer 21 Nov 2012 - 2:48

Bonjour,


On pourrait ajouter un troisième élément à chaque onglet :

Code:
 ["BlaBlaBla",[0], "Description de blablabla"],
Et remplacer :

Code:
  /* ajout des onglets dans le div */
  for(t=0;t<onglets.length;t++)
  {
      $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'">'+onglets[t][0]+'</div>');
  }
Par :

Code:
  /* ajout des onglets dans le div */
  for(t=0;t<onglets.length;t++)
  {
      $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'" title="'+onglets[t][2]+'">'+onglets[t][0]+'</div>');
  }
Après pour avoir un autre style de tooltip, il faudrait un script de tooltip.

Par exemple pour le script de tooltip tipsy, mettre le contenu de ça dans le css : https://raw.github.com/jaz303/tipsy/master/src/stylesheets/tipsy.css ( cela peut être modifié selon les désirs )

Et ajouter ceci après le script du premier message :

Code:
// tipsy, facebook style tooltips for jquery
// version 1.0.0a
// (c) 2008-2010 jason frame [jason@onehackoranother.com]
// released under the MIT license

(function($) {
   
    function maybeCall(thing, ctx) {
        return (typeof thing == 'function') ? (thing.call(ctx)) : thing;
    };
   
    function isElementInDOM(ele) {
      while (ele = ele.parentNode) {
        if (ele == document) return true;
      }
      return false;
    };
   
    function Tipsy(element, options) {
        this.$element = $(element);
        this.options = options;
        this.enabled = true;
        this.fixTitle();
    };
   
    Tipsy.prototype = {
        show: function() {
            var title = this.getTitle();
            if (title && this.enabled) {
                var $tip = this.tip();
               
                $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
                $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
                $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);
               
                var pos = $.extend({}, this.$element.offset(), {
                    width: this.$element[0].offsetWidth,
                    height: this.$element[0].offsetHeight
                });
               
                var actualWidth = $tip[0].offsetWidth,
                    actualHeight = $tip[0].offsetHeight,
                    gravity = maybeCall(this.options.gravity, this.$element[0]);
               
                var tp;
                switch (gravity.charAt(0)) {
                    case 'n':
                        tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
                        break;
                    case 's':
                        tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
                        break;
                    case 'e':
                        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
                        break;
                    case 'w':
                        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
                        break;
                }
               
                if (gravity.length == 2) {
                    if (gravity.charAt(1) == 'w') {
                        tp.left = pos.left + pos.width / 2 - 15;
                    } else {
                        tp.left = pos.left + pos.width / 2 - actualWidth + 15;
                    }
                }
               
                $tip.css(tp).addClass('tipsy-' + gravity);
                $tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0);
                if (this.options.className) {
                    $tip.addClass(maybeCall(this.options.className, this.$element[0]));
                }
               
                if (this.options.fade) {
                    $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
                } else {
                    $tip.css({visibility: 'visible', opacity: this.options.opacity});
                }
            }
        },
       
        hide: function() {
            if (this.options.fade) {
                this.tip().stop().fadeOut(function() { $(this).remove(); });
            } else {
                this.tip().remove();
            }
        },
       
        fixTitle: function() {
            var $e = this.$element;
            if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') {
                $e.attr('original-title', $e.attr('title') || '').removeAttr('title');
            }
        },
       
        getTitle: function() {
            var title, $e = this.$element, o = this.options;
            this.fixTitle();
            var title, o = this.options;
            if (typeof o.title == 'string') {
                title = $e.attr(o.title == 'title' ? 'original-title' : o.title);
            } else if (typeof o.title == 'function') {
                title = o.title.call($e[0]);
            }
            title = ('' + title).replace(/(^\s*|\s*$)/, "");
            return title || o.fallback;
        },
       
        tip: function() {
            if (!this.$tip) {
                this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
                this.$tip.data('tipsy-pointee', this.$element[0]);
            }
            return this.$tip;
        },
       
        validate: function() {
            if (!this.$element[0].parentNode) {
                this.hide();
                this.$element = null;
                this.options = null;
            }
        },
       
        enable: function() { this.enabled = true; },
        disable: function() { this.enabled = false; },
        toggleEnabled: function() { this.enabled = !this.enabled; }
    };
   
    $.fn.tipsy = function(options) {
       
        if (options === true) {
            return this.data('tipsy');
        } else if (typeof options == 'string') {
            var tipsy = this.data('tipsy');
            if (tipsy) tipsy[options]();
            return this;
        }
       
        options = $.extend({}, $.fn.tipsy.defaults, options);
       
        function get(ele) {
            var tipsy = $.data(ele, 'tipsy');
            if (!tipsy) {
                tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
                $.data(ele, 'tipsy', tipsy);
            }
            return tipsy;
        }
       
        function enter() {
            var tipsy = get(this);
            tipsy.hoverState = 'in';
            if (options.delayIn == 0) {
                tipsy.show();
            } else {
                tipsy.fixTitle();
                setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
            }
        };
       
        function leave() {
            var tipsy = get(this);
            tipsy.hoverState = 'out';
            if (options.delayOut == 0) {
                tipsy.hide();
            } else {
                setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
            }
        };
       
        if (!options.live) this.each(function() { get(this); });
       
        if (options.trigger != 'manual') {
            var binder  = options.live ? 'live' : 'bind',
                eventIn  = options.trigger == 'hover' ? 'mouseenter' : 'focus',
                eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
            this[binder](eventIn, enter)[binder](eventOut, leave);
        }
       
        return this;
       
    };
   
    $.fn.tipsy.defaults = {
        className: null,
        delayIn: 0,
        delayOut: 0,
        fade: false,
        fallback: '',
        gravity: 'n',
        html: false,
        live: false,
        offset: 0,
        opacity: 0.8,
        title: 'title',
        trigger: 'hover'
    };
   
    $.fn.tipsy.revalidate = function() {
      $('.tipsy').each(function() {
        var pointee = $.data(this, 'tipsy-pointee');
        if (!pointee || !isElementInDOM(pointee)) {
          $(this).remove();
        }
      });
    };
   
    // Overwrite this method to provide options on a per-element basis.
    // For example, you could store the gravity in a 'tipsy-gravity' attribute:
    // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
    // (remember - do not modify 'options' in place!)
    $.fn.tipsy.elementOptions = function(ele, options) {
        return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
    };
   
    $.fn.tipsy.autoNS = function() {
        return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
    };
   
    $.fn.tipsy.autoWE = function() {
        return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
    };
   
    /**
    * yields a closure of the supplied parameters, producing a function that takes
    * no arguments and is suitable for use as an autogravity function like so:
    *
    * @param margin (int) - distance from the viewable region edge that an
    *        element should be before setting its tooltip's gravity to be away
    *        from that edge.
    * @param prefer (string, e.g. 'n', 'sw', 'w') - the direction to prefer
    *        if there are no viewable region edges effecting the tooltip's
    *        gravity. It will try to vary from this minimally, for example,
    *        if 'sw' is preferred and an element is near the right viewable
    *        region edge, but not the top edge, it will set the gravity for
    *        that element's tooltip to be 'se', preserving the southern
    *        component.
    */
    $.fn.tipsy.autoBounds = function(margin, prefer) {
      return function() {
         var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
             boundTop = $(document).scrollTop() + margin,
             boundLeft = $(document).scrollLeft() + margin,
             $this = $(this);

         if ($this.offset().top < boundTop) dir.ns = 'n';
         if ($this.offset().left < boundLeft) dir.ew = 'w';
         if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
         if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';

         return dir.ns + (dir.ew ? dir.ew : '');
      }
   };
   
})(jQuery);

$(function(){

  $("#cat-onglets .co-item").tipsy();

});
Cordialement.

Ea
Aidactif
Aidactif

Messages : 23419
Inscrit(e) le : 04/04/2008

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

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Mer 21 Nov 2012 - 8:50

Merci Backdraft de tes réponses, tout à fait d'accord avec ce que tu dis. C'est bien pour cela que je pose la question ... car comme toi je ne sais pas et qu' hormis deux ou trois personnes on est tous au même point en codage.

Merci EA de ta réponse, je vais essayer cela et si je ne comprends pas totalement je reviens vers toi.

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Mer 21 Nov 2012 - 10:28

Bonjour EA si tu passes par là, ça fonctionne sur les 3 navigateurs déjà bien Smile

Je ne connaissais pas le nom tooltip, en gros donc c'est une infobulle.
Y a t il moyen que les infobulles de tous les onglets se positionnent au même endroit plutôt qu' à des endroit différents car ça serait pile poil ce que je souhaite. Ca me permettrait de mettre une ligne entière centrée sur la totalité de la largeur formée par la barre d'onglets.
Merci

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par Ea le Mer 21 Nov 2012 - 13:00

dans ce cas il faudrait abandonner le script de tooltip et mettre après :

Code:
  /* ajout des onglets dans le div */
  for(t=0;t<onglets.length;t++)
  {
      $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'" title="'+onglets[t][2]+'">'+onglets[t][0]+'</div>');
  }
quelque chose du genre :

Code:
/* zone de tooltip */
$("#cat-onglets").append('<div id="co-tooltip"></div>');

/* tooltip au survol des onglets */
$("#cat-onglets").on('mouseover','.co-item', function(){
  $('#co-tooltip').text($(this).attr('title'));
});

/* retrait tooltip quand on sort d'un onglet */
$("#cat-onglets").on('mouseout','.co-item', function(){
  $('#co-tooltip').text("");
});
il devrait donc y avoir un élément en dessous des onglets :

Code:
<div id="co-tooltip"></div>
qui sera rempli par la description de l'onglet qu'on survol.

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23419
Inscrit(e) le : 04/04/2008

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

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Mer 21 Nov 2012 - 15:27

Qu'un mot qui en reflète beaucoup d'autres MERCI

Juste une question pour une probable modification dans le temps
Je peux remplacer "Description de blablabla" par "adresse d'une image" ?

Dans tous les cas je n'ai plus qu' à faire un super css et hop c'est génial yesss


AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par Ea le Mer 21 Nov 2012 - 15:36

Pour l'adresse d'une image, ce qu'il faudrait ajouter devrait être plutôt :

Code:
/* zone de tooltip */
$("#cat-onglets").append('<div id="co-tooltip"></div>');
 
/* tooltip au survol des onglets */
$("#cat-onglets").on('mouseover','.co-item', function(){
  $('#co-tooltip').html('<img src="'+$(this).attr('title')+'" />');
});
 
/* retrait tooltip quand on sort d'un onglet */
$("#cat-onglets").on('mouseout','.co-item', function(){
  $('#co-tooltip').html("");
});

Ea
Aidactif
Aidactif

Messages : 23419
Inscrit(e) le : 04/04/2008

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

Résolu Re: Catégories par onglets avec rajout d'une ligne de description

Message par AenigmA le Mer 21 Nov 2012 - 15:42

Ok, je garde dans un coin de mon administration au cas ou me prenne l'envie.

Merci Ea, c'est très gentil.

Un beau Résolu grâce à toi. Beaucoup vont être peut être intéressés aussi. Tant mieux.

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA 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