Categorieën open- en dichtklappen

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

Tutorial Categorieën open- en dichtklappen

Bericht van 10spetter10 op di 5 jan 2016 - 20:23

Categorieën open- en dichtklappen


Heb je ook zoveel categorieën staan en wil je er een paar dichtklappen? Momenteel dit enkel een optie bij invision, maar als je even deze tutorial volgt kan je het ook met je eigen phpBB2, phpBB3 of punBB forum!

Javascript


Om zo een categorie toggler te maken, gebruiken we een javascript. Dit script dien je op te slaan in het javascript code beheer:

Beheerderspaneel Modules html & javascript Javascript code beheer  

Titel: eigen keuze (vb: categorie klapluik)
Plaatsing: 'Op de index'
Code: zie hieronder[

Om zo een categorie toggler te maken, gebruiken we een javascriptcode dat specifiek is voor je forumversie. Kopieer dus niet zomaar de eerste code die je tegenkomt!


  • phpBB2

    Code:
    $(function() {
       $('.three-col td:not(:first,:last) .forumline:not(:first)').each(function(i) {
      
          var head = $(this).find('tr:first');
          var forumrows = $(this).find('tr:not(:first)');
      
      head.find('th:last').append('<div id=\"bc' + i + '\" class=\"contract\">   </div>');
      forumrows.addClass('forum-rows c'+i);
       });
       initCategories();
    });
    $(document).on ("click", ".contract,.expand", function () {
       var temp = $(this).attr('id').substr(1);
       toggleCategory(temp);
    });

    // by invision.js
    function initCategories() {
       var id;
       cookies = document.cookie.split('; ');
       for (var i = 0; i < cookies.length; i++) {
          if (cookies[i].charAt(0) == '_') {
             cookie = cookies[i].split('=');
             if (cookie[1] == '1') {
                id = cookie[0].substring(1);
                if ($('.'+id).length >0) {
                   toggleCategory(id)
                }
             }
          }
       }
    }
    // by invision.js, modified by JScript
    function toggleCategory(id) {
       var obj = document.getElementById(id);
       var button = document.getElementById('b' + id);
       if (obj) {
          var toggle = obj.style.display == 'none';
          obj.style.display = toggle ? '' : 'none';
       } else {
          var elems = document.getElementsByClassName(id);
          for (var i = 0, len = elems.length; i < len; i++) {
             var toggle = elems[i].style.display == 'none';
             elems[i].style.display = toggle ? '' : 'none';
          }
       }
       button.className = toggle ? 'contract' : 'expand';
       my_setcookie('_' + id, toggle ? '' : '1', true);
       return false
    }

  • phpBB3

    Code:
    $(function() {
       var oCat = $('#main-content .forabg'),
          oThis = null,
          oTemp = null,
          sEval = '';
     
       sEval = "oThis.find('ul.topiclist:first dl.icon').append('<div onclick=\"toggleCategory(\'c' + i + '\');\" id=\"bc' + i + '\" class=\"contract\">   </div>');" +
                "oThis.find('ul.topiclist.forums').attr('id', 'c' + i);";

       for (var i = 0, len = oCat.length; i < len; i++) {
          oThis = $(oCat[i]);
          eval(sEval);
       }
     
       initCategories();
    });
    // by invision.js
    function initCategories() {
       var id;
       cookies = document.cookie.split('; ');
       for (var i = 0; i < cookies.length; i++) {
          if (cookies[i].charAt(0) == '_') {
             cookie = cookies[i].split('=');
             if (cookie[1] == '1') {
                id = cookie[0].substring(1);
                if (document.getElementById(id)) {
                   toggleCategory(id)
                }
             }
          }
       }
    }
    // by invision.js, modified by JScript
    function toggleCategory(id) {
       var obj = document.getElementById(id);
       var button = document.getElementById('b' + id);
       if (obj) {
          var toggle = obj.style.display == 'none';
          obj.style.display = toggle ? '' : 'none';
       } else {
          var elems = document.getElementsByClassName(id);
          for (var i = 0, len = elems.length; i < len; i++) {
             var toggle = elems[i].style.display == 'none';
             elems[i].style.display = toggle ? '' : 'none';
          }
       }
       button.className = toggle ? 'contract' : 'expand';
       my_setcookie('_' + id, toggle ? '' : '1', true);
       return false
    }

  • punBB

    Code:
    $(function() {
       var oCat = $('#main-content .main-head'),
          oThis = null,
          oTemp = null,
          sEval = '';
     
       sEval = "oThis.find('h2').append('<div onclick=\"toggleCategory(\'c' + i + '\');\" id=\"bc' + i + '\" class=\"contract\">  &nbsp;</div>');" +
                "oThis.next().attr('id', 'c' + i);";

       for (var i = 0, len = oCat.length; i < len; i++) {
          oThis = $(oCat[i]);
          eval(sEval);
       }
     
       initCategories();
    });
    // by invision.js
    function initCategories() {
       var id;
       cookies = document.cookie.split('; ');
       for (var i = 0; i < cookies.length; i++) {
          if (cookies[i].charAt(0) == '_') {
             cookie = cookies[i].split('=');
             if (cookie[1] == '1') {
                id = cookie[0].substring(1);
                if (document.getElementById(id)) {
                   toggleCategory(id)
                }
             }
          }
       }
    }
    // by invision.js, modified by JScript
    function toggleCategory(id) {
       var obj = document.getElementById(id);
       var button = document.getElementById('b' + id);
       if (obj) {
          var toggle = obj.style.display == 'none';
          obj.style.display = toggle ? '' : 'none';
       } else {
          var elems = document.getElementsByClassName(id);
          for (var i = 0, len = elems.length; i < len; i++) {
             var toggle = elems[i].style.display == 'none';
             elems[i].style.display = toggle ? '' : 'none';
          }
       }
       button.className = toggle ? 'contract' : 'expand';
       my_setcookie('_' + id, toggle ? '' : '1', true);
       return false
    }



CSS


Tot slot nog de opmaak van de open-/dichtknoppen. Deze wordt gestyled door middel van css.

Beheerderspaneel Display Plaatjes en kleuren Kleuren Cascading style sheet

Ik heb hieronder drie versies gemaakt waar je zelf eentje uit kan kiezen. Het is natuurlijk mogelijk om een eigen opmaak te creëren.


  1. Versie1



    Code:
    .contract, .expand {
      background: url("http://illiweb.com/fa/invision/exp_minus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
      cursor: pointer;
      float: right;
    }
    .expand {
      background: url("http://illiweb.com/fa/invision/exp_plus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
    }

  2. Versie2



    Code:
    .contract, .expand {
      background: url("http://illiweb.com/fa/m/tabs_less2.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
      cursor: pointer;
      float: right;
      margin-top: -3px;
      width: 20px;
      height: 20px;
    }
    .expand {
      background: url("http://illiweb.com/fa/m/tabs_more2.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
    }

  3. Versie3



    Code:
    .contract, .expand {
      background: url("http://i.imgur.com/GyZCHY1.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
      cursor: pointer;
      float: right;
      margin-top: 0px;
      width: 16px;
      height: 16px;
    }
    .expand {
      background: url("http://i.imgur.com/UTNqTlZ.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
    }



avatar

10spetter10
Medaille Forumlid

Man Aantal berichten : 1267
Geboortedatum : 21-04-97
Leeftijd : 21
Taal : Nederlands
Locatie : België
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum