Afficher / Masquer les widgets du forum

par **Threax** le Dim 14 Nov 2010 - 12:32

Afficher / Masquer les widgets du forum

Définition:

Ce script permet à vos membres de choisir individuellement d'afficher ou masquer les widgets du forum selon leurs préférences. Vous pouvez le tester ici afin de découvrir cette fonctionnalité :
Comment ça marche:

Ce script ne nécessite aucune édition de template, il est donc très facile à installer. Toutefois, selon la version de votre forum vous devez installer un script différent.

Le script retient votre choix même si vous changez de page, ou si vous la rafraîchissez. Le choix peut être inversé si vous cliquez sur la flèche, ou si vous videz le cache du navigateur.
Mettre en place le fonctionnement :

Vous devez installer le script de votre version sur toutes les pages ( voir gestion des codes javascript pour comment faire ) et installer un code CSS.
Le script à installer:
- Script pour les forums de version phpbb2 :
  
  Code:
  $(function() { var c = $("#left,#right"), d, e = function() { var a = $(this).data("side"); window.localStorage && localStorage[("none" == $("#" + a).parent().css("display") ? "remove" : "set") + "Item"]("wid" + a, "1"); $("#" + a).parent().toggle(); $(this).toggleClass("isopened isclosed") }; c.length && ($("#content-container").prepend(d = $('<div id="widget-arrows"><div style="clear:both"></div></div>')), c.each(function() { var a = $(this).attr("id"), b = $('<div class="widget-arrow is' + a + ' isopened"></div>'); b.data("side", a).appendTo(d).click(e); window.localStorage && "1" == localStorage.getItem("wid" + a) && b.trigger("click") })) });
- Script pour les forums d'autres versions :
  
  Code:
  $(function() { var c = $("#left,#right"), d, e = function(a) { var a = a.direct ? 0 : 1E3, b = $(this).data("side"); window.localStorage && localStorage[("none" == $("#" + b).css("display") ? "remove" : "set") + "Item"]("wid" + b, "1"); $("#" + b).stop(!0, !0).animate({width:"toggle", height:"toggle", opacity:"toggle"}, a); $(this).toggleClass("isopened isclosed") }; c.length && ($("#content-container").prepend(d = $('<div id="widget-arrows"><div style="clear:both"></div></div>')), c.each(function() { $(this).find("script").remove(); var a = $(this).attr("id"), b = $('<div class="widget-arrow is' + a + ' isopened"></div>'); "right" == a && $("#content").prepend($("#right").css("padding", "0 10px")).css("margin-right", 0); b.data("side", a).appendTo(d).click(e); window.localStorage && "1" == localStorage.getItem("wid" + a) && b.trigger({type:"click", direct:!0}) })) });

Ajoutez le code CSS :

Après avoir ajouté le script, vous devez ajouter le code css : Panneau d'administration ► Affichage ► Couleurs ► Feuille de style CSS, et ajoutez :

Code:: #widget-arrows { height: 13px; } .widget-arrow { height: 13px; width: 16px; border-radius: 4px; float: left; cursor: pointer; background: #f5ebf7 url(http://i.imgur.com/zVQMs.png) no-repeat 0 -13px; } .widget-arrow.isright { float: right; } .widget-arrow.isleft.isclosed, .widget-arrow.isright.isopened { background-position: 0 0; }

A vous de jouer maintenant ! Very Happy