Mi piace: sistema di voto nei messaggi


Tutorial Mi piace: sistema di voto nei messaggi

Messaggio Da MattiaDes il Gio 6 Ago 2015 - 22:28

Mi piace: sistema di voto nei messaggi


Buongiorno! Con questo tutorial vedremo come inserire un sistema di voto nei messaggi del proprio forum.  Come prima cosa, come sempre, bisognerą aggiungere un codice CSS nel foglio di stile del proprio forum.

Pannello di amministrazione Visualizzazione Colori "Foglio di stile CSS"


Codice:

      #rep_post .reput_vote {
      background-color: #daedfb;
      color: #666;
      -khtml-user-select: none;
      -moz-transition: all,0.15s;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-transition: all,0.15s;
      -webkit-touch-callout: none;
      -webkit-transition: all,0.15s;
      -webkit-user-select: none;
      background: #f0f0f0 url(https://cdn1.iconfinder.com/data/icons/social-media-13/24/Like-16.png) no-repeat 6px center;
      background-size: 12px;
      clear: both;
      color: #666;
      cursor: pointer;
      display: table;
      font-size: 11px;
      font-weight: 400;
      line-height: 18px;
      margin: 5px;
      padding: 3px 5px 3px 25px;
      text-align: right;
      transition: all,0.15s;
    }
    .reput_vote.zero {
      background-color: #6a6a6a;
    }
      
      
      .BS_like:hover {
      background-color: #daedfb;
      color: #666;
    }
    .BS_like {
      -khtml-user-select: none;
      -moz-transition: all,0.15s;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-transition: all,0.15s;
      -webkit-touch-callout: none;
      -webkit-transition: all,0.15s;
      -webkit-user-select: none;
      background: #f0f0f0 url(https://cdn1.iconfinder.com/data/icons/social-media-13/24/Like-16.png) no-repeat 6px center;
      background-size: 12px;
      clear: both;
      color: #666;
      cursor: pointer;
      display: table;
      font-size: 11px;
      font-weight: 400;
      line-height: 18px;
      margin: 5px;
      padding: 3px 5px 3px 25px;
      text-align: right;
      transition: all,0.15s;
      user-select: none;
    }

    .BS_like:before {
      content: "Mi piace!";
    }
      
      #rep_post .bs_inline {
      list-style: none;
    }
      
      .BS_like:hover {
      background-color: #daedfb;
      color: #666;
    }
      
      #rep_post {white-space: nowrap;margin: 6px 4px;float: right;}
    #rep_post .bs_inline {list-style: none;}
    #rep_post .bs_inline > li {display: inline-block;margin: 0 3px;}
    #rep_post .bs_inline > li:first-child {margin-left: 0;}
    #rep_post .bs_inline img {display: none;}
    #rep_post span img {cursor: pointer;}


    .reput_vote.positive {background-color: #8db13e;}
    .reput_vote.zero {background-color: #6a6a6a;}

    #rep_post .reput_vote:before {
      content: "Likes: ";
    }

Ora, bisognerą aggiungere un nuovo codice javascript. Recati nella seguente pagina:

Pannello di amministrazione Moduli Gestione del codice javascript


- Titolo: Quello che si vuole;

- Posizione: Gli argomenti;

- *Codice: (*Per tutte le versioni dei forum, tratte che per PunBB)

Codice:
  function bestskins_ls() {
       for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                    var count = 0,
                          qtd = 0,
                          barra = $('.vote-bar', vote)[0],
                          botao = $('.vote-button', vote)[0];                      
                    if (barra) {
                            var numbarra = barra.title.match(/\d+/g);
                            qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    }
                  
                    //Imagem de reputaēćo
                    var reputation_UP = 'http://www.agrotube.com.br/images/seta_baixo.png';
    
                    botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reputation_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reputation_UP + '" alt="+" class="rep_up"></li>';
                    var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
                    var htmlFinal =
                    '<div class="rep_bar clearfix" id="rep_post">' +
                    '       <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                    '</div>';
    $('.postbody', vote.parentNode.parentNode.parentNode).append( htmlFinal );
       }
       x.remove();
    };
    function bestskinsVoto(b,a) {
      a.onclick = '#';
        $.get(b, function() {
         a.parentNode.style.display = 'none';
         var verify = a.parentNode.nextSibling.firstChild.innerHTML;
         if(verify == 0) {
         a.parentNode.nextSibling.firstChild.classList.remove('zero'),
         a.parentNode.nextSibling.firstChild.classList.add('positive');
         }
         var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
         c.innerHTML = c.innerHTML.replace(/\d+/,b);
        });
    };
    if (document.readyState ===  'complete') {
             bestskins_ls();
    } else {
           document.addEventListener('DOMContentLoaded', function() {
             bestskins_ls();
           });
    }

- *Codice: (*Per i forum che hanno come versione PunBB)

Codice:
  function bestskins_ls() {
       for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                    var count = 0,
                          qtd = 0,
                          barra = $('.vote-bar', vote)[0],
                          botao = $('.vote-button', vote)[0];                      
                    if (barra) {
                            var numbarra = barra.title.match(/\d+/g);
                            qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    }
                  
                    //Imagem de reputaēćo
                    var reputation_UP = 'http://www.agrotube.com.br/images/seta_baixo.png';
    
                    botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reputation_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reputation_UP + '" alt="+" class="rep_up"></li>';
                    var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
                    var htmlFinal =
                    '<div class="rep_bar clearfix" id="rep_post">' +
                    '       <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                    '</div>';
         $('.postfoot', vote.parentNode.parentNode.parentNode.parentNode).before( htmlFinal );
       }
       x.remove();
    };
    function bestskinsVoto(b,a) {
      a.onclick = '#';
        $.get(b, function() {
         a.parentNode.style.display = 'none';
         var verify = a.parentNode.nextSibling.firstChild.innerHTML;
         if(verify == 0) {
         a.parentNode.nextSibling.firstChild.classList.remove('zero'),
         a.parentNode.nextSibling.firstChild.classList.add('positive');
         }
         var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
         c.innerHTML = c.innerHTML.replace(/\d+/,b);
        });
    };
    if (document.readyState ===  'complete') {
             bestskins_ls();
    } else {
           document.addEventListener('DOMContentLoaded', function() {
             bestskins_ls();
           });
    }

- Risultato:


Buona giornata!  :zen:



avatar
MattiaDes
Amminattivo
Amminattivo

Sesso : Maschile
Etą : 21
Messaggi : 3182
Localitą : Modena, Italy


http://www.habbolifeforum.com
MattiaDes č stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum