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

[AenigmA]

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

[_backdraft_]

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

[AenigmA]

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

[AenigmA]

Un petit bonjour UP à tous.

[AenigmA]

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

[AenigmA]

Bonjour à tous
Up du jour

[AenigmA]

Bonjour et bon week-end

Petit up pour un w-e réussi.

[AenigmA]

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

[AenigmA]

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

[AenigmA]

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

[_backdraft_]

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

[Ea]

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.

[AenigmA]

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]

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

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

[Ea]

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.

[AenigmA]

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

[Ea]

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("");
});

[AenigmA]

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.